Home Page

- Added slider for the popular video section

nuxt.config.js

@@ -14,7 +14,10 @@ export default {
   css: [],
 
   // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
-  plugins: [{ src: '~/plugins/magic.js', mode: 'client' }],
+  plugins: [
+    { src: '~/plugins/magic.js', mode: 'client' },
+    { src: '~/plugins/vue-splide.js', mode: 'client' },
+  ],
 
   // Auto import components (https://go.nuxtjs.dev/config-components)
   components: true,

package-lock.json

@@ -1956,6 +1956,29 @@
         }
       }
     },
+    "@splidejs/splide": {
+      "version": "2.4.14",
+      "resolved": "https://registry.npmjs.org/@splidejs/splide/-/splide-2.4.14.tgz",
+      "integrity": "sha512-TSw8lH0iuWYbcRbOx2J9CMXmKIjbQMBTMkIufUdDqV2q4/7cgcOwy0EkCfKst72SN1jnsj/LurGoOPFocUTq4Q=="
+    },
+    "@splidejs/splide-extension-video": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/@splidejs/splide-extension-video/-/splide-extension-video-0.4.6.tgz",
+      "integrity": "sha512-UEqxkuYClYDhV+DsX9384wKj6FWwWN3HUvUXcNPVKZiHvh0Zn0t1M2w/hcDRJ3VtCxFhx92Kgzlkf22HqdyF+g==",
+      "requires": {
+        "@vimeo/player": "^2.10.0"
+      }
+    },
+    "@splidejs/vue-splide": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@splidejs/vue-splide/-/vue-splide-0.3.5.tgz",
+      "integrity": "sha512-eI4Kl2v+yAGKMVa9MtfIIPPZtplTfKPx4rCJlZqfethl3tCOGQwL9MxSyLk6bUhl31aOuClxmXQv8O5ubU8fNQ==",
+      "requires": {
+        "@splidejs/splide": "^2.4.13",
+        "@splidejs/splide-extension-video": "^0.4.6",
+        "vue": "^2.6.12"
+      }
+    },
     "@tailwindcss/custom-forms": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/@tailwindcss/custom-forms/-/custom-forms-0.2.1.tgz",
@@ -2134,6 +2157,15 @@
         "tsutils": "^3.17.1"
       }
     },
+    "@vimeo/player": {
+      "version": "2.14.1",
+      "resolved": "https://registry.npmjs.org/@vimeo/player/-/player-2.14.1.tgz",
+      "integrity": "sha512-PXIATVxUfblTbRoSXzNcplJFjsho6e32ltfEm4po/RFZcAOYefOO4mjxDMGUTAzo937DZvjd5n1u7+EfGHuLPw==",
+      "requires": {
+        "native-promise-only": "0.8.1",
+        "weakmap-polyfill": "2.0.1"
+      }
+    },
     "@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
@@ -8432,6 +8464,11 @@
         "to-regex": "^3.0.1"
       }
     },
+    "native-promise-only": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/native-promise-only/-/native-promise-only-0.8.1.tgz",
+      "integrity": "sha1-IKMYwwy0X3H+et+/eyHJnBRy7xE="
+    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -12823,6 +12860,11 @@
         }
       }
     },
+    "weakmap-polyfill": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/weakmap-polyfill/-/weakmap-polyfill-2.0.1.tgz",
+      "integrity": "sha512-Jy177Lvb1LCrPQDWJsXyyqf4eOhcdvQHFGoCqSv921kVF5i42MVbr4e2WEwetuTLBn1NX0IhPzTmMu0N3cURqQ=="
+    },
     "webpack": {
       "version": "4.44.2",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.44.2.tgz",

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@nuxtjs/axios": "^5.12.2",
     "@nuxtjs/pwa": "^3.0.2",
+    "@splidejs/vue-splide": "^0.3.5",
     "@tailwindcss/ui": "^0.7.2",
     "core-js": "^3.6.5",
     "magic-sdk": "^3.0.1",

pages/index.vue

@@ -30,11 +30,33 @@
     </div>
     <div class="px-2">
       <h4 class="mb-2">Popular Videos</h4>
-      <ul
-        class="space-y-12 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-12 sm:space-y-0 lg:grid-cols-3 lg:gap-x-8 xxl:grid-cols-4 xxl:gap-x-8"
-      >
-        <li v-for="i in [1, 2, 3, 4]" :key="i">
-          <div class="space-y-4">
+      <splide :options="splideOptions">
+        <splide-slide
+          v-for="i in [
+            1,
+            2,
+            3,
+            4,
+            5,
+            6,
+            7,
+            8,
+            9,
+            10,
+            11,
+            12,
+            13,
+            14,
+            15,
+            16,
+            17,
+            18,
+            19,
+            20,
+          ]"
+          :key="i"
+        >
+          <div class="space-y-4 mx-2">
             <div class="relative pb-2/3">
               <img
                 class="absolute object-cover h-full w-full shadow-lg rounded-lg"
@@ -88,8 +110,8 @@
               </ul>
             </div>
           </div>
-        </li>
-      </ul>
+        </splide-slide>
+      </splide>
       <h4 class="mt-4 mb-2">New videos</h4>
       <ul
         class="mb-2 space-y-4 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0 lg:grid-cols-3 lg:gap-8 xxl:grid-cols-6 xxl:gap-10"
@@ -158,12 +180,46 @@
 </template>
 
 <script>
+import '@splidejs/splide/dist/css/themes/splide-skyblue.min.css'
 export default {
   name: 'Index',
   data() {
     return {
       email: '',
       loading: false,
+      splideOptions: {
+        lazyLoad: 'nearby',
+        cover: true,
+        type: 'loop',
+        // padding: {
+        //   right: '5rem',
+        //   left: '5rem',
+        // },
+        perPage: 4,
+        // rewind: false,
+        breakpoints: {
+          640: {
+            perPage: 1,
+            gap: '1rem',
+          },
+          768: {
+            perPage: 1,
+            gap: '1rem',
+          },
+          1024: {
+            perPage: 2,
+            gap: '1rem',
+          },
+          1280: {
+            perPage: 2,
+            gap: '1rem',
+          },
+          1920: {
+            perPage: 3,
+            gap: '1rem',
+          },
+        },
+      },
     }
   },
   methods: {},

plugins/vue-splide.js

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import { Splide, SplideSlide } from '@splidejs/vue-splide'
+
+Vue.component('Splide', Splide)
+Vue.component('SplideSlide', SplideSlide)
+// Vue.use(SplideSlide)
+// Vue.use(Splide)