vidply 1.0.2 → 1.0.4

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.
package/README.md CHANGED
@@ -275,16 +275,18 @@ const player = new Player('#video', {
275
275
 
276
276
  | Key | Action |
277
277
  |-----|--------|
278
- | <kbd>Space</kbd> / <kbd>K</kbd> | Play/Pause |
278
+ | <kbd>Space</kbd> / <kbd>P</kbd> / <kbd>K</kbd> | Play/Pause |
279
279
  | <kbd>F</kbd> | Toggle Fullscreen |
280
280
  | <kbd>M</kbd> | Mute/Unmute |
281
281
  | <kbd>↑</kbd> / <kbd>↓</kbd> | Volume Up/Down |
282
282
  | <kbd>←</kbd> / <kbd>→</kbd> | Seek -10s / +10s |
283
- | <kbd>J</kbd> / <kbd>L</kbd> | Seek -30s / +30s |
284
283
  | <kbd>C</kbd> | Toggle Captions (or open menu if multiple) |
284
+ | <kbd>A</kbd> | Open Caption Style Menu |
285
285
  | <kbd><</kbd> / <kbd>></kbd> | Decrease/Increase Speed |
286
- | <kbd>S</kbd> | Open Settings |
287
- | <kbd>R</kbd> | Restart Video |
286
+ | <kbd>S</kbd> | Open Speed Menu |
287
+ | <kbd>Q</kbd> | Open Quality Menu |
288
+ | <kbd>J</kbd> | Open Chapters Menu |
289
+ | <kbd>T</kbd> | Toggle Transcript |
288
290
 
289
291
  ## API Reference
290
292
 
package/dist/vidply.css CHANGED
@@ -1393,6 +1393,8 @@
1393
1393
  }
1394
1394
 
1395
1395
  .vidply-playlist-list {
1396
+ list-style: none;
1397
+ margin: 0;
1396
1398
  padding: 4px 0;
1397
1399
  }
1398
1400
 
@@ -1405,6 +1407,7 @@
1405
1407
  display: flex;
1406
1408
  gap: 12px;
1407
1409
  padding: 12px 16px;
1410
+ position: relative;
1408
1411
  transition: all 0.2s ease;
1409
1412
  }
1410
1413
 
@@ -1416,9 +1419,23 @@
1416
1419
  .vidply-playlist-item:focus {
1417
1420
  background: var(--vidply-white-08);
1418
1421
  border-left-color: var(--vidply-primary);
1422
+ outline: 2px solid var(--vidply-primary-light);
1423
+ outline-offset: -2px;
1424
+ z-index: 1;
1425
+ }
1426
+
1427
+ .vidply-playlist-item:focus:not(:focus-visible) {
1419
1428
  outline: none;
1420
1429
  }
1421
1430
 
1431
+ .vidply-playlist-item:focus-visible {
1432
+ background: var(--vidply-white-08);
1433
+ border-left-color: var(--vidply-primary);
1434
+ outline: 2px solid var(--vidply-primary-light);
1435
+ outline-offset: -2px;
1436
+ z-index: 1;
1437
+ }
1438
+
1422
1439
  .vidply-playlist-item-active {
1423
1440
  background: var(--vidply-primary-15);
1424
1441
  border-left-color: var(--vidply-primary);
@@ -1428,6 +1445,13 @@
1428
1445
  background: var(--vidply-primary-20);
1429
1446
  }
1430
1447
 
1448
+ .vidply-playlist-item-active:focus,
1449
+ .vidply-playlist-item-active:focus-visible {
1450
+ background: var(--vidply-primary-20);
1451
+ outline: 2px solid var(--vidply-primary-light);
1452
+ outline-offset: -2px;
1453
+ }
1454
+
1431
1455
  /* Playlist Thumbnail */
1432
1456
  .vidply-playlist-thumbnail {
1433
1457
  align-items: center;