feat: implement video controls and pop-out functionality in Video component

This commit is contained in:
2026-02-27 22:12:47 +11:00
parent 58966aec19
commit f8af51b75c
7 changed files with 811 additions and 33 deletions

View File

@@ -1,7 +1,7 @@
import { lightTheme } from 'folds';
import { createContext, useContext, useEffect, useMemo, useState } from 'react';
import { onDarkFontWeight, onLightFontWeight } from '../../config.css';
import { butterTheme, darkTheme, silverTheme } from '../../colors.css';
import { butterTheme, darkTheme, discordTheme, discordDarkerTheme, silverTheme } from '../../colors.css';
import { settingsAtom } from '../state/settings';
import { useSetting } from '../state/hooks/settings';
@@ -37,9 +37,19 @@ export const ButterTheme: Theme = {
kind: ThemeKind.Dark,
classNames: ['butter-theme', butterTheme, onDarkFontWeight, 'prism-dark'],
};
export const DiscordTheme: Theme = {
id: 'discord-theme',
kind: ThemeKind.Dark,
classNames: ['discord-theme', discordTheme, onDarkFontWeight, 'prism-dark'],
};
export const DiscordDarkerTheme: Theme = {
id: 'discord-darker-theme',
kind: ThemeKind.Dark,
classNames: ['discord-darker-theme', discordDarkerTheme, onDarkFontWeight, 'prism-dark'],
};
export const useThemes = (): Theme[] => {
const themes: Theme[] = useMemo(() => [LightTheme, SilverTheme, DarkTheme, ButterTheme], []);
const themes: Theme[] = useMemo(() => [LightTheme, SilverTheme, DarkTheme, ButterTheme, DiscordTheme, DiscordDarkerTheme], []);
return themes;
};
@@ -51,6 +61,8 @@ export const useThemeNames = (): Record<string, string> =>
[SilverTheme.id]: 'Silver',
[DarkTheme.id]: 'Dark',
[ButterTheme.id]: 'Butter',
[DiscordTheme.id]: 'Discord',
[DiscordDarkerTheme.id]: 'Discord Darker',
}),
[]
);