vod frog, frog with the vods
5
fork

Configure Feed

Select the types of activity you want to include in your feed.

add lilypads at start/end of player scrub bar, remove pink progress bar from card previews

goose.art 87be2cfa ed1c52d0

+27 -17
.DS_Store

This is a binary file and will not be displayed.

spec/LilyStart.png

This is a binary file and will not be displayed.

spec/lilyend.png

This is a binary file and will not be displayed.

+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
··· 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

This is a binary file and will not be displayed.