From 4e63e054b806a6a29c7c680657b10b1eec52c8ac Mon Sep 17 00:00:00 2001
From: Soleone <soleone@gmail.com>
Date: Wed, 1 Sep 2021 04:24:33 -0400
Subject: [PATCH] Change homepage to Videos

---
 CHANGELOG.md                      |  5 +++
 src/App.vue                       | 45 +++++++++++++++++--------
 src/constants/constants.js        |  2 +-
 src/router/index.js               | 16 ++++-----
 src/views/{Home.vue => About.vue} | 32 ++++++++++++------
 src/views/Player.vue              |  2 +-
 src/views/VideoShow.vue           | 16 ++++-----
 src/views/Videos.vue              | 56 ++++++++++++++++++-------------
 8 files changed, 109 insertions(+), 65 deletions(-)
 rename src/views/{Home.vue => About.vue} (69%)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8ed01dc..b8dce50 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+### 0.2.13
+
+- Change homepage to Videos and move old home to About
+
 ### 0.2.12
 
 - Add Esports and Interview categories
@@ -7,6 +11,7 @@
 ### 0.2.11
 
 - Add RSS feed link for video subscriptions
+
 ### 0.2.10
 
 - Fetch published date from Youtube API and use it to sort video list by
diff --git a/src/App.vue b/src/App.vue
index 713049e..546a369 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,7 +3,7 @@
     <v-app-bar color="#263238" dark app>
       <div class="d-flex align-center px-0">
         <v-img
-          @click="$router.push({ name: 'Home' })"
+          @click="$router.push({ name: 'Videos' })"
           alt="Gods Unchained Logo"
           class="mr-2 clickable"
           src="@/assets/images/gods-unchained-logo-256.png"
@@ -11,16 +11,17 @@
         />
 
         <v-toolbar-title>
-          <span @click="$router.push({ name: 'Home' })" class="clickable">
+          <span @click="$router.push({ name: 'Videos' })" class="clickable">
             <span class="d-none d-sm-inline">Gunchained</span>
             <span class="d-inline d-sm-none">GU</span>
           </span>
           <span class="d-none d-sm-inline">
-             {{ title }}
+            {{ title }}
           </span>
         </v-toolbar-title>
 
         <v-chip
+          v-show="title == 'Arena'"
           :disabled="activeUserCount < 2"
           color="green darken-2"
           class="ml-sm-4 ml-2"
@@ -63,13 +64,22 @@
         </div>
       </v-toolbar-items>
 
-      <v-app-bar-nav-icon @click.stop="drawer = !drawer" class="mr-1"></v-app-bar-nav-icon>
+      <v-app-bar-nav-icon
+        @click.stop="drawer = !drawer"
+        class="mr-1"
+      ></v-app-bar-nav-icon>
     </v-app-bar>
 
     <v-navigation-drawer v-model="drawer" fixed temporary right width="300">
       <span v-for="(section, index) in navigation" :key="index">
         <v-list dense nav>
-          <GATrack v-for="link in section" link :key="link.label" event-name="navigationClicked" :event-label="link.label">
+          <GATrack
+            v-for="link in section"
+            link
+            :key="link.label"
+            event-name="navigationClicked"
+            :event-label="link.label"
+          >
             <v-list-item link :to="link.route">
               <v-list-item-icon>
                 <v-icon>{{ link.icon }}</v-icon>
