@ttt-productions/media-viewer 0.10.13 → 0.10.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +3 -3
  2. package/src/styles/media-viewer.css +30 -30
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttt-productions/media-viewer",
3
- "version": "0.10.13",
3
+ "version": "0.10.14",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/ttt-productions/ttt-packages.git",
@@ -33,8 +33,8 @@
33
33
  "prepublishOnly": "npm run clean && npm run build"
34
34
  },
35
35
  "dependencies": {
36
- "@ttt-productions/media-schemas": "^0.14.6",
37
- "@ttt-productions/ui-core": "^0.11.16"
36
+ "@ttt-productions/media-schemas": "^0.14.7",
37
+ "@ttt-productions/ui-core": "^0.11.17"
38
38
  },
39
39
  "peerDependencies": {
40
40
  "react": ">=19.0.0",
package/src/styles/media-viewer.css CHANGED
@@ -2,9 +2,9 @@
2
2
 
3
3
  /* Skeleton fallback (CSS-only, for environments without ui-core) */
4
4
  .mv-skeleton {
5
- background: hsl(var(--muted, 220 14% 96%));
5
+ background: hsl(var(--muted));
6
6
  animation: mv-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
7
- border-radius: var(--radius, 0.375rem);
7
+ border-radius: var(--radius);
8
8
  }
9
9
 
10
10
  @keyframes mv-pulse {
@@ -19,7 +19,7 @@
19
19
  justify-content: center;
20
20
  width: 100%;
21
21
  height: 100%;
22
- background: hsl(var(--destructive, 0 84% 60%) / 0.1);
22
+ background: hsl(var(--destructive) / 0.1);
23
23
  }
24
24
 
25
25
  .mv-error-fallback svg {
@@ -27,7 +27,7 @@
27
27
  height: 50%;
28
28
  max-width: 4rem;
29
29
  max-height: 4rem;
30
- color: hsl(var(--destructive, 0 84% 60%) / 0.8);
30
+ color: hsl(var(--destructive) / 0.8);
31
31
  }
32
32
 
33
33
  /* Empty fallback */
@@ -37,7 +37,7 @@
37
37
  justify-content: center;
38
38
  width: 100%;
39
39
  height: 100%;
40
- background: hsl(var(--muted, 220 14% 96%));
40
+ background: hsl(var(--muted));
41
41
  }
42
42
 
43
43
  /* Pending state: the URL is still being prepared. Same seat as the empty state,
@@ -48,7 +48,7 @@
48
48
  justify-content: center;
49
49
  width: 100%;
50
50
  height: 100%;
51
- background: hsl(var(--muted, 220 14% 96%));
51
+ background: hsl(var(--muted));
52
52
  }
53
53
 
54
54
  .mv-empty-fallback svg {
@@ -56,7 +56,7 @@
56
56
  height: 50%;
57
57
  max-width: 4rem;
58
58
  max-height: 4rem;
59
- color: hsl(var(--muted-foreground, 220 9% 46%));
59
+ color: hsl(var(--muted-foreground));
60
60
  }
61
61
 
62
62
  /* Avatar/circular empty fallback */
@@ -67,9 +67,9 @@
67
67
  width: 100%;
68
68
  height: 100%;
69
69
  border-radius: 50%;
70
- background: hsl(var(--muted, 220 14% 96%));
70
+ background: hsl(var(--muted));
71
71
  font-size: 1.125rem;
72
- color: hsl(var(--muted-foreground, 220 9% 46%));
72
+ color: hsl(var(--muted-foreground));
73
73
  }
74
74
 
75
75
  /* Video error state */
@@ -80,12 +80,12 @@
80
80
  justify-content: center;
81
81
  width: 100%;
82
82
  height: 100%;
83
- background: hsl(var(--muted, 220 14% 96%));
84
- border-radius: var(--radius, 0.375rem);
83
+ background: hsl(var(--muted));
84
+ border-radius: var(--radius);
85
85
  }
86
86
 
87
87
  .mv-video-error p {
88
- color: hsl(var(--muted-foreground, 220 9% 46%));
88
+ color: hsl(var(--muted-foreground));
89
89
  font-size: 0.875rem;
90
90
  }
91
91
 
@@ -100,7 +100,7 @@
100
100
 
