├── .gitignore
├── README.md
├── babel.config.js
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── logo.png
    │   └── logo.svg
    ├── components
    │   ├── UserAuthForm.vue
    │   ├── VideoEditForm.vue
    │   ├── VideoListVideo.vue
    │   └── VuetifyHelloWorld.vue
    ├── main.js
    ├── plugins
    │   └── vuetify.js
    ├── router
    │   └── index.js
    ├── services
    │   └── api.js
    ├── store
    │   ├── index.js
    │   ├── snackbar.js
    │   ├── tags.js
    │   ├── users.js
    │   └── videos.js
    ├── utils
    │   └── validations.js
    └── views
    │   ├── About.vue
    │   ├── Admin.vue
    │   ├── AdminTagList.vue
    │   ├── AdminUserList.vue
    │   ├── AdminVideoCreate.vue
    │   ├── AdminVideoEdit.vue
    │   ├── AdminVideoList.vue
    │   ├── AdminVideoShow.vue
    │   ├── Home.vue
    │   ├── TagVideoList.vue
    │   ├── UserLogin.vue
    │   ├── UserRegistration.vue
    │   └── VideoWatch.vue
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-screencasts
 2 | 
 3 | ## Project setup
 4 | ```
 5 | yarn install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | yarn serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | yarn build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | yarn lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/cli-plugin-babel/preset"]
3 | };
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-screencasts",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "@fortawesome/fontawesome-svg-core": "^1.2.22",
12 |     "@fortawesome/free-solid-svg-icons": "^5.10.2",
13 |     "@fortawesome/vue-fontawesome": "^0.1.7",
14 |     "axios": "^0.19.0",
15 |     "core-js": "^3.1.2",
16 |     "vue": "^2.6.10",
17 |     "vue-router": "^3.0.6",
18 |     "vue-video-player": "^5.0.2",
19 |     "vuetify": "^2.0.0",
20 |     "vuex": "^3.0.1"
21 |   },
22 |   "devDependencies": {
23 |     "@mdi/font": "^4.4.95",
24 |     "@vue/cli-plugin-babel": "^4.0.0-rc.2",
25 |     "@vue/cli-plugin-eslint": "^4.0.0-rc.2",
26 |     "@vue/cli-plugin-router": "^4.0.0-rc.2",
27 |     "@vue/cli-plugin-vuex": "^4.0.0-rc.2",
28 |     "@vue/cli-service": "^4.0.0-rc.2",
29 |     "babel-eslint": "^10.0.1",
30 |     "eslint": "^5.16.0",
31 |     "eslint-plugin-vue": "^5.0.0",
32 |     "sass": "^1.19.0",
33 |     "sass-loader": "^7.1.0",
34 |     "vue-cli-plugin-vuetify": "^0.6.3",
35 |     "vue-template-compiler": "^2.6.10",
36 |     "vuetify-loader": "^1.2.2"
37 |   },
38 |   "eslintConfig": {
39 |     "root": true,
40 |     "env": {
41 |       "node": true
42 |     },
43 |     "extends": [
44 |       "plugin:vue/essential"
45 |     ],
46 |     "rules": {},
47 |     "parserOptions": {
48 |       "parser": "babel-eslint"
49 |     }
50 |   },
51 |   "postcss": {
52 |     "plugins": {
53 |       "autoprefixer": {}
54 |     }
55 |   },
56 |   "browserslist": [
57 |     "> 1%",
58 |     "last 2 versions"
59 |   ]
60 | }
61 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jeffreybiles/vue-screencasts/552011f9f5dcbbf40bdb91a8bc75afc3e67d7259/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-screencasts</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-screencasts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app>
 3 |     <v-app-bar app color="green">
 4 |       <v-toolbar-title class="headline text-uppercase">
 5 |         <v-btn text to="/">Vue Screencasts</v-btn>
 6 |       </v-toolbar-title>
 7 |       <v-btn text to="/admin/videos" v-if="currentUser.admin">Admin</v-btn>
 8 |       <v-spacer></v-spacer>
 9 |       <div v-if="currentUser.name">
10 |         {{ currentUser.name }}
11 |         <v-btn text class="mr-2" @click="logoutUser">Logout</v-btn>
12 |       </div>
13 |       <div v-else>
14 |         <v-btn text class="mr-2" to="/login">Login</v-btn>
15 |         <v-btn text class="mr-2" to="/registration">Register</v-btn>
16 |       </div>
17 |     </v-app-bar>
18 | 
19 |     <v-content>
20 |       <router-view />
21 |     </v-content>
22 | 
23 |     <v-snackbar
24 |       v-for="(snackbar, index) in snackbars.filter(s => s.showing)"
25 |       :key="snackbar.text + Math.random()"
26 |       v-model="snackbar.showing"
27 |       :timeout="snackbar.timeout"
28 |       :color="snackbar.color"
29 |       :style="`bottom: ${(index * 60) + 8}px`"
30 |     >
31 |       {{snackbar.text}}
32 | 
33 |       <v-btn text @click="snackbar.showing = false">
34 |         Close
35 |       </v-btn>
36 |     </v-snackbar>
37 |   </v-app>
38 | </template>
39 | 
40 | <script>
41 | import { mapState } from 'vuex';
42 | export default {
43 |   name: 'App',
44 |   created(){
45 |     this.$store.dispatch('videos/loadAll');
46 |     this.$store.dispatch('users/loadCurrent');
47 |     this.$store.dispatch('tags/loadAll');
48 |   },
49 |   components: {
50 |   },
51 |   computed: {
52 |     ...mapState({
53 |       currentUser: state => state.users.currentUser, 
54 |       snackbars: state => state.snackbar.snackbars
55 |     })
56 |   },
57 |   data: () => ({
58 |     //
59 |   }),
60 |   methods: {
61 |     logoutUser() {
62 |       this.$store.dispatch("users/logout");
63 |     }
64 |   },
65 | };
66 | </script>
67 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jeffreybiles/vue-screencasts/552011f9f5dcbbf40bdb91a8bc75afc3e67d7259/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
2 | 


--------------------------------------------------------------------------------
/src/components/UserAuthForm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-form v-model="valid">
 3 |     <v-text-field v-model="userInfo.name" 
 4 |                   label="Name" 
 5 |                   :rules="[required('name')]"
 6 |                   v-if="hasName" />
 7 | 
 8 |     <v-text-field v-model="userInfo.email" 
 9 |                   label="Email" 
10 |                   :rules="[required('email'), emailFormat()]"/>
11 | 
12 |     <v-text-field v-model="userInfo.password"
13 |                   label="Password"
14 |                   :type="showPassword ? 'text' : 'password'" 
15 |                   :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
16 |                   @click:append="showPassword = !showPassword"
17 |                   counter=true
18 |                   :rules="[required('password'), minLength('password', 8)]"
19 |                   />
20 | 
21 |     <v-btn @click="submitForm(userInfo)" :disabled="!valid">{{ buttonText }}</v-btn>
22 |   </v-form>
23 | </template>
24 | 
25 | <script>
26 |   import validations from "@/utils/validations";
27 | 
28 |   export default {
29 |     data() {
30 |       return {
31 |         valid: false,
32 |         showPassword: false,
33 |         userInfo: {
34 |           email: '',
35 |           password: ''
36 |         },
37 |         ...validations
38 |       }
39 |     },
40 |     props: ["submitForm", "buttonText", "hasName"]
41 |   }
42 | </script>
43 | 
44 | <style lang="scss" scoped>
45 | 
46 | </style>


--------------------------------------------------------------------------------
/src/components/VideoEditForm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-form v-model="valid">
 3 |     <v-text-field v-model="video.name" 
 4 |                   label="Name" 
 5 |                   counter=50
 6 |                   :rules="[required('name'), minLength('name', 5), maxLength('name', 50)]" />
 7 |     <v-textarea v-model="video.description" 
 8 |                 label="Description" 
 9 |                 counter=true
10 |                 :rules="[required('description'), minLength('description', 20)]"/>
11 |     <v-text-field v-model="video.videoUrl" 
12 |                   label="Video URL" 
13 |                   :rules="[required('video URL')]"
14 |                   hint="If you want our friends in China to be able to watch this, please use Amazon S3 or similar instead of Youtube and Vimeo." />
15 |     <v-text-field v-model="video.thumbnail" 
16 |                   label="Thumbnail URL" 
17 |                   :rules="[required('thumbnail URL')]" />
18 |    
19 |     <v-btn @click="saveVideo" :disabled="!valid">{{buttonText}}</v-btn>
20 |   </v-form>
21 | </template>
22 | 
23 | <script>
24 |   import validations from '@/utils/validations';
25 |   export default {
26 |     data() {
27 |       console.log(validations)
28 |       return {
29 |         valid: false,
30 |         ...validations
31 |       }
32 |     },
33 |     props: ['video', 'saveVideo', 'buttonText']
34 |   }
35 | </script>
36 | 
37 | <style lang="scss" scoped>
38 | 
39 | </style>


--------------------------------------------------------------------------------
/src/components/VideoListVideo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-card width="340px" 
 3 |           hover 
 4 |           class="ma-2"
 5 |           :to="{ name: 'video-watch', params: { id: video.id }}">
 6 |     <v-img :src="video.thumbnail" />
 7 |     <v-card-title>{{ video.name }}</v-card-title>
 8 |     <v-card-text>
 9 |       <div class="green--text" v-if="isPlayed(video.id)">
10 |         <font-awesome-icon icon="check" /> Played
11 |       </div>
12 |     </v-card-text>
13 | 
14 |     <v-card-actions>
15 |       <span v-for="tag_id in video.tag_ids" :key="`${video.id}-${tag_id}`">
16 |         <v-btn color="green lighten-2" 
17 |                class="mr-2"
18 |                small
19 |                @mousedown.stop
20 |                :to="{ name: 'tag', params: {id: tag_id}}">
21 |           {{ getTag(tag_id).name }}
22 |         </v-btn>
23 |       </span>
24 |     </v-card-actions>
25 |   </v-card>
26 | </template>
27 | 
28 | <script>
29 | import { mapGetters } from 'vuex';
30 | export default {
31 |   computed: {
32 |     ...mapGetters({
33 |       getTag: 'tags/get',
34 |       isPlayed: 'users/videoIsPlayed'
35 |     })
36 |   },
37 |   props: ['video'],
38 |   
39 | }
40 | </script>
41 | 
42 | <style scoped lang="scss">
43 | </style>


--------------------------------------------------------------------------------
/src/components/VuetifyHelloWorld.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-container>
  3 |     <v-layout
  4 |       text-center
  5 |       wrap
  6 |     >
  7 |       <v-flex xs12>
  8 |         <v-img
  9 |           :src="require('../assets/logo.svg')"
 10 |           class="my-3"
 11 |           contain
 12 |           height="200"
 13 |         ></v-img>
 14 |       </v-flex>
 15 | 
 16 |       <v-flex mb-4>
 17 |         <h1 class="display-2 font-weight-bold mb-3">
 18 |           Welcome to Vuetify
 19 |         </h1>
 20 |         <p class="subheading font-weight-regular">
 21 |           For help and collaboration with other Vuetify developers,
 22 |           <br>please join our online
 23 |           <a href="https://community.vuetifyjs.com" target="_blank">Discord Community</a>
 24 |         </p>
 25 |       </v-flex>
 26 | 
 27 |       <v-flex
 28 |         mb-5
 29 |         xs12
 30 |       >
 31 |         <h2 class="headline font-weight-bold mb-3">What's next?</h2>
 32 | 
 33 |         <v-layout justify-center>
 34 |           <a
 35 |             v-for="(next, i) in whatsNext"
 36 |             :key="i"
 37 |             :href="next.href"
 38 |             class="subheading mx-3"
 39 |             target="_blank"
 40 |           >
 41 |             {{ next.text }}
 42 |           </a>
 43 |         </v-layout>
 44 |       </v-flex>
 45 | 
 46 |       <v-flex
 47 |         xs12
 48 |         mb-5
 49 |       >
 50 |         <h2 class="headline font-weight-bold mb-3">Important Links</h2>
 51 | 
 52 |         <v-layout justify-center>
 53 |           <a
 54 |             v-for="(link, i) in importantLinks"
 55 |             :key="i"
 56 |             :href="link.href"
 57 |             class="subheading mx-3"
 58 |             target="_blank"
 59 |           >
 60 |             {{ link.text }}
 61 |           </a>
 62 |         </v-layout>
 63 |       </v-flex>
 64 | 
 65 |       <v-flex
 66 |         xs12
 67 |         mb-5
 68 |       >
 69 |         <h2 class="headline font-weight-bold mb-3">Ecosystem</h2>
 70 | 
 71 |         <v-layout justify-center>
 72 |           <a
 73 |             v-for="(eco, i) in ecosystem"
 74 |             :key="i"
 75 |             :href="eco.href"
 76 |             class="subheading mx-3"
 77 |             target="_blank"
 78 |           >
 79 |             {{ eco.text }}
 80 |           </a>
 81 |         </v-layout>
 82 |       </v-flex>
 83 |     </v-layout>
 84 |   </v-container>
 85 | </template>
 86 | 
 87 | <script>
 88 | export default {
 89 |   data: () => ({
 90 |     ecosystem: [
 91 |       {
 92 |         text: 'vuetify-loader',
 93 |         href: 'https://github.com/vuetifyjs/vuetify-loader',
 94 |       },
 95 |       {
 96 |         text: 'github',
 97 |         href: 'https://github.com/vuetifyjs/vuetify',
 98 |       },
 99 |       {
100 |         text: 'awesome-vuetify',
101 |         href: 'https://github.com/vuetifyjs/awesome-vuetify',
102 |       },
103 |     ],
104 |     importantLinks: [
105 |       {
106 |         text: 'Documentation',
107 |         href: 'https://vuetifyjs.com',
108 |       },
109 |       {
110 |         text: 'Chat',
111 |         href: 'https://community.vuetifyjs.com',
112 |       },
113 |       {
114 |         text: 'Made with Vuetify',
115 |         href: 'https://madewithvuejs.com/vuetify',
116 |       },
117 |       {
118 |         text: 'Twitter',
119 |         href: 'https://twitter.com/vuetifyjs',
120 |       },
121 |       {
122 |         text: 'Articles',
123 |         href: 'https://medium.com/vuetify',
124 |       },
125 |     ],
126 |     whatsNext: [
127 |       {
128 |         text: 'Explore components',
129 |         href: 'https://vuetifyjs.com/components/api-explorer',
130 |       },
131 |       {
132 |         text: 'Select a layout',
133 |         href: 'https://vuetifyjs.com/layout/pre-defined',
134 |       },
135 |       {
136 |         text: 'Frequently Asked Questions',
137 |         href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
138 |       },
139 |     ],
140 |   }),
141 | };
142 | </script>
143 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import App from "./App.vue";
 3 | import router from "./router";
 4 | import store from "./store";
 5 | import vuetify from './plugins/vuetify';
 6 | 
 7 | import { library } from '@fortawesome/fontawesome-svg-core'
 8 | import { faCheck } from '@fortawesome/free-solid-svg-icons'
 9 | import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
10 | 
11 | library.add(faCheck)
12 | 
13 | Vue.component('font-awesome-icon', FontAwesomeIcon)
14 | 
15 | Vue.config.productionTip = false;
16 | 
17 | new Vue({
18 |   router,
19 |   store,
20 |   vuetify,
21 |   render: h => h(App)
22 | }).$mount("#app");
23 | 


--------------------------------------------------------------------------------
/src/plugins/vuetify.js:
--------------------------------------------------------------------------------
 1 | import '@mdi/font/css/materialdesignicons.css'
 2 | import Vue from 'vue';
 3 | import Vuetify from 'vuetify/lib';
 4 | 
 5 | Vue.use(Vuetify);
 6 | 
 7 | export default new Vuetify({
 8 |   icons: {
 9 |     iconfont: 'mdi',
10 |   },
11 | });
12 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
  1 | import Vue from "vue";
  2 | import VueRouter from "vue-router";
  3 | import Home from "../views/Home.vue";
  4 | import VideoWatch from "../views/VideoWatch.vue";
  5 | import AdminVideoCreate from "../views/AdminVideoCreate.vue";
  6 | import TagVideoList from "../views/TagVideoList.vue";
  7 | import AdminVideoList from "../views/AdminVideoList.vue";
  8 | import AdminVideoEdit from "../views/AdminVideoEdit.vue";
  9 | import AdminUserList from "../views/AdminUserList.vue";
 10 | import UserLogin from "../views/UserLogin.vue";
 11 | import UserRegistration from "../views/UserRegistration.vue";
 12 | import Admin from "../views/Admin.vue";
 13 | import AdminVideoShow from "../views/AdminVideoShow.vue";
 14 | import AdminTagList from "../views/AdminTagList.vue";
 15 | 
 16 | Vue.use(VueRouter);
 17 | 
 18 | const routes = [
 19 |   {
 20 |     path: "/",
 21 |     name: "home",
 22 |     component: Home
 23 |   },
 24 |   {
 25 |     path: "/admin",
 26 |     name: "admin",
 27 |     component: Admin,
 28 |     beforeEnter(to, from, next) {
 29 |       let currentUser = JSON.parse(window.localStorage.currentUser);
 30 |       if(currentUser && currentUser.admin) {
 31 |         next();
 32 |       } else {
 33 |         next("/");
 34 |       }
 35 |     },
 36 |     children: [
 37 |       {
 38 |         path: "videos",
 39 |         name: "admin-video-list",
 40 |         component: AdminVideoList,
 41 |       },
 42 |       {
 43 |         path: "users",
 44 |         name: "admin-user-list",
 45 |         component: AdminUserList
 46 |       },
 47 |       {
 48 |         path: "videos/:id/edit",
 49 |         name: "admin-video-edit",
 50 |         component: AdminVideoEdit,
 51 |         params: true,
 52 |       },
 53 |       {
 54 |         path: "video/new",
 55 |         name: "admin-video-create",
 56 |         component: AdminVideoCreate
 57 |       },
 58 |       {
 59 |         path: "videos/:id/show",
 60 |         name: "admin-video-show",
 61 |         component: AdminVideoShow,
 62 |         params: true,
 63 |       },
 64 |       {
 65 |         path: "tags",
 66 |         name: "admin-tag-list",
 67 |         component: AdminTagList,
 68 |       }
 69 |     ]
 70 |   },
 71 |   {
 72 |     path: '/login',
 73 |     name: 'user-login',
 74 |     component: UserLogin
 75 |   },
 76 |   {
 77 |     path: '/registration',
 78 |     name: 'user-registration',
 79 |     component: UserRegistration
 80 |   },
 81 |   {
 82 |     path: "/about",
 83 |     name: "about",
 84 |     // route level code-splitting
 85 |     // this generates a separate chunk (about.[hash].js) for this route
 86 |     // which is lazy-loaded when the route is visited.
 87 |     component: () =>
 88 |       import(/* webpackChunkName: "about" */ "../views/About.vue")
 89 |   },
 90 |   {
 91 |     path: "/video/:id",
 92 |     name: "video-watch",
 93 |     component: VideoWatch,
 94 |     params: true
 95 |   },
 96 |   {
 97 |     path: "/tag/:id",
 98 |     name: "tag",
 99 |     component: TagVideoList,
100 |     params: true
101 |   }
102 | ];
103 | 
104 | const router = new VueRouter({
105 |   routes
106 | });
107 | 
108 | export default router;
109 | 


--------------------------------------------------------------------------------
/src/services/api.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | 
 3 | export default () => {
 4 |   let currentUserString = window.localStorage.currentUser;
 5 |   let currentUser = currentUserString ? JSON.parse(currentUserString) : '';
 6 |   return axios.create({
 7 |     baseURL: 'http://localhost:3000/api',
 8 |     withCredentials: false,
 9 |     headers: {
10 |       Accept: "application/json",
11 |       "Content-Type": "application/json",
12 |       Authorization: currentUser && currentUser.token
13 |     }
14 |   });
15 | }


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Vuex from "vuex";
 3 | import snackbarModule from './snackbar';
 4 | import tagsModule from './tags';
 5 | import videosModule from './videos';
 6 | import usersModule from './users';
 7 | 
 8 | Vue.use(Vuex);
 9 | 
10 | export default new Vuex.Store({
11 |   modules: {
12 |     snackbar: snackbarModule,
13 |     tags: tagsModule,
14 |     videos: videosModule,
15 |     users: usersModule,
16 |   },
17 | });
18 | 


--------------------------------------------------------------------------------
/src/store/snackbar.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   namespaced: true,
 3 |   state: {
 4 |     snackbars: []
 5 |   },
 6 |   mutations: {
 7 |     SET_SNACKBAR(state, snackbar) {
 8 |       state.snackbars = state.snackbars.concat(snackbar);
 9 |     },
10 |   },
11 |   actions: {
12 |     setSnackbar({commit}, snackbar) {
13 |       snackbar.showing = true;
14 |       snackbar.color = snackbar.color || 'success';
15 |       commit('SET_SNACKBAR', snackbar);
16 |     },
17 |   },
18 |   getters: {},
19 |   modules: {}
20 | }


--------------------------------------------------------------------------------
/src/store/tags.js:
--------------------------------------------------------------------------------
 1 | import Api from "@/services/api";
 2 | 
 3 | export default {
 4 |   namespaced: true,
 5 |   state: {
 6 |     tags: []
 7 |   },
 8 |   mutations: {
 9 |     SET_TAGS(state, tags) {
10 |       state.tags = tags;
11 |     },
12 |     CREATE_TAG(state, {tag}) {
13 |       state.tags = state.tags.concat(tag);
14 |     },
15 |     UPDATE_TAG_NAME(state, {tag}) {
16 |       let tagToUpdate = state.tags.find(t => t.id == tag.id)
17 |       tagToUpdate.name = tag.name
18 |     },
19 |     DELETE_TAG(state, {tag}) {
20 |       state.tags = state.tags.filter(t => t.id != tag.id)
21 |     },
22 |     CONNECT_TAG_TO_VIDEO(state, {video, tag}) {
23 |       video.tag_ids = video.tag_ids.concat(tag.id.toString());
24 |       tag.video_ids = tag.video_ids.concat(video.id.toString());
25 |     },
26 |     DISCONNECT_TAG_FROM_VIDEO(state, {video, tag}) {
27 |       video.tag_ids = video.tag_ids.filter(t_id => t_id != tag.id);
28 |       tag.video_ids = tag.video_ids.filter(v_id => v_id != video.id);
29 |     },
30 |   },
31 |   actions: {
32 |     async loadAll({commit, dispatch}) {
33 |       let response = await Api().get('/tags');
34 |       let tags = response.data.data;
35 |       tags.forEach(t => {
36 |         t.attributes.id = t.id;
37 |         t.attributes.video_ids = t.relationships.videos.data.map(v => v.id);
38 |       });
39 |       commit('SET_TAGS', tags.map(t => t.attributes));
40 |     },
41 |     connectToVideo({commit}, {video, tag}) {
42 |       Api().post('/video_tags', {
43 |         video_id: video.id,
44 |         tag_id: tag.id
45 |       });
46 |       commit('CONNECT_TAG_TO_VIDEO', {video, tag});
47 |     },
48 |     disconnectTagFromVideo({commit}, {video, tag}) {
49 |       Api().post('video_tags/delete', {
50 |         video_id: video.id,
51 |         tag_id: tag.id
52 |       });
53 |       commit('DISCONNECT_TAG_FROM_VIDEO', {video, tag});
54 |     },
55 |     async create({commit}, {name}) {
56 |       let response = await Api().post('/tags', {name});
57 |       let createdTag = response.data.data.attributes;
58 |       createdTag.id = response.data.data.id;
59 |       createdTag.video_ids = [];
60 |       commit('CREATE_TAG', {tag: createdTag});
61 |       return createdTag;
62 |     },
63 |     async updateName({commit}, {tag}) {
64 |       Api().put(`/tags/${tag.id}`, tag)
65 |       commit('UPDATE_TAG_NAME', {tag});
66 |     },
67 |     delete({commit}, {tag}) {
68 |       Api().delete(`/tags/${tag.id}`);
69 |       commit('DELETE_TAG', {tag})
70 |     }
71 |   },
72 |   getters: {
73 |     get: state => id => {
74 |       return state.tags.find(t => t.id == id)
75 |     },
76 |   }
77 | }


--------------------------------------------------------------------------------
/src/store/users.js:
--------------------------------------------------------------------------------
 1 | import Api from "@/services/api";
 2 | import Vue from 'vue';
 3 | 
 4 | export default {
 5 |   namespaced: true,
 6 |   state: {
 7 |     users: [],
 8 |     currentUser: {}
 9 |   },
10 |   mutations: {
11 |     SET_PLAYED_VIDEOS(state, playedVideos) {
12 |       Vue.set(state.currentUser, 'playedVideos', playedVideos);
13 |     },
14 |     SET_USERS(state, users) {
15 |       state.users = users;
16 |     },
17 |     MARK_VIDEO_PLAYED(state, videoId) {
18 |       let playedVideos = state.currentUser.playedVideos.concat(videoId);
19 |       state.currentUser.playedVideos = playedVideos;
20 |     },
21 |     LOGOUT_USER(state) {
22 |       state.currentUser = {}
23 |       window.localStorage.currentUser = JSON.stringify({});
24 |     },
25 |     SET_CURRENT_USER(state, user) {
26 |       state.currentUser = user;
27 |       window.localStorage.currentUser = JSON.stringify(user);
28 |     },
29 |   },
30 |   actions: {
31 |     async loadAll({commit}) {
32 |       let response = await Api().get('/users');
33 |       let users = response.data.data;
34 |       commit('SET_USERS', users.map(u => u.attributes));
35 |     },
36 |     async loadCurrent({commit, dispatch}) {
37 |       let user = JSON.parse(window.localStorage.currentUser);
38 |       commit('SET_CURRENT_USER', user);
39 |       dispatch('loadPlayedVideos', user.id);
40 |     },
41 |     async loadPlayedVideos({commit}, userId) {
42 |       let response = await Api().get(`users/${userId}`);
43 |       let user = response.data.data.attributes;
44 |       commit('SET_PLAYED_VIDEOS', user.played_video_ids)
45 |     },
46 |     markVideoPlayed({commit, state}, videoId) {
47 |       if(state.currentUser.name){
48 |         commit('MARK_VIDEO_PLAYED', videoId);
49 |         Api().post(`/video_plays`, {
50 |           video_id: videoId
51 |         });
52 |       }
53 |     },
54 |     logout({commit}) {
55 |       commit('LOGOUT_USER');
56 |     },
57 |     async login({commit, dispatch}, loginInfo) {
58 |       try {
59 |         let response = await Api().post('/sessions', loginInfo);
60 |         let user = response.data.data.attributes;
61 | 
62 |         commit('SET_CURRENT_USER', user);
63 |         dispatch('loadPlayedVideos', user.id);
64 |         return user;
65 |       } catch {
66 |         return {error: "Email/password combination was incorrect.  Please try again."}
67 |       }   
68 |     },
69 |     async register({commit, dispatch}, registrationInfo) {
70 |       try {
71 |         let response = await Api().post('/users', registrationInfo);
72 |         let user = response.data.data.attributes;
73 | 
74 |         commit('SET_CURRENT_USER', user);
75 |         dispatch('loadPlayedVideos', user.id);
76 |         return user;
77 |       } catch {
78 |         return { error: "There was an error.  Please try again." }
79 |       }
80 |     },
81 |   },
82 |   getters: {
83 |     playedVideos: state => {
84 |       return state.currentUser.playedVideos || [];
85 |     },
86 |     videoIsPlayed: (state, getters) => videoId => {
87 |       return getters.playedVideos.includes(videoId)
88 |     }
89 |   }
90 | }


--------------------------------------------------------------------------------
/src/store/videos.js:
--------------------------------------------------------------------------------
 1 | import Api from "@/services/api";
 2 | 
 3 | export default {
 4 |   namespaced: true,
 5 |   state: {
 6 |     videos: [],
 7 |   },
 8 |   mutations: {
 9 |     SET_VIDEOS(state, videos) {
10 |       state.videos = videos;
11 |     },
12 |     ADD_VIDEO(state, video) {
13 |       let videos = state.videos.concat(video);
14 |       state.videos = videos;
15 |     },
16 |     DELETE_VIDEO(state, videoId){
17 |       let videos = state.videos.filter(v => v.id != videoId)
18 |       state.videos = videos;
19 |     },
20 |     EDIT_VIDEO(state, video) {
21 |       let v = state.videos.find(v => v.id == video.id)
22 |       v = video;
23 |     },
24 |   },
25 |   actions: {
26 |     async loadAll({commit, dispatch}){
27 |       let response = await Api().get('/videos');
28 |       let videos = response.data.data;
29 |       videos.forEach(v => {
30 |         v.attributes.tag_ids = v.relationships.tags.data.map(t => t.id);
31 |       });
32 | 
33 |       commit('SET_VIDEOS', videos.map(v => v.attributes));
34 |     },
35 |     async create({commit}, video) {
36 |       let response = await Api().post('/videos', video);
37 |       let savedVideo = response.data.data.attributes;
38 |       commit('ADD_VIDEO', savedVideo);
39 |       return savedVideo;
40 |     },
41 |     async delete({commit}, video) {
42 |       let response = await Api().delete(`/videos/${video.id}`);
43 |       if(response.status == 200 || response.status == 204){
44 |         commit('DELETE_VIDEO', video.id);
45 |       }
46 |     },
47 |     async edit({commit}, video) {
48 |       let response = await Api().put(`/videos/${video.id}`, video);
49 |       let newVideo = response.data.data.attributes;
50 |       commit('EDIT_VIDEO', newVideo);
51 |       return newVideo;
52 |     },
53 |   }
54 | }


--------------------------------------------------------------------------------
/src/utils/validations.js:
--------------------------------------------------------------------------------
 1 | let required = (propertyType) => { 
 2 |   return v => v && v.length > 0 || `You must input a ${propertyType}`
 3 | }
 4 | let minLength = (propertyType, minLength) => {
 5 |   return v => v && v.length >= minLength || `${propertyType} must be at least ${minLength} characters`
 6 | }
 7 | let maxLength = (propertyType, maxLength) => {
 8 |   return v => v && v.length <= maxLength || `${propertyType} must be less than ${maxLength} characters`
 9 | }
10 | 
11 | let emailFormat = () => {
12 |   let regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,24})+$/
13 |   return v => v && regex.test(v) || "Must be a valid email"
14 | }
15 | 
16 | export default {
17 |   required,
18 |   minLength,
19 |   maxLength,
20 |   emailFormat
21 | }


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/views/Admin.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-container>
 3 |     <v-tabs>
 4 |       <v-tab to="/admin/videos">Videos</v-tab>
 5 |       <v-tab to="/admin/tags">Tags</v-tab>
 6 |       <v-tab to="/admin/users">Users</v-tab>
 7 |     </v-tabs>
 8 |     <router-view></router-view>
 9 |   </v-container>
10 | </template>
11 | 
12 | <script>
13 |   export default {
14 |     
15 |   }
16 | </script>
17 | 
18 | <style lang="scss" scoped>
19 | 
20 | </style>


--------------------------------------------------------------------------------
/src/views/AdminTagList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="flex-table">
  4 |       <div>Name</div>
  5 |       <div># videos</div>
  6 |       <div></div>
  7 |     </div>
  8 |     <div v-for="tag in tags" :key="tag.id" class="flex-table">
  9 |       <div>
 10 |         <div v-if="tagEditingId == tag.id">
 11 |           <v-text-field v-model="tag.name"
 12 |                         :id="`tag-edit-${tag.id}`"
 13 |                         @blur="updateTagName(tag)"
 14 |                         @keydown.enter="updateTagName(tag)" />
 15 |         </div>
 16 |         <div v-else @click="setToEditing(tag)">
 17 |           {{tag.name}}
 18 |         </div>
 19 |       </div>
 20 |       <div>
 21 |         <router-link :to="{ name: 'tag', params: { id: tag.id }}">
 22 |           {{tag.video_ids.length}}
 23 |         </router-link>
 24 |       </div>
 25 |       <div class="actions">
 26 |         <v-btn x-small @click="setToEditing(tag)">Edit</v-btn>
 27 |         <v-btn x-small @click="deleteTag(tag)">Delete</v-btn>
 28 |       </div>
 29 |     </div>
 30 |     <div v-if="!isEditingNewTag">
 31 |       <v-btn @click="startNewTag()">Add Tag</v-btn>
 32 |     </div>
 33 |     <div v-else>
 34 |       <v-text-field v-model="newTagName"
 35 |                     :id="`new-tag-name`"
 36 |                     @blur="createTag()"
 37 |                     @keydown.enter="createTag()" />
 38 |     </div>
 39 |   </div>
 40 | </template>
 41 | 
 42 | <script>
 43 | import { mapState } from 'vuex';
 44 |   export default {
 45 |     data() {
 46 |       return {
 47 |         tagEditingId: '',
 48 |         isEditingNewTag: false,
 49 |         newTagName: '',
 50 |       }
 51 |     },
 52 |     computed: {
 53 |       ...mapState({
 54 |         tags: state => state.tags.tags
 55 |       })
 56 |     },
 57 |     methods: {
 58 |       setToEditing(tag) {
 59 |         this.tagEditingId = tag.id;
 60 | 
 61 |         setTimeout(()=> {
 62 |           document.getElementById(`tag-edit-${tag.id}`).focus()
 63 |         }, 1)
 64 |       },
 65 |       updateTagName(tag) {
 66 |         this.$store.dispatch('tags/updateName', {tag})
 67 | 
 68 |         this.tagEditingId = ''
 69 |       },
 70 |       deleteTag(tag) {
 71 |         let confirmed = confirm(`Are you sure you want to delete tag ${tag.name}? It is connected to ${tag.video_ids.length} videos.`)
 72 |         if(confirmed){
 73 |           this.$store.dispatch('tags/delete', {tag});
 74 |         }
 75 |       },
 76 |       startNewTag(){
 77 |         this.isEditingNewTag = true;
 78 | 
 79 |         setTimeout(()=> {
 80 |           document.getElementById(`new-tag-name`).focus()
 81 |         }, 1)
 82 |       },
 83 |       createTag(){
 84 |         if(this.newTagName.length > 0) {
 85 |           this.$store.dispatch('tags/create', {name: this.newTagName})
 86 |           this.newTagName = ''
 87 |         }
 88 |         this.isEditingNewTag = false
 89 |       }
 90 |     }
 91 |   }
 92 | </script>
 93 | 
 94 | <style lang="scss" scoped>
 95 |   .flex-table {
 96 |     display: grid;
 97 |     grid-template-columns: repeat(auto-fill, 33%);
 98 |     padding: 10px;
 99 |     border-bottom: 1px black solid;
100 | 
101 |     &:nth-of-type(2n) {
102 |       background-color: #dedede;
103 |     }
104 | 
105 |     .actions {
106 |       * {
107 |         margin-right: 10px
108 |       }
109 |     }
110 |   }
111 | </style>


--------------------------------------------------------------------------------
/src/views/AdminUserList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div v-for="user in users" :key="user.id">
 4 |       {{user.name}} <v-btn x-small @click="loginUser(user)">Login</v-btn>
 5 |     </div>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 |   import { mapState } from 'vuex';
11 | 
12 |   export default {
13 |     computed: {
14 |       ...mapState({
15 |         users: s => s.users.users
16 |       })
17 |     },
18 |     mounted(){
19 |       this.$store.dispatch("users/loadAll")
20 |     },
21 |     methods: {
22 |       loginUser(user){
23 |         this.$store.dispatch('users/login', user)
24 |       }
25 |     }
26 |   }
27 | </script>
28 | 
29 | <style lang="scss" scoped>
30 | 
31 | </style>


--------------------------------------------------------------------------------
/src/views/AdminVideoCreate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-container>
 3 |     <v-row>
 4 |       <v-col md="3" cols="12">
 5 |         <h1>Video Create Page</h1>
 6 |         <VideoEditForm :video="video" :saveVideo="createVideo" buttonText="Create Video" />
 7 |       </v-col>
 8 |       <v-col md="9" cols="12">
 9 |         <VideoListVideo :video="video" />
10 |       </v-col>
11 |     </v-row>
12 |   </v-container>
13 | </template>
14 | 
15 | <script>
16 |   import VideoListVideo from '@/components/VideoListVideo';
17 |   import VideoEditForm from '@/components/VideoEditForm.vue';
18 | 
19 |   export default {
20 |     data() {
21 |       return {
22 |         video: {}
23 |       }
24 |     },
25 |     components: {
26 |       VideoListVideo,
27 |       VideoEditForm,
28 |     },
29 |     methods: {
30 |       async createVideo() {
31 |         let video = await this.$store.dispatch('videos/create', this.video);
32 |         this.$store.dispatch('snackbar/setSnackbar', {text: `You have successfully created a new video, ${video.name}.`});
33 |         this.$router.push({ name: 'video-watch', params: {id: video.id}});
34 |       }
35 |     },
36 |   }
37 | </script>
38 | 
39 | <style lang="scss" scoped>  
40 | </style>


--------------------------------------------------------------------------------
/src/views/AdminVideoEdit.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-container>
 3 |     <VideoEditForm :video="video" :saveVideo="saveVideo" buttonText="Save Video" />
 4 |   </v-container>
 5 | </template>
 6 | 
 7 | <script>
 8 |   import { mapState } from 'vuex';
 9 |   import VideoEditForm from '@/components/VideoEditForm.vue';
10 | 
11 |   export default {
12 |     components: {
13 |       VideoEditForm,
14 |     },
15 |     computed: {
16 |       ...mapState({
17 |         videos: state => state.videos.videos
18 |       }),
19 |       video(){
20 |         return this.videos.find(v => v.id == this.$route.params.id) || {};
21 |       }
22 |     },
23 |     methods: {
24 |       async saveVideo() {
25 |         let video = await this.$store.dispatch('videos/edit', this.video);
26 |         this.$store.dispatch('snackbar/setSnackbar', {text: `You have successfully edited your video, ${video.name}.`});
27 |         this.$router.push({name: 'admin-video-list'});
28 |       },
29 |     },
30 |   }
31 | </script>
32 | 
33 | <style lang="scss" scoped>
34 | 
35 | </style>


--------------------------------------------------------------------------------
/src/views/AdminVideoList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-container>
 3 |     <h1>Video List</h1>
 4 |     <v-btn text to="/admin/video/new">Add Video</v-btn>
 5 | 
 6 |     <div class="flex-table">
 7 |       <div>Name</div>
 8 |       <div>Description</div>
 9 |       <div>Actions</div>
10 |     </div>
11 |     <div v-for="video in videos" :key="video.id" class="flex-table">
12 |       <div>{{ video.name }}</div>
13 |       <div>{{ video.description | abbreviate }}</div>
14 |       <div class="actions">
15 |         <router-link :to="{ name: 'video-watch', params: {id: video.id }}">Watch</router-link> 
16 |         <router-link :to="{ name: 'admin-video-show', params: {id: video.id}}">Show</router-link>
17 |         <router-link :to="{ name: 'admin-video-edit', params: {id: video.id}}">Edit</router-link>
18 |         <v-btn x-small @click="deleteVideo(video)">Delete</v-btn>
19 |       </div>
20 |     </div>
21 |   </v-container>
22 | </template>
23 | 
24 | <script>
25 |   import { mapState } from 'vuex';
26 |   export default {
27 |     computed: {
28 |       ...mapState({
29 |         videos: state => state.videos.videos
30 |       })
31 |     },
32 |     filters: {
33 |       abbreviate(text) {
34 |         if(text){
35 |           text = text.replace('<p>', '');
36 |           return text.slice(0, 50);
37 |         }
38 |       }
39 |     },
40 |     methods: {
41 |       deleteVideo(video) {
42 |         let response = confirm(`Are you sure you want to delete ${video.name}`)
43 |         if(response){
44 |           this.$store.dispatch('videos/delete', video);
45 |           this.$store.dispatch('snackbar/setSnackbar', {text: `You have successfully deleted your video, ${video.name}.`});
46 |         }
47 |       }
48 |     }
49 |   }
50 | </script>
51 | 
52 | <style lang="scss" scoped>
53 |   .flex-table {
54 |     display: grid;
55 |     grid-template-columns: repeat(auto-fill, 33%);
56 |     padding: 10px;
57 |     border-bottom: 1px black solid;
58 | 
59 |     &:nth-of-type(2n) {
60 |       background-color: #dedede;
61 |     }
62 | 
63 |     .actions {
64 |       * {
65 |         padding-right: 15px
66 |       }
67 |     }
68 |   }
69 | </style>


--------------------------------------------------------------------------------
/src/views/AdminVideoShow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="display-1 pt-3">{{video.name}}</div>
 4 |     <div v-html="video.description"></div>
 5 | 
 6 |     <v-combobox :items="tags" 
 7 |                     item-text="name" 
 8 |                     v-model="videoTags" 
 9 |                     multiple
10 |                     chips
11 |                     deletable-chips
12 |                     hide-selected
13 |                     return-object>
14 |     </v-combobox>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 |   import { mapState, mapGetters } from 'vuex';
20 |   import _ from 'lodash';
21 | 
22 |   export default {
23 |     computed: {
24 |       ...mapState({
25 |         videos: state => state.videos.videos,
26 |         tags: state => state.tags.tags
27 |       }),
28 |       ...mapGetters({
29 |         getTag: 'tags/get'
30 |       }),
31 |       video(){
32 |         return this.videos.find(v => v.id == this.$route.params.id) || {};
33 |       },
34 |       videoTags: {
35 |         get(){
36 |           let tagIds = this.video.tag_ids;
37 |           return tagIds && tagIds.map(id => this.getTag(id));
38 |         },
39 |         async set(newTags) {
40 |           let createdTag = newTags.find(t => typeof t == 'string')
41 |           if(createdTag){
42 |             createdTag = await this.$store.dispatch('tags/create', {name: createdTag});
43 |             this.$store.dispatch('tags/connectToVideo', {tag: createdTag, video: this.video})
44 |           } else {
45 |             let addedTags = _.differenceBy(newTags, this.videoTags, 'id');
46 |             let removedTags = _.differenceBy(this.videoTags, newTags, 'id');
47 |             
48 |             if(addedTags.length > 0) {
49 |               this.$store.dispatch('tags/connectToVideo', {tag: addedTags[0], video: this.video})
50 |             }
51 |             if(removedTags.length > 0) {
52 |               this.$store.dispatch('tags/disconnectFromVideo', {tag: removedTags[0], video: this.video})
53 |             }
54 |           }
55 |         }
56 |       }
57 |     }
58 |   }
59 | </script>
60 | 
61 | <style lang="scss" scoped>
62 | 
63 | </style>


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <div class="display-4 ma-4 d-flex justify-center">
 4 |       All Videos
 5 |     </div>
 6 | 
 7 |     <div class="d-flex flex-wrap">
 8 |       <div v-for="video in videos" :key="video.name">
 9 |         <VideoListVideo :video="video"></VideoListVideo>
10 |       </div>
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | import { mapState } from 'vuex';
17 | import VideoListVideo from '@/components/VideoListVideo';
18 | 
19 | export default {
20 |   name: "home",
21 |   components: {
22 |     VideoListVideo
23 |   },
24 |   methods: {},
25 |   computed: {
26 |     ...mapState({
27 |       videos: state => state.videos.videos
28 |     }),
29 |   }
30 | };
31 | </script>
32 | 
33 | <style scoped lang="scss">
34 | </style>


--------------------------------------------------------------------------------
/src/views/TagVideoList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1 class="display-3 ma-4 d-flex justify-center">
 4 |       Videos with Tag "{{ tag.name }}"
 5 |     </h1>
 6 | 
 7 |     <div class="d-flex flex-wrap">
 8 |       <div v-for="video in videosOnTag" :key="video.id">
 9 |         <VideoListVideo :video="video"></VideoListVideo>
10 |       </div>
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | import { mapGetters, mapState } from 'vuex'
17 | import VideoListVideo from '@/components/VideoListVideo'
18 | 
19 | export default {
20 |   components: {
21 |     VideoListVideo
22 |   },
23 |   computed: {
24 |     ...mapState({
25 |       videos: state => state.videos.videos
26 |     }),
27 |     ...mapGetters({
28 |       getTag: 'tags/get'
29 |     }),
30 |     tag(){
31 |       return this.getTag(this.$route.params.id)
32 |     },
33 |     videosOnTag(){
34 |       return this.videos.filter(v => this.tag.video_ids.includes(v.id.toString()))
35 |     }
36 |   }  
37 | }
38 | </script>


--------------------------------------------------------------------------------
/src/views/UserLogin.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-container>
 3 |     <h1>Login</h1>
 4 |     <UserAuthForm :submitForm="loginUser" buttonText="Login" />
 5 |   </v-container>
 6 | </template>
 7 | 
 8 | <script>
 9 |   import UserAuthForm from "@/components/UserAuthForm";
10 | 
11 |   export default {
12 |     components: {
13 |       UserAuthForm
14 |     },
15 |     methods: {
16 |       async loginUser(loginInfo) {
17 |         let user = await this.$store.dispatch('users/login', loginInfo);
18 |         if(user.error){
19 |           this.$store.dispatch('snackbar/setSnackbar', {color: 'error', text: user.error});
20 |         } else {
21 |           this.$store.dispatch('snackbar/setSnackbar', {text: 'Thank you for signing in, ' + user.name});
22 |           if(user.admin){
23 |             this.$router.push('/admin/videos');
24 |           } else {
25 |             this.$router.push('/');
26 |           }
27 |         }
28 |       }
29 |     },
30 |   }
31 | </script>
32 | 
33 | <style lang="scss" scoped>
34 | 
35 | </style>


--------------------------------------------------------------------------------
/src/views/UserRegistration.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-container>
 3 |     <h1>Register</h1>
 4 |     <UserAuthForm :submitForm="registerUser" buttonText="Register" hasName=true />
 5 |   </v-container>
 6 | </template>
 7 | 
 8 | <script>
 9 |   import UserAuthForm from '@/components/UserAuthForm.vue';
10 |   export default {
11 |     components: {
12 |       UserAuthForm
13 |     },
14 |     methods: {
15 |       async registerUser(registrationInfo){
16 |         let user = await this.$store.dispatch('users/register', registrationInfo);
17 |         if(user.error){
18 |           this.$store.dispatch('snackbar/setSnackbar', {color: 'error', text: user.error});
19 |         } else {
20 |           this.$store.dispatch('snackbar/setSnackbar', {text: 'Welcome to our app, ' + user.name});
21 |           this.$router.push("/");
22 |         }
23 |       }
24 |     }
25 |   }
26 | </script>
27 | 
28 | <style lang="scss" scoped>
29 | 
30 | </style>


--------------------------------------------------------------------------------
/src/views/VideoWatch.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-container>
 3 |     <v-row>
 4 |       <v-col md="9" cols="12">
 5 |         <video-player ref="videoPlayer"
 6 |                       :options="playerOptions"
 7 |                       @ended="markPlayed">
 8 |         </video-player>
 9 |       </v-col>
10 |       <v-col md="3" cols="12">
11 |         <div class="display-1">{{video.name}}</div>
12 | 
13 |         <div class="green--text" v-if="isPlayed(video.id)">
14 |           <font-awesome-icon icon="check" /> 
15 |           Played
16 |         </div>
17 |         <div v-else>
18 |           <v-btn x-small @click="markPlayed" v-if="currentUser.name">
19 |             Mark Played
20 |           </v-btn>
21 |         </div>
22 | 
23 |         <div v-html="video.description"></div>
24 |         
25 |         <span v-for="tag_id in video.tag_ids" :key="tag_id">
26 |           <v-btn :to="{ name: 'tag', params: {id: tag_id}}"
27 |                 color="green lighten-2"
28 |                 class="mr-1 mb-2">
29 |             {{ getTag(tag_id) && getTag(tag_id).name }}
30 |           </v-btn>
31 |         </span>
32 |       </v-col>
33 |     </v-row>
34 |   </v-container>
35 | </template>
36 | 
37 | <script>
38 | import 'video.js/dist/video-js.css'
39 |  
40 | import { videoPlayer } from 'vue-video-player'
41 | import { mapGetters, mapState } from 'vuex';
42 | 
43 | export default {
44 |   components: {
45 |     videoPlayer
46 |   },
47 |   computed: {
48 |     video(){
49 |       return this.videos.find(vid => vid.id == this.$route.params.id) || {}
50 |     },
51 |     ...mapGetters({
52 |       getTag: 'tags/get',
53 |       isPlayed: 'users/videoIsPlayed'
54 |     }),
55 |     ...mapState({
56 |       videos: state => state.videos.videos,
57 |       currentUser: state => state.users.currentUser
58 |     }),
59 |     playerOptions(){
60 |       return {
61 |         language: 'en',
62 |         playbackRates: [0.7, 1.0, 1.5, 2.0, 2.5, 3.0],
63 |         sources: [{
64 |           type: "video/mp4",
65 |           src: this.video.videoUrl
66 |         }],
67 |         poster: this.video.thumbnail,
68 |         fluid: true
69 |       }
70 |     }
71 |   },
72 |   methods: {
73 |     markPlayed(){
74 |       this.$store.dispatch('users/markVideoPlayed', this.video.id)
75 |     }
76 |   }
77 | }
78 | </script>
79 | 
80 | <style>
81 | </style>


--------------------------------------------------------------------------------