Add murderder's page, cleanup.

layouts/default.vue

@@ -36,11 +36,11 @@
       app
     >
       <v-list>
-        <v-list-tile @click.native="right = !right">
+        <v-list-tile @click.native="right = !!right">
           <v-list-tile-action>
             <v-icon light>compare_arrows</v-icon>
           </v-list-tile-action>
-          <v-list-tile-title>Switch drawer (click me)</v-list-tile-title>
+          <v-list-tile-title>Future Chat</v-list-tile-title>
         </v-list-tile>
       </v-list>
     </v-navigation-drawer>

nuxt.config.js

@@ -20,8 +20,7 @@ module.exports = {
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
       {
         rel: 'stylesheet',
-        href:
-          'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons',
+        href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons',
       },
     ],
   },
@@ -44,7 +43,7 @@ module.exports = {
   */
   plugins: [
     '@/plugins/vuetify',
-    { src: '@/plugins/video-player-plugin.js', ssr: false, },
+    // { src: '@/plugins/video-player-plugin.js', ssr: false },
   ],
 
   /*
@@ -54,8 +53,9 @@ module.exports = {
     // Doc: https://axios.nuxtjs.org/usage
     '@nuxtjs/axios',
     '@nuxtjs/pwa',
-    [ '@nuxtjs/google-analytics', { id: 'UA-133753190-2' }, ],
+    [ '@nuxtjs/google-analytics', { id: 'UA-133753190-2' } ],
   ],
+
   /*
   ** Axios module configuration
   */

pages/murderder.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+
+    <v-layout
+      column
+    >
+      <v-flex>
+        <v-tabs
+          dark
+          slider-color="#2196f3"
+        >
+          <v-tab>
+            DISPATCH
+          </v-tab>
+          <v-tab>
+            ARCHIVE
+          </v-tab>
+        </v-tabs>
+      </v-flex>
+
+      <hr class="v-divider theme--light">
+
+      <v-flex class="px-3 py-2">
+        <v-card>
+          <v-responsive
+            :aspect-ratio="16/9"
+          >
+            <video
+              playsinline
+              id="myPlayer"
+              class="video-js vjs-default-skin"
+              width="50%"
+              controls
+              autoplay
+              muted
+              preload="auto"
+              data-setup='{ "aspectRatio":"16:9" }'
+              poster="/bitwave_cover.png"
+            >
+              <source
+                src="https://bitwave.tv/stream/murderder/index.m3u8"
+                type="application/x-mpegURL"
+              >
+            </video>
+          </v-responsive>
+        </v-card>
+      </v-flex>
+
+      <v-flex class="px-3">
+        <h2>STREAM TITLE</h2>
+      </v-flex>
+
+    </v-layout>
+
+  </div>
+</template>
+
+<script>
+  import videojs from 'video.js';
+
+  export default {
+    components: {
+
+    },
+
+    data() {
+      return {
+        player: null,
+        initialized: false,
+        streams: {
+          hls: 'https://bitwave.tv/stream/dispatch/',
+        },
+      }
+    },
+
+    computed: {
+
+    },
+
+    methods: {
+      playerInitialize(){
+        this.player = videojs('myPlayer', {
+          liveui: true,
+        });
+        this.initialized = true;
+      },
+
+      playerDispose(){
+        if (this.initialized) this.player.dispose();
+      },
+    },
+
+    mounted() {
+      // if (process.browser) window.videojs = require('video.js');
+      this.playerInitialize();
+
+      // window.playerEvents = this;
+      console.log('this is current player instance object:', this.player);
+    },
+
+    beforeDestroy() {
+      this.playerDispose();
+    },
+  }
+</script>

server/index.js

@@ -1,34 +1,44 @@
-const express = require('express')
-const consola = require('consola')
-const { Nuxt, Builder } = require('nuxt')
-const app = express()
-
-// Import and Set Nuxt.js options
-let config = require('../nuxt.config.js')
-config.dev = !(process.env.NODE_ENV === 'production')
-
-async function start() {
-  // Init Nuxt.js
-  const nuxt = new Nuxt(config)
-
-  const { host, port } = nuxt.options.server
-
-  // Build only in dev mode
-  if (config.dev) {
-    const builder = new Builder(nuxt)
-    await builder.build()
-  } else {
-    await nuxt.ready()
-  }
-
-  // Give nuxt middleware to express
-  app.use(nuxt.render)
-
-  // Listen the server
-  app.listen(port, host)
-  consola.ready({
-    message: `Server listening on http://${host}:${port}`,
-    badge: true
-  })
-}
-start()
+const express = require('express');
+const consola = require('consola');
+const { Nuxt, Builder } = require('nuxt');
+const app = express();
+
+// Import and Set Nuxt.js options
+let config = require('../nuxt.config.js');
+config.dev = !(process.env.NODE_ENV === 'production');
+
+async function start() {
+  // Init Nuxt.js
+  const nuxt = new Nuxt(config);
+
+  const { host, port } = nuxt.options.server;
+
+  // Build only in dev mode
+  if (config.dev) {
+    const builder = new Builder(nuxt);
+    await builder.build();
+  } else {
+    await nuxt.ready();
+  }
+
+  // Respond to API requests
+  /*app.use('/api', (req, res) => {
+    res.status(402);
+  });*/
+
+  // Give nuxt middleware to express
+  app.use(nuxt.render);
+
+  // Listen the server
+  app.listen(port, host);
+
+  // Show ready message
+  consola.ready({
+    message: `Server listening on http://${host}:${port}`,
+    badge: true
+  });
+
+}
+
+// Start web server
+start();