) => {
+ e.preventDefault(); // Prevent default mouse action
+ pressTimerRef.current = setTimeout(handleLongPress, LONG_PRESS_DURATION);
+ };
+
+ const handleMouseUp = () => {
+ if (pressTimerRef.current) {
+ clearTimeout(pressTimerRef.current);
+ pressTimerRef.current = null;
+ }
+ };
+
if (sortedProgressItems.length === 0) return null;
return (
-
+
) =>
+ e.preventDefault()
+ } // Prevent right-click context menu
+ >
-
+
{sortedProgressItems.map((v) => (
- removeItem(v.id)}
- />
+
+ removeItem(v.id)}
+ />
+
))}
diff --git a/src/pages/parts/player/PlayerPart.tsx b/src/pages/parts/player/PlayerPart.tsx
index 2d73286ba..f6fb04d48 100644
--- a/src/pages/parts/player/PlayerPart.tsx
+++ b/src/pages/parts/player/PlayerPart.tsx
@@ -1,7 +1,10 @@
import { ReactNode } from "react";
+import { useParams } from "react-router-dom";
+import { Icon, Icons } from "@/components/Icon";
import { BrandPill } from "@/components/layout/BrandPill";
import { Player } from "@/components/player";
+import { usePlayerMeta } from "@/components/player/hooks/usePlayerMeta";
import { useShouldShowControls } from "@/components/player/hooks/useShouldShowControls";
import { useIsMobile } from "@/hooks/useIsMobile";
import { PlayerMeta, playerStatus } from "@/stores/player/slices/source";
@@ -15,10 +18,17 @@ export interface PlayerPartProps {
}
export function PlayerPart(props: PlayerPartProps) {
+ const params = useParams<{
+ media: string;
+ episode?: string;
+ season?: string;
+ }>();
+ const media = params.media;
const { showTargets, showTouchTargets } = useShouldShowControls();
const status = usePlayerStore((s) => s.status);
const { isMobile } = useIsMobile();
const isLoading = usePlayerStore((s) => s.mediaPlaying.isLoading);
+ const { playerMeta: meta } = usePlayerMeta();
return (
@@ -60,6 +70,30 @@ export function PlayerPart(props: PlayerPartProps) {
/
+
+
+
diff --git a/src/pages/parts/settings/ThemePart.tsx b/src/pages/parts/settings/ThemePart.tsx
index 5a5094820..1b7b489dc 100644
--- a/src/pages/parts/settings/ThemePart.tsx
+++ b/src/pages/parts/settings/ThemePart.tsx
@@ -31,9 +31,9 @@ const availableThemes = [
key: "settings.appearance.themes.gray",
},
{
- id: "blck",
- selector: "theme-blck",
- key: "settings.appearance.themes.blck",
+ id: "classic",
+ selector: "theme-classic",
+ key: "settings.appearance.themes.classic",
},
];
diff --git a/src/setup/constants.ts b/src/setup/constants.ts
index 9ba35a7f0..48cadb3ee 100644
--- a/src/setup/constants.ts
+++ b/src/setup/constants.ts
@@ -1,5 +1,5 @@
export const APP_VERSION = import.meta.env.PACKAGE_VERSION;
-export const DISCORD_LINK = "https://docs.undi.rest/links/discord";
+export const DISCORD_LINK = "https://discord.gg/7z6znYgrTG";
export const GITHUB_LINK = "https://github.com/sussy-code/smov";
export const TWITTER_LINK = "https://twitter.com/SudoFlix";
export const GA_ID = import.meta.env.VITE_GA_ID;
diff --git a/src/utils/setup/constants.ts b/src/utils/setup/constants.ts
index 2885bafdc..72cbdca00 100644
--- a/src/utils/setup/constants.ts
+++ b/src/utils/setup/constants.ts
@@ -1,5 +1,5 @@
export const APP_VERSION = import.meta.env.PACKAGE_VERSION;
-export const DISCORD_LINK = "https://docs.undi.rest/links/discord";
+export const DISCORD_LINK = "https://discord.gg/7z6znYgrTG";
export const GITHUB_LINK = "https://github.com/sussy-code/smov";
export const GA_ID = import.meta.env.VITE_GA_ID;
export const BACKEND_URL = import.meta.env.VITE_BACKEND_URL;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0732fcaeb..6e1c4a38e 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -12,6 +12,9 @@ const config: Config = {
/* breakpoints */
screens: {
ssm: "400px",
+ '2xl': '1921px', // Custom breakpoint for screens at least 1920px wide
+ '3xl': '2650px', // Custom breakpoint for screens at least 2650px wide
+ '4xl': '3840px', // Custom breakpoint for screens at least 4096px wide
},
/* fonts */
diff --git a/themes/all.ts b/themes/all.ts
index 715597af1..abf81d52b 100644
--- a/themes/all.ts
+++ b/themes/all.ts
@@ -2,12 +2,12 @@ import teal from "./list/teal";
import blue from "./list/blue";
import red from "./list/red";
import gray from "./list/gray";
-import blck from "./list/blck";
+import classic from "./list/classic";
export const allThemes = [
teal,
blue,
gray,
red,
- blck
+ classic
]
diff --git a/themes/default.ts b/themes/default.ts
index d72667660..7ae3c097a 100644
--- a/themes/default.ts
+++ b/themes/default.ts
@@ -1,86 +1,95 @@
const tokens = {
- black: "#000000",
- white: "#FFFFFF",
+ black: {
+ c50: "#000000",
+ c75: "#030303",
+ c80: "#080808",
+ c100: "#0d0d0d",
+ c125: "#141414",
+ c150: "#1a1a1a",
+ c200: "#262626",
+ c250: "#333333"
+ },
+ white: "#FFFFFF", // General white color
semantic: {
red: {
- c100: "#F46E6E",
- c200: "#E44F4F",
- c300: "#D74747",
- c400: "#B43434",
+ c100: "#F46E6E", // Error text
+ c200: "#E44F4F", // Video player scraping error
+ c300: "#D74747", // Danger button
+ c400: "#B43434", // Not currently used
},
green: {
- c100: "#60D26A",
- c200: "#40B44B",
- c300: "#31A33C",
- c400: "#237A2B",
+ c100: "#60D26A", // Success text
+ c200: "#40B44B", // Video player scraping success
+ c300: "#31A33C", // Not currently used
+ c400: "#237A2B", // Not currently used
},
silver: {
- c100: "#DEDEDE",
- c200: "#B6CAD7",
- c300: "#8EA3B0",
- c400: "#617A8A",
+ c100: "#DEDEDE", // Primary button hover
+ c200: "#B6CAD7", // Not currently used
+ c300: "#8EA3B0", // Secondary button text
+ c400: "#617A8A", // Main text in video player context
},
yellow: {
- c100: "#FFF599",
- c200: "#FCEC61",
- c300: "#D8C947",
- c400: "#AFA349",
+ c100: "#FFF599", // Best onboarding highlight
+ c200: "#FCEC61", // Dropdown highlight hover
+ c300: "#D8C947", // Not currently used
+ c400: "#AFA349", // Dropdown highlight
},
rose: {
- c100: "#DB3D61",
- c200: "#8A293B",
- c300: "#812435",
- c400: "#701B2B",
+ c100: "#DB3D61", // Authentication error text
+ c200: "#8A293B", // Danger button hover
+ c300: "#812435", // Danger button
+ c400: "#701B2B", // Not currently used
},
},
blue: {
- c50: "#ADADF5",
- c100: "#7979CC",
- c200: "#5D5DAE",
- c300: "#3B3B8C",
- c400: "#2A2A71",
- c500: "#1F1F50",
- c600: "#1B1B41",
- c700: "#171736",
- c800: "#101020",
- c900: "#0B0B13",
+ c50: "#ccccd6",
+ c100: "#a2a2a2",
+ c200: "#868686",
+ c300: "#646464",
+ c400: "#4e4e4e",
+ c500: "#383838",
+ c600: "#2e2e2e",
+ c700: "#272727",
+ c800: "#181818",
+ c900: "#0f0f0f"
},
purple: {
- c50: "#D5AAFF",
- c100: "#C082FF",
- c200: "#A359EC",
- c300: "#8D44D6",
- c400: "#7831BF",
- c500: "#572887",
- c600: "#411F64",
- c700: "#31184A",
- c800: "#221134",
- c900: "#160B22",
+ c50: "#aaafff",
+ c100: "#8288fe",
+ c200: "#5a62eb",
+ c300: "#454cd4",
+ c400: "#333abe",
+ c500: "#292d86",
+ c600: "#1f2363",
+ c700: "#191b4a",
+ c800: "#111334", // Lightbar
+ c900: "#0b0d22"
},
ash: {
- c50: "#7F8D9B",
- c100: "#5B6B7B",
- c200: "#445464",
- c300: "#2B3D4E",
- c400: "#203242",
- c500: "#1C2C3C",
- c600: "#172532",
- c700: "#131E29",
- c800: "#101820",
- c900: "#0C1216",
+ c50: "#8d8d8d",
+ c100: "#6b6b6b",
+ c200: "#545454",
+ c300: "#3c3c3c",
+ c400: "#313131",
+ c500: "#2c2c2c",
+ c600: "#252525",
+ c700: "#1e1e1e",
+ c800: "#181818",
+ c900: "#111111"
},
shade: {
- c25: "#5d5db3",
- c50: "#676790",
- c100: "#52527A",
- c200: "#3F3F60",
- c300: "#32324F",
- c400: "#272741",
- c500: "#1E1E32",
- c600: "#171728",
- c700: "#131322",
- c800: "#0F0F1B",
- c900: "#0A0A12",
+ c25: "#939393", // Media card hover accent
+ c50: "#7c7c7c",
+ c100: "#666666",
+ c200: "#4f4f4f",
+ c300: "#404040",
+ c400: "#343434",
+ c500: "#282828",
+ c600: "#202020",
+ c700: "#1a1a1a",
+ c800: "#151515",
+ c900: "#0e0e0e"
},
};
@@ -88,18 +97,17 @@ export const defaultTheme = {
extend: {
colors: {
themePreview: {
- primary: tokens.blue.c200,
- secondary: tokens.shade.c50,
+ primary: tokens.black.c80,
+ secondary: tokens.black.c100,
ghost: tokens.white,
},
// Branding
pill: {
- background: tokens.shade.c300,
- backgroundHover: tokens.shade.c200,
+ background: tokens.black.c100,
+ backgroundHover: tokens.black.c125,
highlight: tokens.blue.c200,
-
- activeBackground: tokens.shade.c300,
+ activeBackground: tokens.shade.c700,
},
// meta data for the theme itself
@@ -110,35 +118,35 @@ export const defaultTheme = {
// light bar
lightBar: {
- light: tokens.blue.c400,
+ light: tokens.purple.c800,
},
// Buttons
buttons: {
toggle: tokens.purple.c300,
- toggleDisabled: tokens.ash.c500,
+ toggleDisabled: tokens.black.c200,
danger: tokens.semantic.rose.c300,
dangerHover: tokens.semantic.rose.c200,
- secondary: tokens.ash.c700,
+ secondary: tokens.black.c100,
secondaryText: tokens.semantic.silver.c300,
- secondaryHover: tokens.ash.c700,
+ secondaryHover: tokens.black.c150,
primary: tokens.white,
- primaryText: tokens.black,
+ primaryText: tokens.black.c50,
primaryHover: tokens.semantic.silver.c100,
- purple: tokens.purple.c500,
+ purple: tokens.purple.c600,
purpleHover: tokens.purple.c400,
- cancel: tokens.ash.c500,
- cancelHover: tokens.ash.c300,
+ cancel: tokens.black.c100,
+ cancelHover: tokens.black.c150
},
// only used for body colors/textures
background: {
- main: tokens.shade.c900,
- secondary: tokens.shade.c600,
- secondaryHover: tokens.shade.c400,
- accentA: tokens.purple.c500,
- accentB: tokens.blue.c500,
+ main: tokens.black.c75,
+ secondary: tokens.black.c75,
+ secondaryHover: tokens.black.c75,
+ accentA: tokens.purple.c600,
+ accentB: tokens.black.c100
},
// Modals
@@ -157,55 +165,55 @@ export const defaultTheme = {
danger: tokens.semantic.red.c100,
success: tokens.semantic.green.c100,
link: tokens.purple.c100,
- linkHover: tokens.purple.c50,
+ linkHover: tokens.purple.c50
},
// search bar
search: {
- background: tokens.shade.c500,
- hoverBackground: tokens.shade.c600,
- focused: tokens.shade.c400,
- placeholder: tokens.shade.c100,
- icon: tokens.shade.c100,
+ background: tokens.black.c100,
+ hoverBackground: tokens.shade.c900,
+ focused: tokens.black.c125,
+ placeholder: tokens.shade.c200,
+ icon: tokens.shade.c500,
text: tokens.white,
},
// media cards
mediaCard: {
- hoverBackground: tokens.shade.c600,
- hoverAccent: tokens.shade.c25,
- hoverShadow: tokens.shade.c900,
- shadow: tokens.shade.c700,
+ hoverBackground: tokens.shade.c900,
+ hoverAccent: tokens.black.c250,
+ hoverShadow: tokens.black.c50,
+ shadow: tokens.shade.c800,
barColor: tokens.ash.c200,
barFillColor: tokens.purple.c100,
badge: tokens.shade.c700,
- badgeText: tokens.ash.c100,
+ badgeText: tokens.ash.c100
},
// Large card
largeCard: {
- background: tokens.shade.c600,
+ background: tokens.black.c100,
icon: tokens.purple.c400,
},
// Dropdown
dropdown: {
- background: tokens.shade.c600,
- altBackground: tokens.shade.c700,
- hoverBackground: tokens.shade.c500,
+ background: tokens.black.c100,
+ altBackground: tokens.black.c80,
+ hoverBackground: tokens.black.c150,
highlight: tokens.semantic.yellow.c400,
highlightHover: tokens.semantic.yellow.c200,
text: tokens.shade.c50,
secondary: tokens.shade.c100,
border: tokens.shade.c400,
- contentBackground: tokens.shade.c500,
+ contentBackground: tokens.black.c50
},
// Passphrase
authentication: {
border: tokens.shade.c300,
- inputBg: tokens.shade.c600,
- inputBgHover: tokens.shade.c500,
+ inputBg: tokens.black.c100,
+ inputBgHover: tokens.black.c150,
wordBackground: tokens.shade.c500,
copyText: tokens.shade.c100,
copyTextHover: tokens.ash.c50,
@@ -215,32 +223,32 @@ export const defaultTheme = {
// Settings page
settings: {
sidebar: {
- activeLink: tokens.shade.c600,
+ activeLink: tokens.black.c100,
badge: tokens.shade.c900,
type: {
secondary: tokens.shade.c200,
inactive: tokens.shade.c50,
- icon: tokens.shade.c50,
+ icon: tokens.black.c200,
iconActivated: tokens.purple.c200,
- activated: tokens.purple.c50,
+ activated: tokens.purple.c100
},
},
card: {
- border: tokens.shade.c400,
- background: tokens.shade.c400,
- altBackground: tokens.shade.c400,
+ border: tokens.shade.c700,
+ background: tokens.black.c100,
+ altBackground: tokens.black.c100
},
saveBar: {
- background: tokens.shade.c800,
+ background: tokens.black.c50
},
},
// Utilities
utils: {
- divider: tokens.ash.c300,
+ divider: tokens.ash.c300
},
// Onboarding
@@ -258,7 +266,7 @@ export const defaultTheme = {
// Error page
errors: {
- card: tokens.shade.c800,
+ card: tokens.black.c75,
border: tokens.ash.c500,
type: {
@@ -268,15 +276,15 @@ export const defaultTheme = {
// About page
about: {
- circle: tokens.ash.c500,
- circleText: tokens.ash.c50,
+ circle: tokens.black.c100,
+ circleText: tokens.ash.c50
},
// About page
editBadge: {
bg: tokens.ash.c500,
bgHover: tokens.ash.c400,
- text: tokens.ash.c50,
+ text: tokens.ash.c50
},
progress: {
@@ -287,19 +295,19 @@ export const defaultTheme = {
// video player
video: {
- buttonBackground: tokens.ash.c200,
+ buttonBackground: tokens.ash.c600,
autoPlay: {
- background: tokens.ash.c700,
- hover: tokens.ash.c500,
+ background: tokens.ash.c800,
+ hover: tokens.ash.c600,
},
scraping: {
- card: tokens.shade.c700,
+ card: tokens.black.c50,
error: tokens.semantic.red.c200,
success: tokens.semantic.green.c200,
loading: tokens.purple.c200,
- noresult: tokens.ash.c100,
+ noresult: tokens.black.c200
},
audio: {
@@ -307,17 +315,17 @@ export const defaultTheme = {
},
context: {
- background: tokens.ash.c900,
+ background: tokens.black.c50,
light: tokens.shade.c50,
border: tokens.ash.c600,
hoverColor: tokens.ash.c600,
buttonFocus: tokens.ash.c500,
flagBg: tokens.ash.c500,
- inputBg: tokens.ash.c600,
+ inputBg: tokens.black.c100,
buttonOverInputHover: tokens.ash.c500,
inputPlaceholder: tokens.ash.c200,
cardBorder: tokens.ash.c700,
- slider: tokens.ash.c50,
+ slider: tokens.black.c200,
sliderFilled: tokens.purple.c200,
error: tokens.semantic.red.c200,
@@ -329,7 +337,7 @@ export const defaultTheme = {
closeHover: tokens.ash.c800,
type: {
- main: tokens.semantic.silver.c400,
+ main: tokens.semantic.silver.c300,
secondary: tokens.ash.c200,
accent: tokens.purple.c200,
},
diff --git a/themes/list/blck.ts b/themes/list/blck.ts
deleted file mode 100644
index 5b97973c5..000000000
--- a/themes/list/blck.ts
+++ /dev/null
@@ -1,277 +0,0 @@
-import { createTheme } from "../types";
-
-const tokens = {
- white: "#FFFFFF",
- black: {
- c50: "#000000",
- c75: "#030303",
- c80: "#080808",
- c100: "#0d0d0d",
- c125: "#141414",
- c150: "#1a1a1a",
- c200: "#262626",
- c250: "#333333"
- },
- semantic: {
- silver: {
- c100: "#DEDEDE",
- c200: "#B6CAD7",
- c300: "#8EA3B0",
- c400: "#617A8A",
- },
- },
- purple: {
- c50: "#aaafff",
- c100: "#8288fe",
- c200: "#5a62eb",
- c300: "#454cd4",
- c400: "#333abe",
- c500: "#292d86",
- c600: "#1f2363",
- c700: "#191b4a",
- c800: "#111334",
- c900: "#0b0d22"
- },
- shade: {
- c50: "#7c7c7c",
- c100: "#666666",
- c200: "#4f4f4f",
- c300: "#404040",
- c400: "#343434",
- c500: "#282828",
- c600: "#202020",
- c700: "#1a1a1a",
- c800: "#151515",
- c900: "#0e0e0e"
- },
- ash: {
- c50: "#8d8d8d",
- c100: "#6b6b6b",
- c200: "#545454",
- c300: "#3c3c3c",
- c400: "#313131",
- c500: "#2c2c2c",
- c600: "#252525",
- c700: "#1e1e1e",
- c800: "#181818",
- c900: "#111111"
- },
- blue: {
- c50: "#ccccd6",
- c100: "#a2a2a2",
- c200: "#868686",
- c300: "#646464",
- c400: "#4e4e4e",
- c500: "#383838",
- c600: "#2e2e2e",
- c700: "#272727",
- c800: "#181818",
- c900: "#0f0f0f"
- }
-}
-
-export default createTheme({
- name: "blck",
- extend: {
- colors: {
- themePreview: {
- primary: tokens.black.c80,
- secondary: tokens.black.c100
- },
-
- pill: {
- background: tokens.black.c100,
- backgroundHover: tokens.black.c125,
- highlight: tokens.blue.c200,
- activeBackground: tokens.shade.c700,
- },
-
- global: {
- accentA: tokens.blue.c200,
- accentB: tokens.blue.c300
- },
-
- lightBar: {
- light: tokens.shade.c900,
- },
-
- buttons: {
- toggle: tokens.purple.c300,
- toggleDisabled: tokens.black.c200,
- secondary: tokens.black.c100,
- secondaryHover: tokens.black.c150,
- purple: tokens.purple.c600,
- purpleHover: tokens.purple.c400,
- cancel: tokens.black.c100,
- cancelHover: tokens.black.c150
- },
-
- background: {
- main: tokens.black.c75,
- secondary: tokens.black.c75,
- secondaryHover: tokens.black.c75,
- accentA: tokens.purple.c600,
- accentB: tokens.black.c100
- },
-
- modal: {
- background: tokens.shade.c800,
- },
-
- type: {
- logo: tokens.purple.c100,
- text: tokens.shade.c50,
- dimmed: tokens.shade.c50,
- divider: tokens.ash.c500,
- secondary: tokens.ash.c100,
- link: tokens.purple.c100,
- linkHover: tokens.purple.c50
- },
-
- search: {
- background: tokens.black.c100,
- hoverBackground: tokens.shade.c900,
- focused: tokens.black.c125,
- placeholder: tokens.shade.c200,
- icon: tokens.shade.c500
- },
-
- mediaCard: {
- hoverBackground: tokens.shade.c900,
- hoverAccent: tokens.black.c250,
- hoverShadow: tokens.black.c50,
- shadow: tokens.shade.c800,
- barColor: tokens.ash.c200,
- barFillColor: tokens.purple.c100,
- badge: tokens.shade.c700,
- badgeText: tokens.ash.c100
- },
-
- largeCard: {
- background: tokens.black.c100,
- icon: tokens.purple.c400
- },
-
- dropdown: {
- background: tokens.black.c100,
- altBackground: tokens.black.c80,
- hoverBackground: tokens.black.c150,
- text: tokens.shade.c50,
- secondary: tokens.shade.c100,
- border: tokens.shade.c400,
- contentBackground: tokens.black.c50
- },
-
- authentication: {
- border: tokens.shade.c300,
- inputBg: tokens.black.c100,
- inputBgHover: tokens.black.c150,
- wordBackground: tokens.shade.c500,
- copyText: tokens.shade.c100,
- copyTextHover: tokens.ash.c50
- },
-
- settings: {
- sidebar: {
- activeLink: tokens.black.c100,
- badge: tokens.shade.c900,
-
- type: {
- secondary: tokens.shade.c200,
- inactive: tokens.shade.c50,
- icon: tokens.black.c200,
- iconActivated: tokens.purple.c200,
- activated: tokens.purple.c100
- }
- },
-
- card: {
- border: tokens.shade.c700,
- background: tokens.black.c100,
- altBackground: tokens.black.c100
- },
-
- saveBar: {
- background: tokens.black.c50
- }
- },
-
- utils: {
- divider: tokens.ash.c300
- },
-
- errors: {
- card: tokens.black.c75,
- border: tokens.ash.c500,
-
- type: {
- secondary: tokens.ash.c100
- }
- },
-
- about: {
- circle: tokens.black.c100,
- circleText: tokens.ash.c50
- },
-
- editBadge: {
- bg: tokens.ash.c500,
- bgHover: tokens.ash.c400,
- text: tokens.ash.c50
- },
-
- progress: {
- background: tokens.ash.c50,
- preloaded: tokens.ash.c50,
- filled: tokens.purple.c200
- },
-
- video: {
- buttonBackground: tokens.ash.c600,
-
- autoPlay: {
- background: tokens.ash.c800,
- hover: tokens.ash.c600
- },
-
- scraping: {
- card: tokens.black.c50,
- loading: tokens.purple.c200,
- noresult: tokens.black.c200
- },
-
- audio: {
- set: tokens.purple.c200
- },
-
- context: {
- background: tokens.black.c50,
- light: tokens.shade.c50,
- border: tokens.ash.c600,
- hoverColor: tokens.ash.c600,
- buttonFocus: tokens.ash.c500,
- flagBg: tokens.ash.c500,
- inputBg: tokens.black.c100,
- buttonOverInputHover: tokens.ash.c500,
- inputPlaceholder: tokens.ash.c200,
- cardBorder: tokens.ash.c700,
- slider: tokens.black.c200,
- sliderFilled: tokens.purple.c200,
-
- buttons: {
- list: tokens.ash.c700,
- active: tokens.ash.c900
- },
-
- closeHover: tokens.ash.c800,
-
- type: {
- secondary: tokens.ash.c200,
- accent: tokens.purple.c200,
- main: tokens.semantic.silver.c300
- }
- }
- }
- }
- }
-});
diff --git a/themes/list/classic.ts b/themes/list/classic.ts
new file mode 100644
index 000000000..aa370ce47
--- /dev/null
+++ b/themes/list/classic.ts
@@ -0,0 +1,343 @@
+import { createTheme } from "../types";
+
+const tokens = {
+ black: "#000000", // General black color
+ white: "#FFFFFF", // General white color
+ semantic: {
+ red: {
+ c100: "#F46E6E", // Error text
+ c200: "#E44F4F", // Video player scraping error
+ c300: "#D74747", // Danger button
+ c400: "#B43434", // Not currently used
+ },
+ green: {
+ c100: "#60D26A", // Success text
+ c200: "#40B44B", // Video player scraping success
+ c300: "#31A33C", // Not currently used
+ c400: "#237A2B", // Not currently used
+ },
+ silver: {
+ c100: "#DEDEDE", // Primary button hover
+ c200: "#B6CAD7", // Not currently used
+ c300: "#8EA3B0", // Secondary button text
+ c400: "#617A8A", // Main text in video player context
+ },
+ yellow: {
+ c100: "#FFF599", // Best onboarding highlight
+ c200: "#FCEC61", // Dropdown highlight hover
+ c300: "#D8C947", // Not currently used
+ c400: "#AFA349", // Dropdown highlight
+ },
+ rose: {
+ c100: "#DB3D61", // Authentication error text
+ c200: "#8A293B", // Danger button hover
+ c300: "#812435", // Danger button
+ c400: "#701B2B", // Not currently used
+ },
+ },
+ blue: {
+ c50: "#ADADF5", // Not currently used
+ c100: "#7979CC", // Not currently used
+ c200: "#5D5DAE", // Theme primary color, pill highlight, global accent A
+ c300: "#3B3B8C", // Global accent B
+ c400: "#2A2A71", // Light bar color
+ c500: "#1F1F50", // Background accent B
+ c600: "#1B1B41", // Not currently used
+ c700: "#171736", // Not currently used
+ c800: "#101020", // Not currently used
+ c900: "#0B0B13", // Not currently used
+ },
+ purple: {
+ c50: "#D5AAFF", // Link hover, settings tabs titles/text
+ c100: "#C082FF", // Link, logo text, video player audio set
+ c200: "#A359EC", // Progress filled, video player scraping loading, video player context accent
+ c300: "#8D44D6", // Toggle button, onboarding bar filled
+ c400: "#7831BF", // Large card icon
+ c500: "#572887", // Background accent A
+ c600: "#411F64", // Not currently used
+ c700: "#31184A", // Not currently used
+ c800: "#221134", // Not currently used
+ c900: "#160B22", // Not currently used
+ },
+ ash: {
+ c50: "#7F8D9B", // Authentication copy text hover, progress background, progress preloaded
+ c100: "#5B6B7B", // Secondary text, badge text, video player scraping no result
+ c200: "#445464", // Media card bar color, video player button background
+ c300: "#2B3D4E", // Cancel button hover, utils divider
+ c400: "#203242", // Card border and background, dropdown border, onboarding bar, edit badge hover, sidebar type
+ c500: "#1C2C3C", // Toggle disabled, cancel button, modal background, search hover background, media card shadow, settings save bar, errors card, about circle, edit badge background, video player button focus, video player flag background, video player input background, video player button over input hover
+ c600: "#172532", // Background secondary, dropdown alt background, dropdown border, onboarding card border
+ c700: "#131E29", // Secondary button, media card badge, onboarding card hover, video player context card border, video player context buttons list, video player close hover
+ c800: "#101820", // Background main, settings sidebar badge, errors border
+ c900: "#0C1216", // Media card hover shadow, settings sidebar active link, video player context background
+ },
+ shade: {
+ c25: "#5d5db3", // Media card hover accent
+ c50: "#676790", // Theme secondary color, text, dimmed text
+ c100: "#52527A", // Search placeholder and icon, dropdown secondary text
+ c200: "#3F3F60", // Pill background hover, onboarding divider
+ c300: "#32324F", // Pill background, authentication border, onboarding card
+ c400: "#272741", // Background secondary hover, dropdown border, onboarding bar, onboarding divider
+ c500: "#1E1E32", // Search background, search focus, dropdown hover background, dropdown content background, authentication input background hover, authentication word background
+ c600: "#171728", // Modal background, dropdown background, onboarding card border
+ c700: "#131322", // Dropdown alt background
+ c800: "#0F0F1B", // Background main, settings save bar, onboarding card
+ c900: "#0A0A12", // Media card hover shadow
+ },
+}
+
+export default createTheme({
+ name: "classic",
+ extend: {
+ colors: {
+ themePreview: {
+ primary: tokens.blue.c200,
+ secondary: tokens.shade.c50,
+ ghost: tokens.white,
+ },
+
+ // Branding
+ pill: {
+ background: tokens.shade.c300,
+ backgroundHover: tokens.shade.c200,
+ highlight: tokens.blue.c200,
+
+ activeBackground: tokens.shade.c300,
+ },
+
+ // meta data for the theme itself
+ global: {
+ accentA: tokens.blue.c200,
+ accentB: tokens.blue.c300,
+ },
+
+ // light bar
+ lightBar: {
+ light: tokens.blue.c400,
+ },
+
+ // Buttons
+ buttons: {
+ toggle: tokens.purple.c300,
+ toggleDisabled: tokens.ash.c500,
+ danger: tokens.semantic.rose.c300,
+ dangerHover: tokens.semantic.rose.c200,
+
+ secondary: tokens.ash.c700,
+ secondaryText: tokens.semantic.silver.c300,
+ secondaryHover: tokens.ash.c700,
+ primary: tokens.white,
+ primaryText: tokens.black,
+ primaryHover: tokens.semantic.silver.c100,
+ purple: tokens.purple.c500,
+ purpleHover: tokens.purple.c400,
+ cancel: tokens.ash.c500,
+ cancelHover: tokens.ash.c300,
+ },
+
+ // only used for body colors/textures
+ background: {
+ main: tokens.shade.c900,
+ secondary: tokens.shade.c600,
+ secondaryHover: tokens.shade.c400,
+ accentA: tokens.purple.c500,
+ accentB: tokens.blue.c500,
+ },
+
+ // Modals
+ modal: {
+ background: tokens.shade.c800,
+ },
+
+ // typography
+ type: {
+ logo: tokens.purple.c100,
+ emphasis: tokens.white,
+ text: tokens.shade.c50,
+ dimmed: tokens.shade.c50,
+ divider: tokens.ash.c500,
+ secondary: tokens.ash.c100,
+ danger: tokens.semantic.red.c100,
+ success: tokens.semantic.green.c100,
+ link: tokens.purple.c100,
+ linkHover: tokens.purple.c50,
+ },
+
+ // search bar
+ search: {
+ background: tokens.shade.c500,
+ hoverBackground: tokens.shade.c600,
+ focused: tokens.shade.c400,
+ placeholder: tokens.shade.c100,
+ icon: tokens.shade.c100,
+ text: tokens.white,
+ },
+
+ // media cards
+ mediaCard: {
+ hoverBackground: tokens.shade.c600,
+ hoverAccent: tokens.shade.c25,
+ hoverShadow: tokens.shade.c900,
+ shadow: tokens.shade.c700,
+ barColor: tokens.ash.c200,
+ barFillColor: tokens.purple.c100,
+ badge: tokens.shade.c700,
+ badgeText: tokens.ash.c100,
+ },
+
+ // Large card
+ largeCard: {
+ background: tokens.shade.c600,
+ icon: tokens.purple.c400,
+ },
+
+ // Dropdown
+ dropdown: {
+ background: tokens.shade.c600,
+ altBackground: tokens.shade.c700,
+ hoverBackground: tokens.shade.c500,
+ highlight: tokens.semantic.yellow.c400,
+ highlightHover: tokens.semantic.yellow.c200,
+ text: tokens.shade.c50,
+ secondary: tokens.shade.c100,
+ border: tokens.shade.c400,
+ contentBackground: tokens.shade.c500,
+ },
+
+ // Passphrase
+ authentication: {
+ border: tokens.shade.c300,
+ inputBg: tokens.shade.c600,
+ inputBgHover: tokens.shade.c500,
+ wordBackground: tokens.shade.c500,
+ copyText: tokens.shade.c100,
+ copyTextHover: tokens.ash.c50,
+ errorText: tokens.semantic.rose.c100,
+ },
+
+ // Settings page
+ settings: {
+ sidebar: {
+ activeLink: tokens.shade.c600,
+ badge: tokens.shade.c900,
+
+ type: {
+ secondary: tokens.shade.c200,
+ inactive: tokens.shade.c50,
+ icon: tokens.shade.c50,
+ iconActivated: tokens.purple.c200,
+ activated: tokens.purple.c50,
+ },
+ },
+
+ card: {
+ border: tokens.shade.c400,
+ background: tokens.shade.c400,
+ altBackground: tokens.shade.c400,
+ },
+
+ saveBar: {
+ background: tokens.shade.c800,
+ },
+ },
+
+ // Utilities
+ utils: {
+ divider: tokens.ash.c300,
+ },
+
+ // Onboarding
+ onboarding: {
+ bar: tokens.shade.c400,
+ barFilled: tokens.purple.c300,
+ divider: tokens.shade.c200,
+ card: tokens.shade.c800,
+ cardHover: tokens.shade.c700,
+ border: tokens.shade.c600,
+ good: tokens.purple.c100,
+ best: tokens.semantic.yellow.c100,
+ link: tokens.purple.c100,
+ },
+
+ // Error page
+ errors: {
+ card: tokens.shade.c800,
+ border: tokens.ash.c500,
+
+ type: {
+ secondary: tokens.ash.c100,
+ },
+ },
+
+ // About page
+ about: {
+ circle: tokens.ash.c500,
+ circleText: tokens.ash.c50,
+ },
+
+ // About page
+ editBadge: {
+ bg: tokens.ash.c500,
+ bgHover: tokens.ash.c400,
+ text: tokens.ash.c50,
+ },
+
+ progress: {
+ background: tokens.ash.c50,
+ preloaded: tokens.ash.c50,
+ filled: tokens.purple.c200,
+ },
+
+ // video player
+ video: {
+ buttonBackground: tokens.ash.c200,
+
+ autoPlay: {
+ background: tokens.ash.c700,
+ hover: tokens.ash.c500,
+ },
+
+ scraping: {
+ card: tokens.shade.c700,
+ error: tokens.semantic.red.c200,
+ success: tokens.semantic.green.c200,
+ loading: tokens.purple.c200,
+ noresult: tokens.ash.c100,
+ },
+
+ audio: {
+ set: tokens.purple.c200,
+ },
+
+ context: {
+ background: tokens.ash.c900,
+ light: tokens.shade.c50,
+ border: tokens.ash.c600,
+ hoverColor: tokens.ash.c600,
+ buttonFocus: tokens.ash.c500,
+ flagBg: tokens.ash.c500,
+ inputBg: tokens.ash.c600,
+ buttonOverInputHover: tokens.ash.c500,
+ inputPlaceholder: tokens.ash.c200,
+ cardBorder: tokens.ash.c700,
+ slider: tokens.ash.c50,
+ sliderFilled: tokens.purple.c200,
+ error: tokens.semantic.red.c200,
+
+ buttons: {
+ list: tokens.ash.c700,
+ active: tokens.ash.c900,
+ },
+
+ closeHover: tokens.ash.c800,
+
+ type: {
+ main: tokens.semantic.silver.c400,
+ secondary: tokens.ash.c200,
+ accent: tokens.purple.c200,
+ },
+ },
+ },
+ },
+ },
+})
diff --git a/vite.config.mts b/vite.config.mts
index 8e4074f83..6b0f5ee70 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -70,8 +70,8 @@ export default defineConfig(({ mode }) => {
name: "sudo-flix",
short_name: "sudo-flix",
description: "Watch your favorite shows and movies for free with no ads ever! (っ'ヮ'c)",
- theme_color: "#120f1d",
- background_color: "#120f1d",
+ theme_color: "#000000",
+ background_color: "#000000",
display: "standalone",
start_url: "/",
icons: [
From 442f865196ef0d6acce19820db0f57e6b2115621 Mon Sep 17 00:00:00 2001
From: Ivan Evans <74743263+Pasithea0@users.noreply.github.com>
Date: Fri, 9 Aug 2024 23:49:37 -0600
Subject: [PATCH 2/3] Name conversion
---
index.html | 4 +-
manifest.json | 4 +-
package.json | 2 +-
src/assets/locales/ar.json | 1030 ++++++++++---------
src/assets/locales/bg.json | 666 ++++++-------
src/assets/locales/ca.json | 1052 ++++++++++----------
src/assets/locales/ca@valencia.json | 1052 ++++++++++----------
src/assets/locales/cs.json | 28 +-
src/assets/locales/da.json | 52 +-
src/assets/locales/de.json | 30 +-
src/assets/locales/el.json | 24 +-
src/assets/locales/en.json | 58 +-
src/assets/locales/es.json | 1056 ++++++++++----------
src/assets/locales/et.json | 1072 ++++++++++----------
src/assets/locales/fa.json | 1072 ++++++++++----------
src/assets/locales/fi-FI.json | 14 +-
src/assets/locales/fr.json | 34 +-
src/assets/locales/gl.json | 1056 ++++++++++----------
src/assets/locales/gu.json | 6 +-
src/assets/locales/he.json | 1034 ++++++++++---------
src/assets/locales/id.json | 22 +-
src/assets/locales/is-IS.json | 1050 ++++++++++---------
src/assets/locales/it.json | 56 +-
src/assets/locales/ja.json | 8 +-
src/assets/locales/km.json | 6 +-
src/assets/locales/ko.json | 1052 ++++++++++----------
src/assets/locales/lv.json | 8 +-
src/assets/locales/ne.json | 1072 ++++++++++----------
src/assets/locales/nl.json | 30 +-
src/assets/locales/nv.json | 2 +-
src/assets/locales/pa.json | 1050 ++++++++++---------
src/assets/locales/pirate.json | 34 +-
src/assets/locales/pl.json | 1056 ++++++++++----------
src/assets/locales/pt-BR.json | 1072 ++++++++++----------
src/assets/locales/pt-PT.json | 814 ++++++++-------
src/assets/locales/ro.json | 28 +-
src/assets/locales/ru.json | 1216 +++++++++++------------
src/assets/locales/sl.json | 1074 ++++++++++----------
src/assets/locales/sv.json | 18 +-
src/assets/locales/ta.json | 8 +-
src/assets/locales/th.json | 20 +-
src/assets/locales/tok.json | 2 +-
src/assets/locales/tr.json | 1072 ++++++++++----------
src/assets/locales/uk.json | 1056 ++++++++++----------
src/assets/locales/uwu.json | 1180 +++++++++++-----------
src/assets/locales/vi.json | 22 +-
src/assets/locales/zh-Hant.json | 1074 ++++++++++----------
src/assets/locales/zh.json | 1070 ++++++++++----------
src/assets/templates/opensearch.xml.hbs | 2 +-
src/pages/Support.tsx | 2 +-
src/pages/admin/AdminPage.tsx | 2 +-
src/setup/constants.ts | 2 +-
src/stores/turnstile/index.tsx | 2 +-
vite.config.mts | 4 +-
54 files changed, 12210 insertions(+), 12322 deletions(-)
diff --git a/index.html b/index.html
index b497e9ece..c13e90f9f 100644
--- a/index.html
+++ b/index.html
@@ -138,11 +138,11 @@
-
sudo-flix
+ EnvyFlix
{{#if opensearchEnabled }}
-
+