Moving code into components, cleanup, adding version number from package

montoulieu · Apr 7, 2019 · 267b921 · 267b921
1 parent abe4c4f
commit 267b921
Show file tree

Hide file tree

Showing 6 changed files with 147 additions and 78 deletions.
diff --git a/src/main/index.js b/src/main/index.js
@@ -1,6 +1,11 @@
 'use strict'
 
-import { app, BrowserWindow } from 'electron'
+import { app, BrowserWindow, TouchBar } from 'electron'
+const { TouchBarLabel, TouchBarButton, TouchBarSpacer } = TouchBar
+
+const button = new TouchBarButton({
+  label: 'Test'
+})
 
 /**
  * Set `__static` path to static files in production
@@ -15,10 +20,13 @@ const winURL = process.env.NODE_ENV === 'development'
   ? `http://localhost:9080`
   : `file://${__dirname}/index.html`
 
+const touchBar = new TouchBar([
+  button,
+  new TouchBarLabel({ label: 'Label' }),
+  new TouchBarSpacer({ size: 'small' })
+])
+
 function createWindow () {
-  /**
-   * Initial window options
-   */
   mainWindow = new BrowserWindow({
     height: 600,
     width: 1420,
@@ -30,19 +38,20 @@ function createWindow () {
       webSecurity: false
     }
   })
+
   // const defaultRatio = 1.9 / 1
+  // mainWindow.setAspectRatio(defaultRatio)
+  // mainWindow.on('resize', () => {
+  //   const ratio = mainWindow.isFullScreen() ? 0 : defaultRatio
+  //   mainWindow.setAspectRatio(ratio)
+  // })
 
   mainWindow.loadURL(winURL)
-  // mainWindow.setAspectRatio(defaultRatio)
+  mainWindow.setTouchBar(touchBar)
 
   mainWindow.on('closed', () => {
     mainWindow = null
   })
-
-  // mainWindow.on('resize', () => {
-  //   const ratio = mainWindow.isFullScreen() ? 0 : defaultRatio
-  //   mainWindow.setAspectRatio(ratio)
-  // })
 }
 
 app.on('ready', createWindow)

diff --git a/src/renderer/assets/sass/main.scss b/src/renderer/assets/sass/main.scss
@@ -1,17 +1,23 @@
 $color-primary: #49b884;
-$color-dark: #1e1e1e;
+$color-dark: #262626;
 $color-light: #fafafa;
 $color-gray: darken($color-light, 50%);
 
 $theme-colors: (
   primary: $color-primary,
   dark: $color-dark,
+  danger: #f33d35,
   gray: $color-gray,
 );
 
 @import '~bootstrap/scss/bootstrap.scss';
 
+* {
+  cursor: default;
+}
+
 body {
+  user-select: none;
   background: $color-dark;
   color: $color-light;
   -webkit-font-smoothing: antialiased;
@@ -34,10 +40,17 @@ body {
   }
 }
 
