Add video upload

package.json

@@ -9,16 +9,17 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "dayjs": "^1.8",
     "firebase": "^7.12.0",
     "firebaseui": "^4.6.1",
-    "dayjs": "^1.8",
     "vue": "^2.6.11",
     "vue-gtag": "^1.9.1",
     "vue-router": "^3.2.0",
+    "vuefire": "^2.2.2",
     "vuetify": "^2.2.11",
     "vuex": "^3.4.0",
-    "vuefire": "^2.2.2",
     "vuexfire": "^3.2.4"
   },
   "devDependencies": {

src/components/ChallengeList.vue

@@ -54,7 +54,7 @@
 </template>
 
 <script>
-import { mapState, mapGetters, mapActions } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 
 export default {
   name: 'ChallengeList',

src/components/Video.vue

@@ -1,6 +1,6 @@
 <template>
   <v-card class="mx-auto" :max-width="width">
-    <v-card-title>{{ title }}</v-card-title>
+    <v-card-title class="text-subtitle-1">{{ title }}</v-card-title>
     <v-img class="mx-2">
       <iframe :width="width"
               :height="height"

src/constants/constants.js

@@ -0,0 +1,11 @@
+export const CATEGORIES = {
+  GAMEPLAY: 'gameplay',
+  STRATEGY: 'strategy',
+  DECKS: 'decks',
+  CARDS: 'cards',
+  TRADING: 'trading',
+  PATCH_NOTES: 'patch notes',
+  FUNDAMENTALS: 'fundamentals',
+  FUN: 'fun',
+  OTHER: 'other'
+}

src/router/index.js

@@ -4,6 +4,7 @@ import Home from '../views/Home.vue'
 import Login from '../views/Login.vue'
 import Player from '../views/Player.vue'
 import Videos from '../views/Videos.vue'
+import VideoUpload from '../views/VideoUpload.vue'
 
 Vue.use(VueRouter)
 
@@ -28,6 +29,11 @@ const routes = [
     name: 'Videos',
     component: Videos
   },
+  {
+    path: '/upload',
+    name: 'VideoUpload',
+    component: VideoUpload
+  },
   {
     path: '/about',
     name: 'About',

src/store/index.js

@@ -74,6 +74,28 @@ export default new Vuex.Store({
           })
         })
     },
+    uploadVideo({ dispatch, state }, video) {
+      // create a copy that excludes id
+      const newVideo = {
+        ...video,
+        addedAt: firebase.firestore.FieldValue.serverTimestamp()
+      }
+      return store
+        .collection('videos')
+        .add(newVideo)
+        .then(() => {
+          dispatch('setStatus', {
+            message: 'Video uploaded.'
+          })
+        })
+        .catch(response => {
+          dispatch('setStatus', {
+            message: 'Failed to upload video!',
+            color: 'error'
+          })
+          console.log(response)
+        })
+    },
     updateAvailability({ dispatch, state }, player) {
       const newPlayer = {
         lastActiveAt: firebase.firestore.FieldValue.serverTimestamp(),

src/views/VideoUpload.vue

@@ -0,0 +1,79 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col>
+        <v-card>
+          <v-card-text>
+            <v-text-field label="Youtube URL" v-model="url" @change="fetchMetadata" required>
+            </v-text-field>
+
+            <v-text-field label="Title" v-model="title" required>
+            </v-text-field>
+
+            <v-img :src="imageUrl" max-width="480" max-height="360" class="mb-4"></v-img>
+
+            <v-text-field label="Author" v-model="author" required>
+            </v-text-field>
+
+            <v-select label="Category" :items="categories" v-model="category">
+            </v-select>
+          </v-card-text>
+          <v-card-actions>
+            <v-btn color="success" @click="upload">Upload</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import axios from 'axios'
+import { CATEGORIES } from '@/constants/constants.js'
+
+export default {
+  name: 'VideoUpload',
+  data() {
+    return {
+      url: null,
+      author: null,
+      title: null,
+      category: null,
+      imageUrl: "/placeholder_image.png",
+      baseURL: "https://www.youtube.com/oembed?format=json"
+    }
+  },
+  computed: {
+    categories() {
+      return Object.values(CATEGORIES)
+    },
+    video() {
+      return {
+        url: this.url,
+        author: this.author,
+        title: this.title,
+        url: this.url,
+        category: this.category
+      }
+    }
+  },
+  methods: {
+    fetchMetadata() {
+      const url = `${this.baseURL}&url=${this.url}`
+      console.log(`Fetching Youtube metadata for url = ${url}`)
+      axios.get(url).then(response => {
+        console.log(response)
+        const data = response.data
+        this.author = data['author_name']
+        this.title = data['title']
+        this.imageUrl = data['thumbnail_url']
+      })
+    },
+    upload() {
+      this.$store.dispatch('uploadVideo', this.video)
+    }
+  }
+}
+</script>
+
+<style></style>

yarn.lock

@@ -2283,6 +2283,13 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.10.1.tgz#e1e82e4f3e999e2cfd61b161280d16a111f86428"
   integrity sha512-zg7Hz2k5lI8kb7U32998pRRFin7zJlkfezGJjUc2heaD4Pw2wObakCDVzkKztTm/Ln7eiVvYsjqak0Ed4LkMDA==
 
+axios@^0.21.1:
+  version "0.21.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+  integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
+  dependencies:
+    follow-redirects "^1.10.0"
+
 babel-eslint@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
@@ -4675,6 +4682,11 @@ follow-redirects@^1.0.0:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"
   integrity sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==
 
+follow-redirects@^1.10.0:
+  version "1.13.3"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.3.tgz#e5598ad50174c1bc4e872301e82ac2cd97f90267"
+  integrity sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"