add nudge and basic play/pause

samcarton · Aug 4, 2024 · 2ae8956 · 2ae8956
1 parent d460e16
commit 2ae8956
Show file tree

Hide file tree

Showing 6 changed files with 352 additions and 22 deletions.
diff --git a/src/components/PauseIcon.module.css b/src/components/PauseIcon.module.css
@@ -0,0 +1,4 @@
+.pause {
+  color: currentColor;
+  stroke-width: 2;
+}
diff --git a/src/components/PauseIcon.tsx b/src/components/PauseIcon.tsx
@@ -0,0 +1,19 @@
+import classes from "./PauseIcon.module.css";
+
+export const PauseIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    className={classes.pause}
+  >
+    <rect x="14" y="4" width="4" height="16" rx="1" />
+    <rect x="6" y="4" width="4" height="16" rx="1" />
+  </svg>
+);
diff --git a/src/components/PlayIcon.module.css b/src/components/PlayIcon.module.css
@@ -0,0 +1,4 @@
+.play {
+  color: currentColor;
+  stroke-width: 2;
+}
diff --git a/src/components/PlayIcon.tsx b/src/components/PlayIcon.tsx
@@ -0,0 +1,18 @@
+import classes from "./PlayIcon.module.css";
+
+export const PlayIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    className={classes.play}
+  >
+    <polygon points="6 3 20 12 6 21 6 3" />
+  </svg>
+);
diff --git a/src/components/VideoPlayer.module.css b/src/components/VideoPlayer.module.css
@@ -1,3 +1,7 @@
+:root {
+  --button-arrow-width: 8px;
+}
+
 .container {
   display: flex;
   flex-direction: column;
@@ -103,6 +107,28 @@
 }
 
 .loopGroup {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: baseline;
+  width: 100%;
+  gap: 6px;
+}
+
+.loopDisplay {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: 0.5rem;
+}
+
+h3 {
+  margin: 0;
+}
+
+.playbackGroup {
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -117,8 +143,8 @@
     cursor: pointer;
     background: rgb(var(--accent-light));
     color: #ffffff;
-    border-radius: 8px;
-    padding: 12px 12px;
+    border-radius: 50%;
+    padding: 12px 13.5px;
     font-size: 16px;
     font-weight: 700;
     line-height: 1;
@@ -131,15 +157,113 @@
   }
 }
 
-.loopDisplay {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  gap: 0.5rem;
+.roundedButton {
+  text-decoration: none;
+  display: inline-block;
+  outline: 0;
+  border: 0;
+  cursor: pointer;
+  background: rgb(var(--accent-light));
+  color: #ffffff;
+  border-radius: 8px;
+  padding: 12px 12px;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+  transition:
+    transform 200ms,
+    background 200ms;
+  &:hover {
+    transform: translateY(-2px);
+  }
 }
 
-h3 {
-  margin: 0;
+.buttonRight {
+  text-decoration: none;
+  display: inline-block;
+  outline: 0;
+  border: 0;
+  cursor: pointer;
+  background: rgb(var(--accent-light));
+  color: #ffffff;
+
+  border-radius: 0;
+  padding: 12px 12px;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+  transition:
+    transform 200ms,
+    background 200ms;
+  &:hover {
+    transform: translateY(-2px);
+  }
+  clip-path: polygon(
+    0% 0%,
+    calc(100% - var(--button-arrow-width)) 0%,
+    100% 50%,
+    calc(100% - var(--button-arrow-width)) 100%,
+    0% 100%,
+    var(--button-arrow-width) 50%
+  );
+}
+
+.buttonRight {
+  text-decoration: none;
+  display: inline-block;
+  outline: 0;
+  border: 0;
+  cursor: pointer;
+  background: rgb(var(--accent-light));
+  color: #ffffff;
+
+  border-radius: 0;
+  padding: 12px 12px;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+  transition:
+    transform 200ms,
+    background 200ms;
+  &:hover {
+    transform: translateY(-2px);
+  }
+  clip-path: polygon(
+    0% 0%,
+    calc(100% - var(--button-arrow-width)) 0%,
+    100% 50%,
+    calc(100% - var(--button-arrow-width)) 100%,
+    0% 100%,
+    var(--button-arrow-width) 50%
+  );
+}
+
+.buttonLeft {
+  text-decoration: none;
+  display: inline-block;
+  outline: 0;
+  border: 0;
+  cursor: pointer;
+  background: rgb(var(--accent-light));
+  color: #ffffff;
+
+  border-radius: 0;
+  padding: 12px 12px;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+  transition:
+    transform 200ms,
+    background 200ms;
+  &:hover {
+    transform: translateY(-2px);
+  }
+  clip-path: polygon(
+    0% 50%,
+    var(--button-arrow-width) 0%,
+    100% 0%,
+    calc(100% - var(--button-arrow-width)) 50%,
+    100% 100%,
+    var(--button-arrow-width) 100%
+  );
 }