From 67fe06ff1b7f3588c45bbf1c5981fe721a4cb132 Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Fri, 11 Dec 2020 00:32:08 -0600
Subject: [PATCH] Add scroll buttons to video rows

---
 components/video/card.vue |  4 +--
 components/video/row.vue  | 58 ++++++++++++++++++++++++++++++++++++---
 2 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/components/video/card.vue b/components/video/card.vue
index 1aafc89..ba5a76a 100644
--- a/components/video/card.vue
+++ b/components/video/card.vue
@@ -24,7 +24,7 @@
                     }"
                     class="video-card-overlay absolute inset-0 flex justify-start items-start bg-gradient-to-tr from-black to-transparent p-4"
                 >
-                    <div class="play-circle w-10 h-10 bg-white-5 flex justify-center items-center outline-0 rounded-full ease">
+                    <div class="play-circle w-8 h-8 bg-white-2 flex justify-center items-center outline-0 rounded-full ease">
                         <svg
                             viewBox="0 0 18 18"
                             style="width:18px;height:18px;margin-left:3px"
@@ -36,7 +36,7 @@
                         </svg>
                     </div>
                 </div>
-                <div class="video-card-content absolute inset-0 flex items-end p-4">
+                <div class="video-card-content absolute inset-0 flex items-end py-4 px-6">
                     <div class="w-full text-sm text-left whitespace-normal">{{ video.name }}</div>
                 </div>
             </div>
diff --git a/components/video/row.vue b/components/video/row.vue
index f3ecb5d..ef6c54b 100644
--- a/components/video/row.vue
+++ b/components/video/row.vue
@@ -1,6 +1,7 @@
 <template>
-    <div class="video-row w-full">
+    <div class="video-row relative w-full">
         <div
+            ref="row"
             :style="{
                 scrollSnapType: 'x mandatory'
             }"
@@ -11,14 +12,54 @@
                 :key="video.slug"
                 :video="video"
                 :style="{
-                    maxWidth: '350px',
-                    flexBasis: '350px',
-                    flexGrow: '0',
+                    maxWidth: `${cardWidth}px`,
+                    flexBasis: `${cardWidth}px`,
                     scrollSnapAlign: 'start'
                 }"
                 class="w-full flex-shrink-0 flex-grow-0"
             />
         </div>
+
+        <button
+            :style="{
+                top: '50%',
+            }"
+            class="absolute left-0 h-10 w-10 flex justify-center items-center transform -translate-y-1/2 -translate-x-1/2 bg-darker rounded-full"
+            @click="scrollRow(cardWidth * -1)"
+        >
+            <svg
+                class="h-5 w-5 text-gray-400"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                style="transform: scaleX(-1);"
+            >
+                <path
+                    fill-rule="evenodd"
+                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                    clip-rule="evenodd"
+                />
+            </svg>
+        </button>
+
+        <button
+            :style="{
+                top: '50%',
+            }"
+            class="absolute right-0 h-10 w-10 flex justify-center items-center transform -translate-y-1/2 translate-x-1/2 bg-darker rounded-full"
+            @click="scrollRow(cardWidth)"
+        >
+            <svg
+                class="h-5 w-5 text-gray-400"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+            >
+                <path
+                    fill-rule="evenodd"
+                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                    clip-rule="evenodd"
+                />
+            </svg>
+        </button>
     </div>
 </template>
 
@@ -35,6 +76,15 @@ export default {
         videos: {
             type: Array,
             required: true
+        },
+        cardWidth: {
+            type: Number,
+            default: 350
+        }
+    },
+    methods: {
+        scrollRow ( pixels ) {
+            this.$refs['row'].scrollBy({ left: pixels, behavior: 'smooth' })
         }
     }
 }