Merged in fix/BOOK-257-video-player (pull request #3373)

Fix/BOOK-257 video player * fix(BOOK-257): Fixes to VideoPlayerButton and added stories * fix(BOOK-257): Hiding mute button when the user has interacted with it * fix(BOOK-257): Added support for poster image * fix(BOOK-257): add crossOrigin attr to videoplayer * fix(BOOK-257): comment Approved-by: Anton Gunnarsson
2025-12-19 12:41:00 +00:00
parent 3f632e6031
commit c21aa2dc73
15 changed files with 436 additions and 117 deletions
--- a/packages/design-system/lib/components/VideoPlayer/Button/videoPlayerButton.module.css
+++ b/packages/design-system/lib/components/VideoPlayer/Button/videoPlayerButton.module.css
@@ -0,0 +1,90 @@
+.videoPlayerButton {
+  border-radius: var(--Corner-radius-Rounded);
+  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
+  height: 56px;
+  width: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  cursor: pointer;
+  z-index: 0;
+  border-width: 0;
+  border-style: solid;
+  border-color: var(--Base-Border-Subtle);
+  background-color: transparent;
+  color: var(--Component-Button-Inverted-On-fill-Default);
+
+  @media (hover: hover) {
+    &:hover .iconWrapper {
+      background:
+        linear-gradient(
+          0deg,
+          var(--Component-Button-Inverted-Fill-Hover) 0%,
+          var(--Component-Button-Inverted-Fill-Hover) 100%
+        ),
+        var(--Component-Button-Inverted-Fill-Default);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--Border-Inverted);
+    outline-offset: 2px;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: -2px;
+      border: 2px solid var(--Border-Interactive-Focus);
+      border-radius: inherit;
+      pointer-events: none;
+    }
+  }
+
+  &.size-sm {
+    height: 52px;
+    width: 52px;
+
+    .iconWrapper {
+      width: 40px;
+      height: 40px;
+    }
+  }
+
+  &.size-md {
+    height: 56px;
+    width: 56px;
+
+    .iconWrapper {
+      width: 43px;
+      height: 43px;
+    }
+  }
+  &.size-lg {
+    height: 72px;
+    width: 72px;
+
+    .iconWrapper {
+      width: 56px;
+      height: 56px;
+    }
+  }
+}
+
+.transparentBackground {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border-radius: var(--Corner-radius-Rounded);
+  opacity: 0.5;
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+}
+
+.iconWrapper {
+  background: var(--Base-Surface-Primary-light-Normal);
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-Rounded);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}