Video edit, show page and load optimizations.

src/components/Video.vue

@@ -1,20 +1,25 @@
 <template>
-  <v-card class="mx-auto" :max-width="cardWidth">
-    <v-card-title class="text-subtitle-1">{{ title }}</v-card-title>
+  <v-card class="mx-auto" :max-width="cardWidth" :to="`/videos/${id}`">
+    <v-card-title class="text-subtitle-1 flex justify-space-between">
+      <span>{{ video.title }}</span>
+      <v-btn v-if="isUserAdmin" icon :to="`/videos/edit/${id}`"><v-icon>mdi-pencil</v-icon></v-btn>
+    </v-card-title>
     <v-card-subtitle>
       By
-      <a href="#" @click.prevent="visitAuthor(author)">{{ author }}</a>
+      <a href="#" @click.prevent="visitAuthor(video.author)">{{ video.author }}</a>
     </v-card-subtitle>
-    <v-img class="mx-2">
-      <iframe :width="width"
-              :height="height"
-              :src="embedUrl"
-              frameborder="0"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
-      </iframe>
+    <iframe v-if="showEmbed"
+            class="mx-2"
+            :width="width"
+            :height="height"
+            :src="embedUrl"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
+    </iframe>
+    <v-img v-if="!showEmbed" class="mx-2 mb-2" :src="video.imageUrl">
     </v-img>
     <v-card-text class="py-0 pb-2 d-flex justify-space-between align-center">
-      <v-chip :dark="categoryObject.isDarkColor()" :color="categoryObject.color()" :to="`/videos/categories/${category}`">
+      <v-chip :dark="categoryObject.isDarkColor()" :color="categoryObject.color()" :to="`/videos/categories/${video.category}`">
         {{ categoryObject.label() }}
       </v-chip>
       <Tooltip tooltip="When this video was added to Gunchained. Typically not when it was created." top>
@@ -31,6 +36,7 @@
 const DIMENSIONS = {
 }
 
+import { mapState, mapGetters } from 'vuex'
 import Category from '@/models/category.js'
 import Tooltip from '@/components/vuetify-ext/Tooltip.vue'
 import dayjs from 'dayjs'
