Add movies to explain workflow

Author: Hironsan

frontend/nuxt.config.js

@@ -43,7 +43,8 @@ export default {
   ** Plugins to load before mounting the App
   */
   plugins: [
-    '~/plugins/filters.js'
+    '~/plugins/filters.js',
+    '~/plugins/vue-youtube.js'
   ],
   /*
   ** Nuxt.js modules

frontend/package.json

@@ -25,6 +25,7 @@
     "tui-editor": "^1.4.5",
     "vue-chartjs": "^3.4.2",
     "vue-shortkey": "^3.1.7",
+    "vue-youtube": "^1.4.0",
     "vuetify": "^2.0.2"
   },
   "devDependencies": {

frontend/pages/projects/_id/index.vue

@@ -21,17 +21,24 @@
         </v-stepper-step>
         <v-stepper-content :step="index + 1">
           <v-card
-            color="grey lighten-1"
+            v-if="item.videoId"
             class="mb-12"
-            height="200px"
-          />
+            width="560"
+            height="315"
+          >
+            <youtube
+              ref="youtube"
+              :video-id="item.videoId"
+            />
+          </v-card>
           <v-btn
-            color="primary"
+            color="primary mt-5"
             @click="next"
           >
             Continue
           </v-btn>
           <v-btn
+            class="mt-5"
             text
             @click="prev"
           >
@@ -53,13 +60,13 @@ export default {
     return {
       e6: 1,
       items: [
-        { title: 'Import a dataset' },
-        { title: 'Create labels for this project' },
-        { title: 'Add members for collaborative work' },
-        { title: 'Define a guideline for the work' },
-        { title: 'Annotate the dataset' },
-        { title: 'View statistics' },
-        { title: 'Export the dataset' }
+        { title: 'Import a dataset', videoId: 'dA4ID1DSxCE' },
+        { title: 'Create labels for this project', videoId: '1bSML270quU' },
+        { title: 'Add members for collaborative work', videoId: 'NI09dcBz-qA' },
+        { title: 'Define a guideline for the work', videoId: 'AvvX3Xs32nA' },
+        { title: 'Annotate the dataset', videoId: 'F3XoSdyiMhA' },
+        { title: 'View statistics', videoId: 'kfRpa0mNQMY' },
+        { title: 'Export the dataset', videoId: 'Pfy_QcHEeQ4' }
       ]
     }
   },

frontend/plugins/vue-youtube.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VueYoutube from 'vue-youtube'
+
+Vue.use(VueYoutube)

frontend/yarn.lock

@@ -3257,7 +3257,7 @@ debug@*, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   dependencies:
     ms "^2.1.1"
 
-[email protected], debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
+[email protected], debug@^2.2.0, debug@^2.3.3, debug@^2.6.6, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -4430,6 +4430,11 @@ get-value@^2.0.3, get-value@^2.0.6:
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
   integrity sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=
 
+get-youtube-id@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-youtube-id/-/get-youtube-id-1.0.1.tgz#adb6f475e292d98f98ed5bfb530887656193e157"
+  integrity sha512-5yidLzoLXbtw82a/Wb7LrajkGn29BM6JuLWeHyNfzOGp1weGyW4+7eMz6cP23+etqj27VlOFtq8fFFDMLq/FXQ==
+
 getpass@^0.1.1:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
@@ -5978,6 +5983,11 @@ load-json-file@^4.0.0:
     pify "^3.0.0"
     strip-bom "^3.0.0"
 
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+  integrity sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ=
+
 loader-fs-cache@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/loader-fs-cache/-/loader-fs-cache-1.0.2.tgz#54cedf6b727e1779fd8f01205f05f6e88706f086"
@@ -8706,6 +8716,11 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
+sister@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/sister/-/sister-3.0.2.tgz#bb3e39f07b1f75bbe1945f29a27ff1e5a2f26be4"
+  integrity sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA==
+
 sisteransi@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.2.tgz#ec57d64b6f25c4f26c0e2c7dd23f2d7f12f7e418"
@@ -9877,6 +9892,14 @@ vue-template-es2015-compiler@^1.6.0, vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue-youtube@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/vue-youtube/-/vue-youtube-1.4.0.tgz#34b74a967783d3c64596d886efef5966032f9428"
+  integrity sha512-PCyfGAouSt6rTX0GLUzpdX2XC52zYf7a9mUhdp53jeDlPoU40hpsvyV3Zg2+947pvbv27ORcmtzm2fqO08kh9Q==
+  dependencies:
+    get-youtube-id "^1.0.0"
+    youtube-player "^5.4.0"
+
 vue@^2.6.10:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
@@ -10267,3 +10290,12 @@ yargs@^12.0.2:
     which-module "^2.0.0"
     y18n "^3.2.1 || ^4.0.0"
     yargs-parser "^11.1.1"
+
+youtube-player@^5.4.0:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/youtube-player/-/youtube-player-5.5.2.tgz#052b86b1eabe21ff331095ffffeae285fa7f7cb5"
+  integrity sha512-ZGtsemSpXnDky2AUYWgxjaopgB+shFHgXVpiJFeNB5nWEugpW1KWYDaHKuLqh2b67r24GtP6HoSW5swvf0fFIQ==
+  dependencies:
+    debug "^2.6.6"
+    load-script "^1.0.0"
+    sister "^3.0.0"