feat: implement video controls and pop-out functionality in Video component
This commit is contained in:
@@ -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',
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user