feat(BOOK-257): Added VideoPlayer component

Approved-by: Christel Westerberg Approved-by: Bianca Widstam
2025-12-02 07:35:38 +00:00
parent b1ccabb0b6
commit 84593438e6
13 changed files with 513 additions and 5 deletions
--- a/packages/design-system/lib/components/VideoPlayer/Button/button.module.css
+++ b/packages/design-system/lib/components/VideoPlayer/Button/button.module.css
@@ -0,0 +1,53 @@
+.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;
+  overflow: hidden;
+  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-color: var(--Component-Button-Inverted-Fill-Hover);
+      color: var(--Component-Button-Inverted-On-fill-Hover);
+    }
+  }
+
+  &:focus-visible {
+    border-width: 2px;
+    outline: 2px solid var(--Border-Inverted);
+
+    .transparentBackground {
+      background-color: var(--Base-Border-Subtle);
+    }
+  }
+}
+
+.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;
+  padding: var(--Space-x05);
+}