vod frog, frog with the vods
add lilypads at start/end of player scrub bar, remove pink progress bar from card previews
+27
-17
.DS_Store
.DS_Store
This is a binary file and will not be displayed.
spec/LilyStart.png
spec/LilyStart.png
This is a binary file and will not be displayed.
spec/lilyend.png
spec/lilyend.png
This is a binary file and will not be displayed.
+2
-17
src/lib/VideoCard.svelte
+2
-17
src/lib/VideoCard.svelte
···
177
177
{#if scrubbing && scrubLoading && !hasFrame}
178
178
<div class="loading-spinner"><div class="spinner"></div></div>
179
179
{/if}
180
-
{#if scrubbing && scrubReady}
181
-
<div class="scrub-bar">
182
-
<div class="scrub-bar-fill" style="width: {scrubProgress * 100}%"></div>
183
-
</div>
184
-
{/if}
180
+
185
181
{#if scrubbing}
186
182
<div
187
183
class="scrub-frog"
···
307
303
}
308
304
@keyframes spin { to { transform: rotate(360deg); } }
309
305
310
-
.scrub-bar {
311
-
position: absolute;
312
-
bottom: 0; left: 0; right: 0;
313
-
height: 3px;
314
-
background: rgba(255, 255, 255, 0.2);
315
-
z-index: 2;
316
-
}
317
-
.scrub-bar-fill {
318
-
height: 100%;
319
-
background: #FF3992;
320
-
transition: width 0.05s linear;
321
-
}
306
+
322
307
323
308
.info {
324
309
padding: 14px 10px 8px;
+25
src/lib/VideoPlayer.svelte
+25
src/lib/VideoPlayer.svelte
···
263
263
aria-valuemax={duration}
264
264
tabindex={0}
265
265
>
266
+
<!-- Lilypad at the start -->
267
+
<img src="/lilypad.png" alt="" class="lilypad lilypad-start" />
268
+
266
269
<!-- svelte-ignore a11y_no_static_element_interactions -->
267
270
<div
268
271
class="scrub-frog"
···
279
282
draggable="false"
280
283
/>
281
284
</div>
285
+
286
+
<!-- Lilypad at the end -->
287
+
<img src="/lilypad.png" alt="" class="lilypad lilypad-end" />
282
288
</div>
283
289
</div>
284
290
···
372
378
height: auto;
373
379
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
374
380
pointer-events: none;
381
+
}
382
+
383
+
/* Lilypads at start and end of scrub bar */
384
+
.lilypad {
385
+
position: absolute;
386
+
bottom: -4px;
387
+
width: 36px;
388
+
height: auto;
389
+
pointer-events: none;
390
+
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
391
+
}
392
+
393
+
.lilypad-start {
394
+
left: -18px;
395
+
}
396
+
397
+
.lilypad-end {
398
+
right: -18px;
399
+
transform: scaleX(-1);
375
400
}
376
401
377
402
/* Frogeye fullscreen button */
static/lilypad.png
static/lilypad.png
This is a binary file and will not be displayed.