101
101
  /* ---------------------------------------------------------------------------
102
102
  Canonical audio player chrome (AudioViewer / AudioPlayer).
103
- Semantic classes with token fallbacks; apps re-skin freely.
103
+ Semantic classes reading theme-core tokens; apps re-skin freely.
104
104
  --------------------------------------------------------------------------- */
105
105
  .mv-player {
106
106
  display: flex;
@@ -108,18 +108,18 @@
108
108
  gap: 0.375rem;
109
109
  width: 100%;
110
110
  padding: 0.5rem;
111
- background: hsl(var(--card, 0 0% 100%));
112
- border: 1px solid hsl(var(--border, 220 13% 91%));
113
- border-radius: var(--radius, 0.375rem);
111
+ background: hsl(var(--card));
112
+ border: 1px solid hsl(var(--border));
113
+ border-radius: var(--radius);
114
114
  }
115
115
 
116
116
  .mv-player-viz {
117
117
  position: relative;
118
118
  width: 100%;
119
119
  height: 6rem;
120
- color: hsl(var(--primary, 262 83% 58%));
121
- background: hsl(var(--muted, 220 14% 96%) / 0.5);
122
- border-radius: calc(var(--radius, 0.375rem) - 2px);
120
+ color: hsl(var(--primary));
121
+ background: hsl(var(--muted) / 0.5);
122
+ border-radius: calc(var(--radius) - 2px);
123
123
  overflow: hidden;
124
124
  }
125
125
 
@@ -145,14 +145,14 @@
145
145
  height: 2rem;
146
146
  padding: 0;
147
147
  border: none;
148
- border-radius: calc(var(--radius, 0.375rem) - 2px);
148
+ border-radius: calc(var(--radius) - 2px);
149
149
  background: transparent;
150
- color: hsl(var(--foreground, 224 71% 4%));
150
+ color: hsl(var(--foreground));
151
151
  cursor: pointer;
152
152
  }
153
153
 
154
154
  .mv-player-btn:hover {
155
- background: hsl(var(--muted, 220 14% 96%));
155
+ background: hsl(var(--muted));
156
156
  }
157
157
 
158
158
  .mv-player-btn svg {
@@ -161,7 +161,7 @@
161
161
  }
162
162
 
163
163
  .mv-player-play-btn {
164
- color: hsl(var(--primary, 262 83% 58%));
164
+ color: hsl(var(--primary));
165
165
  }
166
166
 
167
167
  .mv-player-mode-btn {
@@ -170,7 +170,7 @@
170
170
  right: 0.25rem;
171
171
  width: 1.5rem;
172
172
  height: 1.5rem;
173
- color: hsl(var(--muted-foreground, 220 9% 46%));
173
+ color: hsl(var(--muted-foreground));
174
174
  }
175
175
 
176
176
  .mv-player-mode-btn svg {
@@ -182,19 +182,19 @@
182
182
  flex-shrink: 0;
183
183
  font-size: 0.75rem;
184
184
  font-variant-numeric: tabular-nums;
185
- color: hsl(var(--muted-foreground, 220 9% 46%));
185
+ color: hsl(var(--muted-foreground));
186
186
  }
187
187
 
188
188
  .mv-player-seek {
189
189
  flex: 1 1 auto;
190
190
  min-width: 2rem;
191
- accent-color: hsl(var(--primary, 262 83% 58%));
191
+ accent-color: hsl(var(--primary));
192
192
  }
193
193
 
194
194
  .mv-player-volume {
195
195
  flex: 0 1 4rem;
196
196
  min-width: 2.5rem;
197
- accent-color: hsl(var(--primary, 262 83% 58%));
197
+ accent-color: hsl(var(--primary));
198
198
  }
199
199
 
200
200
  .mv-player-extra {
@@ -209,13 +209,13 @@
209
209
  display: flex;
210
210
  align-items: center;
211
211
  justify-content: center;
212
- background: hsl(var(--muted, 220 14% 96%));
213
- border-radius: var(--radius, 0.375rem);
212
+ background: hsl(var(--muted));
213
+ border-radius: var(--radius);
214
214
  padding: 1rem;
215
215
  height: 3.5rem;
216
216
  }
217
217
 
218
218
  .mv-audio-error p {
219
- color: hsl(var(--destructive, 0 84% 60%));
219
+ color: hsl(var(--destructive));
220
220
  font-size: 0.75rem;
221
221
  }