@@ -172,13 +182,6 @@ export default {
       version: VERSION,
       drawer: false,
       navigation: [
-        [
-          {
-            label: 'Arena',
-            icon: 'mdi-fencing',
-            route: { name: 'Arena'},
-          }
-        ],
         [
           {
             label: 'Videos',
@@ -190,6 +193,20 @@ export default {
             icon: 'mdi-message-plus-outline',
             route: { name: 'Feedback' }
           }
+        ],
+        [
+          {
+            label: 'Arena',
+            icon: 'mdi-fencing',
+            route: { name: 'Arena' }
+          }
+        ],
+        [
+          {
+            label: 'About',
+            icon: 'mdi-information-outline',
+            route: { name: 'About' }
+          }
         ]
       ]
     }
@@ -220,7 +237,7 @@ export default {
   },
   methods: {
     logout() {
-      console.log("Logging out")
+      console.log('Logging out')
       firebase
         .auth()
         .signOut()
@@ -230,7 +247,7 @@ export default {
             message: 'Logged out.',
             color: 'default'
           })
-          this.$router.push({ name: 'Home' })
+          this.$router.push({ name: 'About' })
         })
     },
     updateAvailability() {
diff --git a/src/constants/constants.js b/src/constants/constants.js
index ede978b..8706f4a 100644
--- a/src/constants/constants.js
+++ b/src/constants/constants.js
@@ -52,6 +52,6 @@ export const CHANNELS_BY_AUTHOR = {
   Rogvarok: 'https://www.youtube.com/channel/UCdaFKgefAytNPi-kmPOQcaw',
   Fakemews9: 'https://www.youtube.com/channel/UCbopgNya6aLhYi6GE8mNMvw',
   TGRInteractive: 'https://www.youtube.com/channel/UCctybG40v1jj-exD5D8VqoA',
-  BadBabaGU: 'https://www.youtube.com/channel/UCgoEoyKD-kTuSQQpSQpI1aA/videos',
+  BadBabaGU: 'https://www.youtube.com/channel/UCgoEoyKD-kTuSQQpSQpI1aA',
   ClutchHS: 'https://www.youtube.com/channel/UCUqvAp0-3XIhx27FFt7pGIA'
 }
diff --git a/src/router/index.js b/src/router/index.js
index 6dfb5a7..7198361 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
+import About from '../views/About.vue'
 import Arena from '../views/Arena.vue'
 import Login from '../views/Login.vue'
 import Player from '../views/Player.vue'
@@ -12,10 +12,15 @@ import Feedback from '../views/Feedback.vue'
 Vue.use(VueRouter)
 
 const routes = [
+  {
+    path: '/about',
+    name: 'About',
+    component: About
+  },
   {
     path: '/',
-    name: 'Home',
-    component: Home
+    name: 'Videos',
+    component: Videos
   },
   {
     path: '/arena',
@@ -32,11 +37,6 @@ const routes = [
     name: 'Player',
     component: Player
   },
-  {
-    path: '/videos',
-    name: 'Videos',
-    component: Videos
-  },
   {
     path: '/videos/:id',
     name: 'VideoShow',
diff --git a/src/views/Home.vue b/src/views/About.vue
similarity index 69%
rename from src/views/Home.vue
rename to src/views/About.vue
index 6a75969..f3daa79 100644
--- a/src/views/Home.vue
+++ b/src/views/About.vue
@@ -3,7 +3,10 @@
     <v-row>
       <v-col class="text-center">
         <h1 class="text-h6">Welcome to Gunchained</h1>
-        <p class="text-subtitle-1">Content and tools for <a href="https://godsunchained.com">Gods Unchained</a></p>
+        <p class="text-subtitle-1">
+          Content and tools for
+          <a href="https://godsunchained.com">Gods Unchained</a>
+        </p>
       </v-col>
     </v-row>
 
@@ -11,7 +14,8 @@
       <v-spacer></v-spacer>
       <v-col cols="12" lg="6">
         <v-alert type="info" text>
-          Navigate using the <v-icon small light>mdi-menu</v-icon> Menu button in the top right corner.
+          Navigate using the <v-icon small light>mdi-menu</v-icon> Menu button
+          in the top right corner.
         </v-alert>
       </v-col>
       <v-spacer></v-spacer>
@@ -22,11 +26,14 @@
       <v-col cols="5" class="green lighten-5 rounded">
         <p>
           <GATrack event-name="navigationClickedFromHome" event-label="Arena">
-            <v-btn color="success" to="/arena"><v-icon left>mdi-fencing</v-icon> Arena</v-btn>
+            <v-btn color="success" to="/arena"
+              ><v-icon left>mdi-fencing</v-icon> Arena</v-btn
+            >
           </GATrack>
         </p>
         <p>
-          Find other players to play against. Useful for casual matches or organizing a tournament setting.
+          Find other players to play against. Useful for casual matches or
+          organizing a tournament setting.
         </p>
         <p>
           To share your invite code you will have to
@@ -34,7 +41,10 @@
             <a href="/login">sign in</a>
           </GATrack>
           first to be able to fill out your
-          <GATrack event-name="navigationClickedFromHome" event-label="Player profile">
+          <GATrack
+            event-name="navigationClickedFromHome"
+            event-label="Player profile"
+          >
             <a href="/player">player profile</a>
           </GATrack>
           .
@@ -44,7 +54,9 @@
       <v-col cols="5" class="red lighten-5 rounded">
         <p>
           <GATrack event-name="navigationClickedFromHome" event-label="Videos">
-            <v-btn color="error" to="/videos"><v-icon left>mdi-youtube</v-icon> Videos</v-btn>
+            <v-btn color="error" :to="{ name: 'Videos' }"
+              ><v-icon left>mdi-youtube</v-icon> Videos</v-btn
+            >
           </GATrack>
         </p>
         <p>
@@ -60,12 +72,12 @@
 import GATrack from '@/components/shared/GATrack.js'
 
 export default {
-  name: 'Home',
+  name: 'About',
   components: {
     GATrack
   },
   mounted() {
-    this.$store.dispatch('setTitle', 'Home')
-  },
+    this.$store.dispatch('setTitle', 'About')
+  }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/Player.vue b/src/views/Player.vue
index 9ce239d..8ae8fdf 100644
--- a/src/views/Player.vue
+++ b/src/views/Player.vue
@@ -158,7 +158,7 @@ export default {
     updatePlayer() {
       this.$gtag.event('updatePlayer')
       this.$store.dispatch('updatePlayer', this.player)
-      this.$router.push({ name: 'Home' })
+      this.$router.push({ name: 'About' })
     }
   },
   watch: {
diff --git a/src/views/VideoShow.vue b/src/views/VideoShow.vue
index 3d420f6..9750dd4 100644
--- a/src/views/VideoShow.vue
+++ b/src/views/VideoShow.vue
@@ -1,8 +1,8 @@
 <template>
   <v-container>
-    <v-row >
+    <v-row>
       <v-col class="text-center">
-        <v-btn to="/videos" color="primary">
+        <v-btn :to="{ name: 'Videos' }" color="primary">
           <v-icon left>mdi-arrow-left</v-icon>
           Back
         </v-btn>
@@ -23,13 +23,13 @@ import { mapState } from 'vuex'
 export default {
   name: 'VideoShow',
   components: {
-    Video
+    Video,
   },
   props: {
     id: {
       type: String,
-      required: false
-    }
+      required: false,
+    },
   },
   mounted() {
     this.$store.dispatch('loadCurrentVideo', this.id)
@@ -38,11 +38,11 @@ export default {
     ...mapState({ video: 'currentVideo' }),
     breadcrumbs() {
       return [
-        { text: 'Videos', href: '/videos' },
-        { text: this.video.title }
+        { text: 'Videos', to: "{ name: 'Videos' }" },
+        { text: this.video.title },
       ]
     },
-  }
+  },
 }
 </script>
 
diff --git a/src/views/Videos.vue b/src/views/Videos.vue
index 64d335b..db48123 100644
--- a/src/views/Videos.vue
+++ b/src/views/Videos.vue
@@ -4,7 +4,7 @@
       <v-col>
         <v-breadcrumbs large :items="breadcrumbs" divider="/">
           <template v-slot:item="{ item }">
-            <v-breadcrumbs-item :href="item.href">
+            <v-breadcrumbs-item :to="item.to">
               {{ item.text }}
             </v-breadcrumbs-item>
           </template>
@@ -14,17 +14,28 @@
     <v-row>
       <v-col cols="12" lg="10">
         <GATrack event-name="clickCategoryFromList" event-label="All">
-          <v-chip class="mr-1 mb-2" to="/videos" :label="!videoCategory">
+          <v-chip
+            class="mr-1 mb-2"
+            :to="{ name: 'Videos' }"
+            :label="!videoCategory"
+          >
             All
           </v-chip>
         </GATrack>
 
-        <GATrack v-for="category in categories" event-name="clickCategoryFromList" :event-label="category" :key="category">
-          <v-chip class="mr-1 mb-2"
-                  :dark="categoryObject(category).isDarkColor()"
-                  :color="categoryObject(category).color()"
-                  :to="`/videos/categories/${category}`"
-                  :label="videoCategory === category">
+        <GATrack
+          v-for="category in categories"
+          event-name="clickCategoryFromList"
+          :event-label="category"
+          :key="category"
+        >
+          <v-chip
+            class="mr-1 mb-2"
+            :dark="categoryObject(category).isDarkColor()"
+            :color="categoryObject(category).color()"
+            :to="`/videos/categories/${category}`"
+            :label="videoCategory === category"
+          >
             {{ categoryObject(category).label() }}
           </v-chip>
         </GATrack>
@@ -60,16 +71,16 @@ export default {
   name: 'Videos',
   components: {
     Video,
-    GATrack
+    GATrack,
   },
   props: {
     category: {
       type: String,
-      required: false
+      required: false,
     },
     author: {
       type: String,
-      required: false
+      required: false,
     },
   },
   mounted() {
@@ -81,15 +92,14 @@ export default {
   computed: {
     ...mapState(['videos', 'videoCategory', 'videoAuthor']),
     breadcrumbs() {
-      return [
-        { text: 'Authors', href: '/videos' },
-        this.authorBreadcrumb
-      ].filter(item => item)
+      return [{ text: 'Authors', to: '/' }, this.authorBreadcrumb].filter(
+        (item) => item
+      )
     },
-   authorBreadcrumb() {
+    authorBreadcrumb() {
       if (this.videoAuthor) {
         return {
-          text: this.videoAuthor
+          text: this.videoAuthor,
         }
       } else {
         return null
@@ -97,7 +107,7 @@ export default {
     },
     categories() {
       return CATEGORIES
-    }
+    },
   },
   methods: {
     categoryObject(category) {
@@ -105,7 +115,7 @@ export default {
     },
     visitRSS() {
       window.location.href = '/feed.xml'
-    }
+    },
   },
   head: {
     link: [
@@ -113,10 +123,10 @@ export default {
         rel: 'alternate',
         type: 'application/rss+xml',
         title: 'Gunchained videos feed',
-        href: '/feed.xml'
-      }
-    ]
-  }
+        href: '/feed.xml',
+      },
+    ],
+  },
 }
 </script>