SyncView/types.ts at main · Dreamstore2046/SyncView · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
export interface VideoFile {
  id: string;
  file: File;
  url: string;
  name: string;
  duration?: number;
}

export enum ViewMode {
  GRID = 'GRID',
  COMPARE = 'COMPARE',
}

export interface VideoSyncContextType {
  isPlaying: boolean;
  currentTime: number;
  duration: number;
  togglePlay: () => void;
  seek: (time: number) => void;
  registerVideo: (id: string, element: HTMLVideoElement | null) => void;
  onDurationChange: (duration: number) => void;
  onTimeUpdate: (time: number) => void;
  playbackRate: number;
  setPlaybackRate: (rate: number) => void;
}

export type ThemeKey = 'SLATE' | 'ELEGANT';

export interface ThemeClasses {
  bg: string;
  text: string;
  textSecondary: string;
  textMuted: string;
  header: string;
  sidebar: string;
  border: string;
  card: string;
  cardHover: string;
  buttonPrimary: string;
  buttonSecondary: string;
  controlBar: string;
  controlBarBorder: string;
  input: string;
  select: string;
  activeTab: string;
  inactiveTab: string;
  iconBg: string;
  accentColor: string;
  sliderTrack: string;
  sliderThumb: string;
}

export const THEME_CONFIGS: Record<ThemeKey, { name: string; classes: ThemeClasses }> = {
  SLATE: {
    name: 'Cyber Slate',
    classes: {
      bg: 'bg-slate-950',
      text: 'text-slate-200',
      textSecondary: 'text-slate-400',
      textMuted: 'text-slate-500',
      header: 'bg-slate-900/50 backdrop-blur-md',
      sidebar: 'bg-slate-900',
      border: 'border-slate-800',
      card: 'bg-slate-800/50',
      cardHover: 'hover:bg-slate-800 hover:border-slate-700',
      buttonPrimary: 'bg-indigo-600 hover:bg-indigo-500 text-white',
      buttonSecondary: 'bg-slate-800 hover:bg-slate-700 text-slate-300',
      controlBar: 'bg-slate-900',
      controlBarBorder: 'border-slate-700',
      input: 'bg-slate-800 text-slate-200 focus:ring-indigo-500',
      select: 'bg-slate-800 text-slate-200 focus:ring-indigo-500',
      activeTab: 'bg-slate-600 text-white shadow-sm',
      inactiveTab: 'text-slate-400 hover:text-slate-200',
      iconBg: 'bg-indigo-600 shadow-indigo-500/20',
      accentColor: 'text-indigo-400',
      sliderTrack: 'bg-slate-700',
      sliderThumb: 'bg-white',
    }
  },
  ELEGANT: {
    name: 'Elegant Gray',
    classes: {
      bg: 'bg-[#f5f5f7]',
      text: 'text-neutral-800',
      textSecondary: 'text-neutral-500',
      textMuted: 'text-neutral-400',
      header: 'bg-white/80 backdrop-blur-md',
      sidebar: 'bg-white',
      border: 'border-neutral-200',
      card: 'bg-neutral-100',
      cardHover: 'hover:bg-neutral-200 hover:border-neutral-300',
      buttonPrimary: 'bg-neutral-900 hover:bg-neutral-700 text-white',
      buttonSecondary: 'bg-neutral-200 hover:bg-neutral-300 text-neutral-700',
      controlBar: 'bg-white',
      controlBarBorder: 'border-neutral-200',
      input: 'bg-neutral-200 text-neutral-800 focus:ring-neutral-400',
      select: 'bg-neutral-100 text-neutral-800 border-neutral-200 focus:ring-neutral-400',
      activeTab: 'bg-neutral-800 text-white shadow-sm',
      inactiveTab: 'text-neutral-500 hover:text-neutral-800',
      iconBg: 'bg-neutral-900 shadow-xl',
      accentColor: 'text-neutral-500',
      sliderTrack: 'bg-neutral-300',
      sliderThumb: 'bg-neutral-900',
    }
  }
};