Migrated all code to components, optimized methods and data flow, bum…

…ped version to 0.0.3

package.json

@@ -1,6 +1,6 @@
 {
   "name": "newswire",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "author": "Pieter Montoulieu <pi.mont@icloud.com>",
   "description": "A modern desktop frontend for live cable news streams",
   "license": null,

src/renderer/assets/sass/main.scss

@@ -1,12 +1,13 @@
 $color-primary: #49b884;
 $color-dark: #262626;
 $color-light: #fafafa;
+$color-red: #f33d35;
 $color-gray: darken($color-light, 50%);
 
 $theme-colors: (
   primary: $color-primary,
   dark: $color-dark,
-  danger: #f33d35,
+  danger: $color-red,
   gray: $color-gray,
 );
 
@@ -53,8 +54,10 @@ button {
 
 
   &:hover,
-  &:focus {
+  &:focus,
+  &.active {
     background: darken($color-light, 80%);
+    border-color: $color-dark;
     outline: 0;
   }
 }

src/renderer/components/ChannelList.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <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">
+      <b-list-group-item button v-for="(options, channel) in channels" :key="channel.id" v-on:click="changeChannel(channel)" v-bind:class="{ active: channel == currentChannel.name }" 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>
@@ -10,14 +10,140 @@
 </template>
 
 <script>
+const rp = require('request-promise')
+
 export default {
   name: 'channel-list',
   props: {
-    'channels': Object
+    currentChannel: Object
+  },
+  mounted () {
+    this.changeChannel(this.currentChannel.name)
   },
   methods: {
-    changeChannel (channel) {
+    emitChannel (channel) {
       this.$emit('change-channel', channel)
+    },
+    changeChannel (channel) {
+      console.log('----------------------------------------------------------------------------------------------------------------')
+      console.log('> Changing to: ' + channel)
+      let url = this.getChannelUrl(channel)
+      this.currentChannel.state = 'loading'
+      console.log('> Loading')
+      this.getStream(url)
+    },
+    getChannelUrl (channel) {
+      console.log('> Getting channel URL')
+      this.currentChannel.url = this.channels[channel].url
+      this.currentChannel.logo = this.channels[channel].logo.url
+      this.currentChannel.name = channel
+      return this.channels[channel].url
+    },
+    getStream (url) {
+      let self = this
+      console.log('> Scraping URL: ' + url)
+      let options = {
+        uri: encodeURI(url)
+      }
+      rp(options)
+        .then(function (html) {
+          // success
+          // console.log(html)
+          // let streamData = c('#myElement', html).next()[0].children[0].children[0].data
+
+          let scrapedUrl = html.substring(
+            html.lastIndexOf('file: "') + 7,
+            html.lastIndexOf('",auto')
+          )
+
+          if (scrapedUrl) {
+            self.currentChannel.stream = scrapedUrl
+            self.$emit('open-stream', scrapedUrl)
+          }
+        })
+        .catch(function (err) {
+          // error
+          console.log(err)
+        })
+    }
+  },
+  data () {
+    return {
+      channels: {
+        'MSNBC': {
+          url: 'https://www.watchnews.pro/msnbc-news.html',
+          logo: {
+            url: 'static/svg/logo/msnbc.svg',
+            height: 22
+          },
+          favorite: false
+        },
+        'CNN': {
+          url: 'https://www.watchnews.pro/cnn-news.html',
+          logo: {
+            url: 'static/svg/logo/cnn.svg',
+            height: 26
+          },
+          favorite: false
+        },
+        'ABC News': {
+          url: 'https://www.watchnews.pro/abc-news.html',
+          logo: {
+            url: 'static/svg/logo/abc-news.svg',
+            height: 26
+          },
+          favorite: false
+        },
+        'CBS News': {
+          url: 'https://www.watchnews.pro/cbsn.html',
+          logo: {
+            url: 'static/svg/logo/cbs-news.svg',
+            height: 24
+          },
+          favorite: false
+        },
+        'Al Jazeera America': {
+          url: 'https://www.livenewsnow.com/american/al-jazeera-america.html',
+          logo: {
+            url: 'static/svg/logo/aljazeera.svg',
+            height: 30
+          },
+          favorite: false
+        },
+        'Bloomberg': {
+          url: 'https://www.watchnews.pro/bloomberg.html',
+          logo: {
+            url: 'static/svg/logo/bloomberg.svg',
+            height: 22
+          },
+          favorite: false
+        },
+
+        'The Weather Channel': {
+          url: 'https://www.watchnews.pro/the-weather-channel.html',
+          logo: {
+            url: 'static/svg/logo/weather-channel.svg',
+            height: 35
+          },
+          favorite: false
+        }
+
+        // These streams give 403 errors 🤔
+        // 'CNBC': {
+        //   url: 'https://www.watchnews.pro/cnbc.html',
+        //   logo: '',
+        //   favorite: false
+        // },
+        // 'Fox News': {
+        //   url: 'https://www.watchnews.pro/fox-news.html',
+        //   favorited: false
+        // },
+        // 'HLN': {
+        //   url: 'https://www.watchnews.pro/hln.html',
+        //   logo: 'static/svg/logo/weather-channel.svg',
+        //   favorite: false
+        // },
+      }
     }
   }
 }

src/renderer/components/Sidebar.vue

@@ -5,7 +5,7 @@
       <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"/>
+    <channel-list :currentChannel="currentChannel" :channels="channels" @open-stream="openStream"/>
     <!-- <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> -->
@@ -18,7 +18,8 @@ import ChannelList from '@/components/ChannelList'
 export default {
   name: 'sidebar',
   props: {
-    channels: Object
+    channels: Object,
+    currentChannel: Object
   },
   components: {
     ChannelList
@@ -30,8 +31,8 @@ export default {
     }
   },
   methods: {
-    handleChannelChange (channel) {
-      this.$emit('change-channel', channel)
+    openStream (stream) {
+      this.$emit('open-stream', stream)
     }
   }
 }

src/renderer/components/VideoPane.vue

@@ -4,8 +4,16 @@
     @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'">
+      <video
+        class="embed-responsive-item"
+        width="720"
+        height="480"
+        id="video"
+        autoplay
+        :controls="hovering ? 'controls' : false"
+        :poster="currentChannel.logo ? currentChannel.logo : false"
+      />
+      <div class="spinner-container text-center d-flex justify-content-center align-items-center" v-if="currentChannel.state != 'loaded'">
         <b-spinner variant="light" type="grow"></b-spinner>
       </div>
     </div>
@@ -16,9 +24,6 @@
 export default {
   name: 'video-pane',
   props: {
-    channels: Object,
-    loadingState: String,
-    currentStream: String,
     currentChannel: Object
   },
   data () {