+button {
+  cursor: default !important;
+}
+
 .list-group-item {
   background: darken($color-light, 85%);
   color: $color-light;
   border-radius: 0 !important;
+  height: 55px;
+  display: flex;
+
 
   &:hover,
   &:focus {
@@ -67,21 +80,9 @@ video {
     background-color: $color-dark;
     filter: saturate(0);
   }
+}
 
-  // &::-webkit-media-controls-timeline {
-  //   background-color: $color-gray;
-  // }
-
-  // &::-webkit-media-controls-volume-slider-container,
-  // &::-webkit-media-controls-volume-slider,
-  // &::-webkit-media-controls-seek-forward-button
-  // {
-  //   background-color: $color-gray;
-  // }
-
-  // &::-webkit-media-controls-current-time-display,
-  // &::-webkit-media-controls-time-remaining-display,
-  // &::-webkit-media-controls-mute-button  {
-  //   color: $color-gray
-  // }
+span.version {
+  font-size: 0.75rem;
+  display: inline-block;
 }
diff --git a/src/renderer/components/ChannelList.vue b/src/renderer/components/ChannelList.vue
@@ -1,6 +1,11 @@
 <template>
   <div>
-    Channel List
+    <b-list-group class="pt-1">
+      <b-list-group-item button v-for="(options, channel) in channels" :key="channel.id" v-on:click="changeChannel(channel)" class="py-0 pl-4">
+        <img :src="options.logo.url" v-if="options.logo.url" :height="options.logo.height">
+        <span class="label" v-if="!options.logo.url">{{channel}}</span>
+      </b-list-group-item>
+    </b-list-group>
   </div>
 </template>
 
@@ -9,6 +14,11 @@ export default {
   name: 'channel-list',
   props: {
     'channels': Object
+  },
+  methods: {
+    changeChannel (channel) {
+      this.$emit('change-channel', channel)
+    }
   }
 }
 </script>

diff --git a/src/renderer/components/Sidebar.vue b/src/renderer/components/Sidebar.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="col-md-3 order-1 px-0 pt-4 border-right border-dark text-left">
+    <header class="d-flex align-items-end pb-2">
+      <h1 class="text-light font-weight-800 letter-spacing-1 text-left pl-4 pt-3 mb-0 d-inline-block">Newswire</h1>
+      <span class="version bg-danger ml-2 mb-2 px-1 d-inline-block rounded">alpha {{ versionNumber }}</span>
+    </header>
+
+    <channel-list :channels="channels" @change-channel="handleChannelChange"/>
+    <!-- <div class="pt-3 pl-3">
+      <b-button v-b-modal.modal-1 size="sm" variant="outline-gray" class="mt-1"><img src="static/icons/settings.svg" height="24"></b-button>
+    </div> -->
+  </div>
+</template>
+
+<script>
+import ChannelList from '@/components/ChannelList'
+
+export default {
+  name: 'sidebar',
+  props: {
+    channels: Object
+  },
+  components: {
+    ChannelList
+  },
+  computed: {
+    versionNumber: function () {
+      var pjson = require('../../../package.json')
+      return pjson.version
+    }
+  },
+  methods: {
+    handleChannelChange (channel) {
+      this.$emit('change-channel', channel)
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/renderer/components/VideoPane.vue b/src/renderer/components/VideoPane.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="col-md-9 text-left order-2 px-0"
+    @mouseover="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <div class="embed-responsive embed-responsive-16by9 p-relative">
+      <video class="embed-responsive-item " width="720" height="480" id="video" autoplay :controls="hovering ? 'controls' : false" :poster="channels[currentChannel.name].logo.url ? channels[currentChannel.name].logo.url : false"></video>
+      <div class="spinner-container text-center d-flex justify-content-center align-items-center" v-if="loadingState != 'loaded'">
+        <b-spinner variant="light" type="grow"></b-spinner>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'video-pane',
+  props: {
+    channels: Object,
+    loadingState: String,
+    currentStream: String,
+    currentChannel: Object
+  },
+  data () {
+    return {
+      hovering: false
+    }
+  }
+}
+</script>
diff --git a/src/renderer/pages/Dashboard.vue b/src/renderer/pages/Dashboard.vue
@@ -2,60 +2,35 @@
   <div id="wrapper" :class="{ 'theme-dark': darkMode }">
     <b-container fluid class="">
       <div class="row">
-        <div class="col-md-9 text-left order-2 px-0"
-          @mouseover="hoveringVideo = true"
-          @mouseleave="hoveringVideo = false"
-        >
-          <div class="embed-responsive embed-responsive-16by9 p-relative">
-            <video class="embed-responsive-item " width="720" height="480" id="video" autoplay :controls="hoveringVideo ? 'controls' : false"></video>
-              <div class="spinner-container text-center d-flex justify-content-center align-items-center" v-if="loadingState != 'loaded'">
-              <b-spinner variant="light" type="grow"></b-spinner>
-            </div>
-          </div>
-          <!-- <div class="card bg-gray py-3" v-if="currentChannel.name">
-            <img :src="channels[currentChannel.name].logo.url" v-if="channels[currentChannel.name].logo.url" height="35">
-            <h2 class="text-primary" v-if="!channels[currentChannel.name].logo">{{ currentChannel.name }}</h2>
-          </div> -->
-        </div>
-        <div class="col-md-3 order-1 px-0 pt-4 border-right border-dark text-left">
-          <h1 class="text-light font-weight-800 letter-spacing-1 text-left pl-3 pt-1">Newswire</h1>
-          <b-list-group class="pt-1">
-            <b-list-group-item button v-for="(options, channel) in channels" :key="channel.id" v-on:click="changeChannel(channel)" class="py-3 pl-3">
-              <img :src="options.logo.url" v-if="options.logo.url" :height="options.logo.height">
-              <span class="label" v-if="!options.logo.url">{{channel}}</span>
-            </b-list-group-item>
-          </b-list-group>
-          <!-- <div class="pt-3 pl-3">
-            <b-button v-b-modal.modal-1 size="sm" variant="outline-gray" class="mt-1"><img src="static/icons/settings.svg" height="24"></b-button>
-          </div> -->
-        </div>
+        <video-pane
+          :channels="channels"
+          :loadingState="loadingState"
+          :currentStream="currentStream"
+          :currentChannel="currentChannel"
+        />
+        <sidebar :channels="channels" @change-channel="changeChannel"/>
       </div>
-      <!-- Modal Component -->
-      <!-- <b-modal id="modal-1" title="About"
-        size="lg"
-        header-bg-variant="gray"
-        body-bg-variant="gray"
-        footer-bg-variant="gray"
-        centered
-      >
-        <a href="#" v-on:click="open('https://pixelglitch.net')">pixel glitch llc</a>
-      </b-modal> -->
     </b-container>
   </div>
 </template>
 
 <script>
-  import ChannelList from '@/components/ChannelList'
+  import Sidebar from '@/components/Sidebar'
+  import VideoPane from '@/components/VideoPane'
+
   import Hls from 'hls.js'
 
   const rp = require('request-promise')
-  const { systemPreferences } = require('electron')
+  // const { systemPreferences } = require('electron')
 
   // const c = require('cheerio')
 
   export default {
     name: 'dashboard',
-    components: { ChannelList },
+    components: {
+      VideoPane,
+      Sidebar
+    },
     data () {
       return {
         loadingState: '',
@@ -138,14 +113,13 @@
           //   logo: 'static/svg/logo/weather-channel.svg',
           //   favorite: false
           // },
-        },
-        hoveringVideo: false
+        }
       }
     },
     mounted () {
       // let self = this
       this.changeChannel(this.currentChannel.name)
-      console.log('SystemPref: ' + systemPreferences)
+      // console.log('SystemPref: ' + systemPreferences)
     },
     computed: {
       darkMode: function () {
@@ -157,21 +131,22 @@
         this.$electron.shell.openExternal(link)
       },
       changeChannel (channel) {
-        this.loadingState = 'loading'
-        console.log(this.loadingState)
-        console.log('Changing to: ' + channel)
+        console.log('------------------------------------------------------------------------------------------------------------')
+        console.log('> Changing to: ' + channel)
         let url = this.getChannelUrl(channel)
+        this.loadingState = 'loading'
+        console.log('> Loading')
         this.getStream(url)
       },
       getChannelUrl (channel) {
-        console.log('Getting channel url')
+        console.log('> Getting channel URL')
         this.currentChannel.url = this.channels[channel].url
         this.currentChannel.name = channel
         return this.channels[channel].url
       },
       getStream (url) {
         let self = this
-        console.log('Scraping url: ' + url)
+        console.log('> Scraping url: ' + url)
         let options = {
           uri: encodeURI(url)
         }
@@ -207,12 +182,14 @@
           hls.on(Hls.Events.MEDIA_ATTACHED, function () {
             // console.log('video and hls.js are now bound together !')
             hls.loadSource(url)
-            console.log('Opened stream: ' + url)
+            console.log('> Opened stream: ' + url)
             hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
               // console.log('manifest loaded, found ' + data.levels.length + ' quality level')
               video.play()
               self.loadingState = 'loaded'
-              console.log('loaded')
+              console.log('> Loaded')
+              console.log('------------------------------------------------------------------------------------------------------------')
+              console.log('')
             })
           })
         }