feat(player): add seek keyboard animation display icons

closes #1137
vidstack · Feb 19, 2024 · ff93604 · ff93604
1 parent 7491385
commit ff93604
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 8 deletions.
diff --git a/packages/react/src/components/layouts/default/icons.tsx b/packages/react/src/components/layouts/default/icons.tsx
@@ -1,12 +1,14 @@
 import * as React from 'react';
 
-import airPlayPaths from 'media-icons/dist/icons/airplay.js';
-import arrowLeftPaths from 'media-icons/dist/icons/arrow-left.js';
+import airPlayIconPaths from 'media-icons/dist/icons/airplay.js';
+import arrowLeftIconPaths from 'media-icons/dist/icons/arrow-left.js';
 import chaptersIconPaths from 'media-icons/dist/icons/chapters.js';
-import arrowRightPaths from 'media-icons/dist/icons/chevron-right.js';
-import googleCastPaths from 'media-icons/dist/icons/chromecast.js';
+import arrowRightIconPaths from 'media-icons/dist/icons/chevron-right.js';
+import googleCastIconPaths from 'media-icons/dist/icons/chromecast.js';
 import ccOnIconPaths from 'media-icons/dist/icons/closed-captions-on.js';
 import ccIconPaths from 'media-icons/dist/icons/closed-captions.js';
+import fastBackwardIconPaths from 'media-icons/dist/icons/fast-backward.js';
+import fastForwardIconPaths from 'media-icons/dist/icons/fast-forward.js';
 import exitFullscreenIconPaths from 'media-icons/dist/icons/fullscreen-exit.js';
 import enterFullscreenIconPaths from 'media-icons/dist/icons/fullscreen.js';
 import musicIconPaths from 'media-icons/dist/icons/music.js';
@@ -37,10 +39,10 @@ function createIcon(paths: string) {
 
 export const defaultLayoutIcons: DefaultLayoutIcons = {
   AirPlayButton: {
-    Default: createIcon(airPlayPaths),
+    Default: createIcon(airPlayIconPaths),
   },
   GoogleCastButton: {
-    Default: createIcon(googleCastPaths),
+    Default: createIcon(googleCastIconPaths),
   },
   PlayButton: {
     Play: createIcon(playIconPaths),
@@ -69,8 +71,8 @@ export const defaultLayoutIcons: DefaultLayoutIcons = {
     Forward: createIcon(seekForwardIconPaths),
   },
   Menu: {
-    ArrowLeft: createIcon(arrowLeftPaths),
-    ArrowRight: createIcon(arrowRightPaths),
+    ArrowLeft: createIcon(arrowLeftIconPaths),
+    ArrowRight: createIcon(arrowRightIconPaths),
     Audio: createIcon(musicIconPaths),
     Chapters: createIcon(chaptersIconPaths),
     Quality: createIcon(qualityIconPaths),
@@ -93,6 +95,8 @@ export const defaultLayoutIcons: DefaultLayoutIcons = {
     ExitPiP: createIcon(exitPIPIconPaths),
     CaptionsOn: createIcon(ccOnIconPaths),
     CaptionsOff: createIcon(ccIconPaths),
+    SeekForward: createIcon(fastForwardIconPaths),
+    SeekBackward: createIcon(fastBackwardIconPaths),
   },
 };
 
@@ -171,6 +175,8 @@ export interface DefaultKeyboardActionIcons {
   ExitPiP: DefaultLayoutIcon;
   CaptionsOn: DefaultLayoutIcon;
   CaptionsOff: DefaultLayoutIcon;
+  SeekForward: DefaultLayoutIcon;
+  SeekBackward: DefaultLayoutIcon;
 }
 
 export interface DefaultLayoutIcons {

diff --git a/packages/react/src/components/layouts/default/keyboard-action-display.tsx b/packages/react/src/components/layouts/default/keyboard-action-display.tsx
@@ -143,6 +143,10 @@ function getIcon(Icons?: DefaultKeyboardActionIcons) {
       return Icons?.VolumeUp;
     case 'volumeDown':
       return Icons?.VolumeDown;
+    case 'seekForward':
+      return Icons?.SeekForward;
+    case 'seekBackward':
+      return Icons?.SeekBackward;
     default:
       return null;
   }

diff --git a/packages/vidstack/player/styles/default/keyboard.css b/packages/vidstack/player/styles/default/keyboard.css
@@ -51,6 +51,7 @@
   left: 50%;
   top: 45%;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   width: var(--size);
@@ -68,6 +69,17 @@
   display: none;
 }
 
+:where(.vds-kb-action[data-action='seek-forward'] .vds-kb-bezel) {
+  top: 45%;
+  left: unset;
+  right: 10%;
+}
+
+:where(.vds-kb-action[data-action='seek-backward'] .vds-kb-bezel) {
+  top: 45%;
+  left: 10%;
+}
+
 /*
  * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  * Keyboard Icon

diff --git a/packages/vidstack/src/elements/define/layouts/default/icons.ts b/packages/vidstack/src/elements/define/layouts/default/icons.ts
@@ -6,6 +6,8 @@ import googleCast from 'media-icons/dist/icons/chromecast.js';
 import ccOn from 'media-icons/dist/icons/closed-captions-on.js';
 import ccOff from 'media-icons/dist/icons/closed-captions.js';
 import menuCaptions from 'media-icons/dist/icons/closed-captions.js';
+import fastBackward from 'media-icons/dist/icons/fast-backward.js';
+import fastForward from 'media-icons/dist/icons/fast-forward.js';
 import fsExit from 'media-icons/dist/icons/fullscreen-exit.js';
 import fsEnter from 'media-icons/dist/icons/fullscreen.js';
 import menuAudio from 'media-icons/dist/icons/music.js';
@@ -62,4 +64,6 @@ export const icons = {
   'kb-pip-exit': pipExit,
   'kb-cc-on': ccOn,
   'kb-cc-off': ccOff,
+  'kb-seek-forward': fastForward,
+  'kb-seek-backward': fastBackward,
 };
diff --git a/packages/vidstack/src/elements/define/layouts/default/keyboard-action-display.ts b/packages/vidstack/src/elements/define/layouts/default/keyboard-action-display.ts
@@ -102,6 +102,10 @@ function getIconName() {
       return 'kb-volume-up-icon';
     case 'volumeDown':
       return 'kb-volume-down-icon';
+    case 'seekForward':
+      return 'kb-seek-forward-icon';
+    case 'seekBackward':
+      return 'kb-seek-backward-icon';
     default:
       return null;
   }