@@ -41,25 +47,17 @@ export default {
     Tooltip
   },
   props: {
-    url: {
+    id: {
       type: String,
       required: true
     },
-    title: {
-      type: String,
-      required: true
-      },
-    author: {
-      type: String,
-      required: true
-    },
-    category: {
-      type: String,
-      required: true
-    },
-    addedAt: {
+    video: {
       type: Object,
       required: true
+    },
+    showEmbed: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -77,8 +75,9 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(['isUserAdmin']),
     embedUrl() {
-      return this.url.replace('/watch?v=', '/embed/')
+      return this.video.url.replace('/watch?v=', '/embed/')
     },
     width() {
       return this.currentDimensions.width
@@ -93,10 +92,10 @@ export default {
       return this.$vuetify.breakpoint.lgAndUp ? this.dimensions['lg'] : this.dimensions['sm']
     },
     categoryObject() {
-      return new Category(this.category)
+      return new Category(this.video.category)
     },
     addedAtFormatted() {
-      return dayjs(this.addedAt.toDate()).format('DD/MM/YYYY')
+      return dayjs(this.video.addedAt.toDate()).format('DD/MM/YYYY')
     }
   },
   methods: {

src/router/index.js

@@ -4,8 +4,9 @@ import Home from '../views/Home.vue'
 import Arena from '../views/Arena.vue'
 import Login from '../views/Login.vue'
 import Player from '../views/Player.vue'
+import VideoShow from '../views/VideoShow.vue'
 import Videos from '../views/Videos.vue'
-import VideoUpload from '../views/VideoUpload.vue'
+import VideoEdit from '../views/VideoEdit.vue'
 
 Vue.use(VueRouter)
 
@@ -35,32 +36,35 @@ const routes = [
     name: 'Videos',
     component: Videos
   },
+  {
+    path: '/videos/:id',
+    name: 'VideoShow',
+    component: VideoShow,
+    props: true
+  },
+  {
+    path: '/upload',
+    name: 'VideoEdit',
+    component: VideoEdit
+  },
+  {
+    path: '/videos/edit/:id',
+    name: 'VideoEdit',
+    component: VideoEdit,
+    props: true
+  },
   {
     path: '/videos/categories/:category',
-    name: 'Videos',
+    name: 'VideosByCategory',
     component: Videos,
     props: true
   },
   {
     path: '/videos/authors/:author',
-    name: 'Videos',
+    name: 'VideosByAuthor',
     component: Videos,
     props: true
   },
-  {
-    path: '/upload',
-    name: 'VideoUpload',
-    component: VideoUpload
-  },
-  {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () =>
-      import(/* webpackChunkName: "about" */ '../views/About.vue')
-  }
 ]
 
 const router = new VueRouter({

src/store/index.js

@@ -8,6 +8,8 @@ import firebase from 'firebase/app'
 
 Vue.use(Vuex)
 
+const ADMIN_PLAYER_ID = 'qUiC8x84wZPeV2hhdveI4E4koYl1'
+
 export default new Vuex.Store({
   state: {
     title: null,
@@ -17,6 +19,7 @@ export default new Vuex.Store({
     videos: [],
     videoCategory: null,
     videoAuthor: null,
+    currentVideo: null,
     status: {
       visible: false,
       message: null,
@@ -53,6 +56,9 @@ export default new Vuex.Store({
     },
     setVideoAuthor(state, author) {
       state.videoAuthor = author
+    },
+    setCurrentVideo(state, video) {
+      state.currentVideo = video
     }
   },
   actions: {
@@ -82,23 +88,57 @@ 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
+    createVideo({ dispatch }, video) {
+      video.addedAt = firebase.firestore.FieldValue.serverTimestamp()
+      store
+        .collection('videos')
+        .add(video)
+        .then(() => {
+          dispatch('setStatus', {
+            message: 'Video created.'
+          })
+        })
+        .catch(response => {
+          dispatch('setStatus', {
+            message: 'Failed to create video!',
+            color: 'error'
+          })
+          console.log(response)
+        })
+    },
+    updateVideo({ dispatch }, { id, video }) {
+      console.log("Updating video", id, video)
+      store
         .collection('videos')
-        .add(newVideo)
+        .doc(id)
+        .set(video)
         .then(() => {
           dispatch('setStatus', {
-            message: 'Video uploaded.'
+            message: 'Video updated.'
           })
         })
         .catch(response => {
           dispatch('setStatus', {
-            message: 'Failed to upload video!',
+            message: 'Failed to update video!',
+            color: 'error'
+          })
+          console.log(response)
+        })
+    },
+    deleteVideo({ dispatch }, id) {
+      console.log("Deleting video", id)
+      store
+        .collection('videos')
+        .doc(id)
+        .delete()
+        .then(() => {
+          dispatch('setStatus', {
+            message: 'Video deleted.'
+          })
+        })
+        .catch(response => {
+          dispatch('setStatus', {
+            message: 'Failed to delete video!',
             color: 'error'
           })
           console.log(response)
@@ -120,6 +160,23 @@ export default new Vuex.Store({
           })
         })
     },
+    loadCurrentVideo({ dispatch }, id) {
+      console.log("Fetching video information from db")
+      store.collection('videos').doc(id).get().then((doc) => {
+        const video = doc.data()
+        console.log("Received video information from db, setting data")
+        const currentVideo = {
+          url: video.url,
+          author: video.author,
+          title: video.title,
+          category: video.category,
+          description: video.description,
+          addedAt: video.addedAt,
+          imageUrl: video.imageUrl
+        }
+        dispatch('setCurrentVideo', currentVideo)
+      })
+    },
     createChallenge({ commit }, challenge) {
       commit('createChallenge', challenge)
     },
@@ -139,6 +196,9 @@ export default new Vuex.Store({
     setVideoAuthor({ commit }, author) {
       commit('setVideoAuthor', author)
     },
+    setCurrentVideo({ commit }, video) {
+      commit('setCurrentVideo', video)
+    },
     bindPlayerRef: firestoreAction(({ bindFirestoreRef, state }) => {
       console.log('[Vuex] Binding player ref from Firestore')
       return bindFirestoreRef(
@@ -195,6 +255,9 @@ export default new Vuex.Store({
     },
     appStatus(state) {
       return state.app.status || {}
+    },
+    isUserAdmin(state) {
+      return state.user.uid === ADMIN_PLAYER_ID
     }
   },
   modules: {}