From d1ceed5bbecdfca7707ee8cc8ec5c328ce444f19 Mon Sep 17 00:00:00 2001 From: Hironsan Date: Mon, 11 Nov 2019 13:23:46 +0900 Subject: [PATCH] Add movies to explain workflow --- frontend/nuxt.config.js | 3 ++- frontend/package.json | 1 + frontend/pages/projects/_id/index.vue | 29 ++++++++++++++--------- frontend/plugins/vue-youtube.js | 4 ++++ frontend/yarn.lock | 34 ++++++++++++++++++++++++++- 5 files changed, 58 insertions(+), 13 deletions(-) create mode 100644 frontend/plugins/vue-youtube.js diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js index 0933d258..70c3edd1 100644 --- a/frontend/nuxt.config.js +++ b/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 diff --git a/frontend/package.json b/frontend/package.json index 04a7ec6d..0ca76578 100644 --- a/frontend/package.json +++ b/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": { diff --git a/frontend/pages/projects/_id/index.vue b/frontend/pages/projects/_id/index.vue index d430551b..b4f8d043 100644 --- a/frontend/pages/projects/_id/index.vue +++ b/frontend/pages/projects/_id/index.vue @@ -21,17 +21,24 @@ + width="560" + height="315" + > + + Continue @@ -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' } ] } }, diff --git a/frontend/plugins/vue-youtube.js b/frontend/plugins/vue-youtube.js new file mode 100644 index 00000000..0bc03474 --- /dev/null +++ b/frontend/plugins/vue-youtube.js @@ -0,0 +1,4 @@ +import Vue from 'vue' +import VueYoutube from 'vue-youtube' + +Vue.use(VueYoutube) diff --git a/frontend/yarn.lock b/frontend/yarn.lock index f4e67a54..d21ff28d 100644 --- a/frontend/yarn.lock +++ b/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" -debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9: +debug@2.6.9, 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"