Show icons in build and remove unused items.

_scripts/build.js

@@ -17,14 +17,14 @@ if (platform == 'darwin') {
 
 const config = {
   appId: `io.freetubeapp.${name}`,
-  copyright: 'Copyleft ©2020 freetubeapp@protonmail.com',
+  copyright: 'Copyleft © 2020 freetubeapp@protonmail.com',
   // asar: false,
   // compression: 'store',
   productName,
   directories: {
     output: './build/',
   },
-  files: ['_icons/icon.*', './dist/**/*', '!./dist/web/**/*'],
+  files: ['_icons/**/*', './dist/**/*', '!./dist/web/**/*'],
   dmg: {
     contents: [
       {
@@ -46,7 +46,7 @@ const config = {
   },
   linux: {
     icon: '_icons/iconColor.png',
-    target: ['deb', 'rpm', 'zip', 'AppImage'],
+    target: ['deb'],
   },
   mac: {
     category: 'public.app-category.utilities',

_scripts/webpack.main.config.js

@@ -80,7 +80,7 @@ if (isDevMode) {
           },
           {
             from: path.join(__dirname, '../_icons'),
-            to: path.join(__dirname, '../dist/web/_icons'),
+            to: path.join(__dirname, '../dist/_icons'),
             globOptions: {
               ignore: ['.*'],
             },

package.json

@@ -101,7 +101,7 @@
   "productName": "FreeTube-Vue",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/mubaidr/vue-electron-template.git"
+    "url": "git+https://github.com/FreeTubeApp/FreeTube-Vue.git"
   },
   "scripts": {
     "build": "run-s rebuild:electron pack build-release",

src/renderer/components/ft-video-player/ft-video-player.js

@@ -220,9 +220,9 @@ export default Vue.extend({
         this.player.volume(this.volume)
         this.player.playbackRate(this.defaultPlayback)
 
-        this.player.vttThumbnails({
-          src: this.storyboardSrc
-        })
+        // this.player.vttThumbnails({
+        //   src: this.storyboardSrc
+        // })
 
         if (this.useDash) {
           this.dataSetup.plugins.httpSourceSelector = {

src/renderer/components/general-settings/general-settings.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import $ from 'jquery'
 import { mapActions } from 'vuex'
 import FtCard from '../ft-card/ft-card.vue'
 import FtSelect from '../ft-select/ft-select.vue'
@@ -16,6 +17,9 @@ export default Vue.extend({
   data: function () {
     return {
       title: 'General Settings',
+      showInvidiousInstances: false,
+      instanceNames: [],
+      instanceValues: [],
       backendNames: [
         'Invidious API',
         'Local API'
@@ -541,6 +545,9 @@ export default Vue.extend({
     }
   },
   computed: {
+    invidiousInstance: function () {
+      return this.$store.getters.getInvidiousInstance
+    },
     backendFallback: function () {
       return this.$store.getters.getBackendFallback
     },
@@ -563,6 +570,34 @@ export default Vue.extend({
       return this.$store.getters.getThumbnailPreference
     }
   },
+  mounted: function () {
+    const requestUrl = 'https://instances.invidio.us/instances.json'
+    $.getJSON(requestUrl, (response) => {
+      console.log(response)
+      const instances = response.filter((instance) => {
+        if (instance[0].includes('.onion') || instance[0].includes('.i2p')) {
+          return false
+        } else {
+          return true
+        }
+      })
+
+      this.instanceNames = instances.map((instance) => {
+        return instance[0]
+      })
+
+      this.instanceValues = instances.map((instance) => {
+        return instance[1].uri.replace(/\/$/, '')
+      })
+
+      this.showInvidiousInstances = true
+    }).fail((xhr, textStatus, error) => {
+      console.log(xhr)
+      console.log(textStatus)
+      console.log(requestUrl)
+      console.log(error)
+    })
+  },
   methods: {
     ...mapActions([
       'updateBackendFallback',
@@ -572,7 +607,8 @@ export default Vue.extend({
       'updateLandingPage',
       'updateRegion',
       'updateListType',
-      'updateThumbnailPreference'
+      'updateThumbnailPreference',
+      'updateInvidiousInstance'
     ])
   }
 })

src/renderer/components/general-settings/general-settings.vue

@@ -13,6 +13,7 @@
         @change="updateBackendFallback"
       />
       <ft-toggle-switch
+        v-if="false"
         label="Check for Updates"
         :default-value="checkForUpdates"
         @change="updateCheckForUpdates"
@@ -27,6 +28,7 @@
         @change="updateBackendPreference"
       />
       <ft-select
+        v-if="false"
         placeholder="Default Landing Page"
         :value="landingPage"
         :select-names="defaultPageNames"
@@ -34,6 +36,7 @@
         @change="updateLandingPage"
       />
       <ft-select
+        v-if="false"
         placeholder="Region for Trending"
         :value="region"
         :select-names="regionNames"
@@ -54,6 +57,14 @@
         :select-values="thumbnailTypeValues"
         @change="updateThumbnailPreference"
       />
+      <ft-select
+        v-if="showInvidiousInstances"
+        placeholder="Invidious Instance"
+        :value="invidiousInstance"
+        :select-names="instanceNames"
+        :select-values="instanceValues"
+        @change="updateInvidiousInstance"
+      />
     </div>
   </ft-card>
 </template>

src/renderer/components/player-settings/player-settings.vue

@@ -9,12 +9,14 @@
     <div class="switchColumnGrid">
       <div class="switchColumn">
         <ft-toggle-switch
+          v-if="false"
           label="Remember History"
           :compact="true"
           :default-value="rememberHistory"
           @change="updateRememberHistory"
         />
         <ft-toggle-switch
+          v-if="false"
           label="Enable Subtitles by Default"
           :compact="true"
           :default-value="enableSubtitles"
@@ -47,6 +49,7 @@
           @change="updateAutoplayPlaylists"
         />
         <ft-toggle-switch
+          v-if="false"
           label="Play Next Video"
           :compact="true"
           :default-value="playNextVideo"

src/renderer/components/playlist-info/playlist-info.js

@@ -41,6 +41,10 @@ export default Vue.extend({
     }
   },
   computed: {
+    invidiousInstance: function () {
+      return this.$store.getters.getInvidiousInstance
+    },
+    
     listType: function () {
       return this.$store.getters.getListType
     },
@@ -87,7 +91,7 @@ export default Vue.extend({
   methods: {
     sharePlaylist: function (method) {
       const youtubeUrl = `https://youtube.com/playlist?list=${this.id}`
-      const invidiousUrl = `https://invidio.us/playlist?list=${this.id}`
+      const invidiousUrl = `${this.invidiousInstance}/playlist?list=${this.id}`
 
       switch (method) {
         case 'copyYoutube':

src/renderer/components/theme-settings/theme-settings.js

@@ -21,13 +21,11 @@ export default Vue.extend({
       currentSecColor: '',
       baseThemeNames: [
         'Light',
-        'Dark',
-        'Gray'
+        'Dark'
       ],
       baseThemeValues: [
         'light',
-        'dark',
-        'gray'
+        'dark'
       ],
       colorNames: [
         'Red',

src/renderer/components/watch-video-info/watch-video-info.js

@@ -56,8 +56,7 @@ export default Vue.extend({
       formatTypeLabel: 'VIDEO FORMATS',
       formatTypeNames: [
         'USE DASH FORMATS',
-        'USE LEGACY FORMATS',
-        'USE YOUTUBE PLAYER'
+        'USE LEGACY FORMATS'
       ],
       formatTypeValues: [
         'dash',
@@ -69,17 +68,13 @@ export default Vue.extend({
         'COPY INVIDIOUS LINK',
         'OPEN INVIDIOUS LINK',
         'COPY YOUTUBE LINK',
-        'OPEN YOUTUBE LINK',
-        'COPY YOUTUBE EMBED LINK',
-        'OPEN YOUTUBE EMBED LINK'
+        'OPEN YOUTUBE LINK'
       ],
       shareValues: [
         'copyInvidious',
         'openInvidious',
         'copyYoutube',
-        'openYoutube',
-        'copyYoutubeEmbed',
-        'openYoutubeEmbed'
+        'openYoutube'
       ]
     }
   },

src/renderer/components/watch-video-live-chat/watch-video-live-chat.js

@@ -134,6 +134,8 @@ export default Vue.extend({
     },
 
     parseLiveChatComment: function (comment) {
+      console.log(comment)
+
       if (this.hasEnded) {
         return
       }
@@ -141,14 +143,28 @@ export default Vue.extend({
       comment.messageHtml = ''
 
       comment.message.forEach((text) => {
-        comment.messageHtml = comment.messageHtml + text.text
+        if (typeof (text.navigationEndpoint) !== 'undefined') {
+          if (typeof (text.navigationEndpoint.watchEndpoint) !== 'undefined') {
+            const htmlRef = `<router-link to="/watch/${text.navigationEndpoint.watchEndpoint.videoId}">${text.text}</router-link>`
+            comment.messageHtml = comment.messageHtml + htmlRef
+          } else {
+            comment.messageHtml = comment.messageHtml + text.text
+          }
+        } else if (typeof (text.alt) !== 'undefined') {
+          const htmlImg = `<img src="${text.url}" alt="${text.alt}" />`
+          comment.messageHtml = comment.messageHtml + htmlImg
+        } else {
+          comment.messageHtml = comment.messageHtml + text.text
+        }
       })
 
       comment.messageHtml = autolinker.link(comment.messageHtml)
 
       const liveChatComments = $('.liveChatComments')
+      const liveChatMessage = $('.liveChatMessage')
 
-      if (typeof (liveChatComments.get(0)) === 'undefined' && this.comments.length !== 0) {
+      if (typeof (liveChatComments.get(0)) === 'undefined' && typeof (liveChatMessage.get(0)) === 'undefined') {
+        console.log("Can't find chat object.  Stopping chat connection")
         this.liveChat.stop()
         return
       }

src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue

@@ -24,7 +24,7 @@
     </div>
     <div
      v-else-if="comments.length === 0"
-     class="messageContainer"
+     class="messageContainer liveChatMessage"
     >
       <p
         class="message"
@@ -96,7 +96,7 @@
           <p
             class="chatMessage"
             v-if="superChat.message.length > 0"
-            v-html="comment.messageHtml"
+            v-html="superChat.messageHtml"
           >
           </p>
         </div>

src/renderer/main.js

@@ -3,6 +3,7 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router/index'
 import store from './store/index'
+import 'material-design-icons/iconfont/material-icons.css'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fas } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

src/renderer/store/modules/settings.js

@@ -48,7 +48,7 @@ const state = {
   defaultVolume: 1,
   defaultPlayback: 1,
   defaultVideoFormat: 'dash',
-  defaultQuality: 'auto',
+  defaultQuality: '720',
   useTor: false,
   proxy: 'SOCKS5://127.0.0.1:9050',
   debugMode: false,
@@ -156,6 +156,9 @@ const actions = {
         console.log(results)
         results.forEach((result) => {
           switch (result._id) {
+            case 'invidiousInstance':
+              commit('setInvidiousInstance', result.value)
+              break
             case 'backendFallback':
               commit('setBackendFallback', result.value)
               break
@@ -223,6 +226,15 @@ const actions = {
     })
   },
 
+  updateInvidiousInstance ({ commit }, invidiousInstance) {
+    console.log(invidiousInstance)
+    settingsDb.update({ _id: 'invidiousInstance' }, { _id: 'invidiousInstance', value: invidiousInstance }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setInvidiousInstance', invidiousInstance)
+      }
+    })
+  },
+
   updateBackendFallback ({ commit }, backendFallback) {
     settingsDb.update({ _id: 'backendFallback' }, { _id: 'backendFallback', value: backendFallback }, { upsert: true }, (err, numReplaced) => {
       if (!err) {
@@ -394,6 +406,9 @@ const actions = {
 }
 
 const mutations = {
+  setInvidiousInstance (state, invidiousInstance) {
+    state.invidiousInstance = invidiousInstance
+  },
   setCurrentTheme (state, currentTheme) {
     state.barColor = currentTheme
   },

src/renderer/themes.css

@@ -12,8 +12,8 @@
   --side-nav-hover-color: #e0e0e0;
   --side-nav-active-color: #757575;
   --search-bar-color: #f5f5f5;
-  --logo-icon: url("/_icons/iconColorSmall.png");
-  --logo-text: url("/_icons/textColorSmall.png");
+  --logo-icon: url("~../../_icons/iconColorSmall.png");
+  --logo-text: url("~../../_icons/textColorSmall.png");
 }
 
 
@@ -31,8 +31,8 @@
   --side-nav-hover-color: #212121;
   --side-nav-active-color: #303030;
   --search-bar-color: #262626;
-  --logo-icon: url("/_icons/iconColorSmall.png");
-  --logo-text: url("/_icons/textColorSmall.png");
+  --logo-icon: url("~../../_icons/iconColorSmall.png");
+  --logo-text: url("~../../_icons/textColorSmall.png");
 }
 
 
@@ -50,8 +50,8 @@
   --side-nav-hover-color: #212121;
   --side-nav-active-color: #303030;
   --search-bar-color: #212121;
-  --logo-icon: url("/_icons/iconColorSmall.png");
-  --logo-text: url("/_icons/textColorSmall.png");
+  --logo-icon: url("~../../_icons/iconColorSmall.png");
+  --logo-text: url("~../../_icons/textColorSmall.png");
 }
 
 .mainRed {
@@ -59,8 +59,8 @@
   --primary-color-hover: #e53935;
   --primary-color-active: #c62828;
   --text-with-main-color: #FFFFFF;
-  --logo-icon-bar-color: url("/_icons/iconWhite.png");
-  --logo-text-bar-color: url("/_icons/textWhite.png");
+  --logo-icon-bar-color: url("~../../_icons/iconWhite.png");
+  --logo-text-bar-color: url("~../../_icons/textWhite.png");
 }
 
 .mainPink {
@@ -68,8 +68,8 @@
   --primary-color-hover: #D81B60;
   --primary-color-active: #AD1457;
   --text-with-main-color: #FFFFFF;
-  --logo-icon-bar-color: url("/_icons/iconWhite.png");
-  --logo-text-bar-color: url("/_icons/textWhite.png");
+  --logo-icon-bar-color: url("~../../_icons/iconWhite.png");
+  --logo-text-bar-color: url("~../../_icons/textWhite.png");
 }
 
 .mainPurple {
@@ -77,8 +77,8 @@
   --primary-color-hover: #8E24AA;
   --primary-color-active: #6A1B9A;
   --text-with-main-color: #FFFFFF;
-  --logo-icon-bar-color: url("/_icons/iconWhite.png");
-  --logo-text-bar-color: url("/_icons/textWhite.png");
+  --logo-icon-bar-color: url("~../../_icons/iconWhite.png");
+  --logo-text-bar-color: url("~../../_icons/textWhite.png");
 }
 
 .mainDeepPurple {
@@ -86,8 +86,8 @@
   --primary-color-hover: #5E35B1;
   --primary-color-active: #4527A0;
   --text-with-main-color: #FFFFFF;
-  --logo-icon-bar-color: url("/_icons/iconWhite.png");
-  --logo-text-bar-color: url("/_icons/textWhite.png");
+  --logo-icon-bar-color: url("~../../_icons/iconWhite.png");
+  --logo-text-bar-color: url("~../../_icons/textWhite.png");
 }
 
 .mainIndigo {
@@ -95,8 +95,8 @@
   --primary-color-hover: #3949AB;
   --primary-color-active: #283593;
   --text-with-main-color: #FFFFFF;
-  --logo-icon-bar-color: url("/_icons/iconWhite.png");
-  --logo-text-bar-color: url("/_icons/textWhite.png");
+  --logo-icon-bar-color: url("~../../_icons/iconWhite.png");
+  --logo-text-bar-color: url("~../../_icons/textWhite.png");
 }
 
 .mainBlue {
@@ -104,8 +104,8 @@
   --primary-color-hover: #1E88E5;
   --primary-color-active: #1565C0;
   --text-with-main-color: #FFFFFF;
-  --logo-icon-bar-color: url("/_icons/iconWhite.png");
-  --logo-text-bar-color: url("/_icons/textWhite.png");
+  --logo-icon-bar-color: url("~../../_icons/iconWhite.png");
+  --logo-text-bar-color: url("~../../_icons/textWhite.png");
 }
 
 .mainLightBlue {
@@ -113,8 +113,8 @@
   --primary-color-hover: #039BE5;
   --primary-color-active: #0277BD;
   --text-with-main-color: #FFFFFF;
-  --logo-icon-bar-color: url("/_icons/iconWhite.png");
-  --logo-text-bar-color: url("/_icons/textWhite.png");
+  --logo-icon-bar-color: url("~../../_icons/iconWhite.png");
+  --logo-text-bar-color: url("~../../_icons/textWhite.png");
 }
 
 .mainCyan {
@@ -122,8 +122,8 @@
   --primary-color-hover: #00ACC1;
   --primary-color-active: #00838F;
   --text-with-main-color: #FFFFFF;
-  --logo-icon-bar-color: url("/_icons/iconWhite.png");
-  --logo-text-bar-color: url("/_icons/textWhite.png");
+  --logo-icon-bar-color: url("~../../_icons/iconWhite.png");
+  --logo-text-bar-color: url("~../../_icons/textWhite.png");
 }
 
 .mainTeal {
@@ -131,8 +131,8 @@
   --primary-color-hover: #00897B;
   --primary-color-active: #00695C;
   --text-with-main-color: #FFFFFF;
-  --logo-icon-bar-color: url("/_icons/iconWhite.png");
-  --logo-text-bar-color: url("/_icons/textWhite.png");
+  --logo-icon-bar-color: url("~../../_icons/iconWhite.png");
+  --logo-text-bar-color: url("~../../_icons/textWhite.png");
 }
 
 .mainGreen {
@@ -140,8 +140,8 @@
   --primary-color-hover: #43A047;
   --primary-color-active: #2E7D32;
   --text-with-main-color: #FFFFFF;
-  --logo-icon-bar-color: url("/_icons/iconWhite.png");
-  --logo-text-bar-color: url("/_icons/textWhite.png");
+  --logo-icon-bar-color: url("~../../_icons/iconWhite.png");
+  --logo-text-bar-color: url("~../../_icons/textWhite.png");
 }
 
 .mainLightGreen {
@@ -149,8 +149,8 @@
   --primary-color-hover: #7CB342;
   --primary-color-active: #558B2F;
   --text-with-main-color: #000000;
-  --logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
-  --logo-text-bar-color: url("/_icons/textBlackSmall.png");
+  --logo-icon-bar-color: url("~../../_icons/iconBlackSmall.png");
+  --logo-text-bar-color: url("~../../_icons/textBlackSmall.png");
 }
 
 .mainLime {
@@ -158,8 +158,8 @@
   --primary-color-hover: #C0CA33;
   --primary-color-active: #9E9D24;
   --text-with-main-color: #000000;
-  --logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
-  --logo-text-bar-color: url("/_icons/textBlackSmall.png");
+  --logo-icon-bar-color: url("~../../_icons/iconBlackSmall.png");
+  --logo-text-bar-color: url("~../../_icons/textBlackSmall.png");
 }
 
 .mainYellow {
@@ -167,8 +167,8 @@
   --primary-color-hover: #FDD835;
   --primary-color-active: #F9A825;
   --text-with-main-color: #000000;
-  --logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
-  --logo-text-bar-color: url("/_icons/textBlackSmall.png");
+  --logo-icon-bar-color: url("~../../_icons/iconBlackSmall.png");
+  --logo-text-bar-color: url("~../../_icons/textBlackSmall.png");
 }
 
 .mainAmber {
@@ -176,8 +176,8 @@
   --primary-color-hover: #FFB300;
   --primary-color-active: #FF8F00;
   --text-with-main-color: #000000;
-  --logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
-  --logo-text-bar-color: url("/_icons/textBlackSmall.png");
+  --logo-icon-bar-color: url("~../../_icons/iconBlackSmall.png");
+  --logo-text-bar-color: url("~../../_icons/textBlackSmall.png");
 }
 
 .mainOrange {
@@ -185,8 +185,8 @@
   --primary-color-hover: #FB8C00;
   --primary-color-active: #EF6C00;
   --text-with-main-color: #000000;
-  --logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
-  --logo-text-bar-color: url("/_icons/textBlackSmall.png");
+  --logo-icon-bar-color: url("~../../_icons/iconBlackSmall.png");
+  --logo-text-bar-color: url("~../../_icons/textBlackSmall.png");
 }
 
 .mainDeepOrange {
@@ -194,8 +194,8 @@
   --primary-color-hover: #F4511E;
   --primary-color-active: #D84315;
   --text-with-main-color: #000000;
-  --logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
-  --logo-text-bar-color: url("/_icons/textBlackSmall.png");
+  --logo-icon-bar-color: url("~../../_icons/iconBlackSmall.png");
+  --logo-text-bar-color: url("~../../_icons/textBlackSmall.png");
 }
 
 .secRed {

src/renderer/videoJS.css

@@ -1944,7 +1944,9 @@ video::-webkit-media-text-track-display {
     background: rgba(255,255,255,0.3);
 }
 
-.vjs-quality-selector .vjs-menu-button {
+.vjs-quality-selector .vjs-menu-button{margin:0;padding:0;height:100%;width:100%}.vjs-quality-selector .vjs-icon-placeholder{font-family:'VideoJS';font-weight:normal;font-style:normal}.vjs-quality-selector .vjs-icon-placeholder:before{content:'\f110'}.vjs-quality-changing .vjs-big-play-button{display:none}.vjs-quality-changing .vjs-control-bar{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;visibility:visible;opacity:1}
+
+/* .vjs-quality-selector .vjs-menu-button {
   margin: 0;
   padding: 0;
   height: 100%;
@@ -1969,7 +1971,7 @@ video::-webkit-media-text-track-display {
   display: flex;
   visibility: visible;
   opacity: 1;
-}
+} */
 
 .video-js .vjs-vtt-thumbnails {
     display: block;

src/renderer/views/About/About.vue

@@ -9,7 +9,7 @@
         class="logo"
       >
       <h1>
-        {{ versionNumber }} Beta
+        {{ versionNumber }} Alpha
       </h1>
       <h3>
         <font-awesome-icon

src/renderer/views/History/History.css

@@ -4,6 +4,10 @@
   margin-bottom: 60px;
 }
 
+.message {
+  color: var(--tertiary-text-color);
+}
+
 @media only screen and (max-width: 680px) {
   .card {
     width: 90%;

src/renderer/views/History/History.js

@@ -1,11 +1,13 @@
 import Vue from 'vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
+import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
 
 export default Vue.extend({
   name: 'History',
   components: {
     'ft-card': FtCard,
+    'ft-flex-box': FtFlexBox,
     'ft-element-list': FtElementList
   },
   mounted: function () {

src/renderer/views/History/History.vue

@@ -2,6 +2,11 @@
   <div>
     <ft-card class="card">
       <h3>History</h3>
+      <ft-flex-box>
+        <p class="message">
+          This part of the app is not ready yet. Come back later when progress has been made.
+        </p>
+      </ft-flex-box>
     </ft-card>
   </div>
 </template>

src/renderer/views/Settings/Settings.vue

@@ -3,7 +3,6 @@
     <general-settings />
     <theme-settings />
     <player-settings />
-    <subscription-settings />
   </div>
 </template>
 

src/renderer/views/Subscriptions/Subscriptions.css

@@ -4,6 +4,10 @@
   margin-bottom: 60px;
 }
 
+.message {
+  color: var(--tertiary-text-color);
+}
+
 @media only screen and (max-width: 680px) {
   .card {
     width: 90%;

src/renderer/views/Subscriptions/Subscriptions.js

@@ -1,11 +1,13 @@
 import Vue from 'vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
+import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
 
 export default Vue.extend({
   name: 'Subscriptions',
   components: {
     'ft-card': FtCard,
+    'ft-flex-box': FtFlexBox,
     'ft-element-list': FtElementList
   },
   mounted: function () {

src/renderer/views/Subscriptions/Subscriptions.vue

@@ -2,6 +2,11 @@
   <div>
     <ft-card class="card">
       <h3>Subscriptions</h3>
+      <ft-flex-box>
+        <p class="message">
+          This part of the app is not ready yet. Come back later when progress has been made.
+        </p>
+      </ft-flex-box>
     </ft-card>
   </div>
 </template>

src/renderer/views/UserPlaylists/UserPlaylists.css

@@ -4,6 +4,10 @@
   margin-bottom: 60px;
 }
 
+.message {
+  color: var(--tertiary-text-color);
+}
+
 @media only screen and (max-width: 680px) {
   .card {
     width: 90%;

src/renderer/views/UserPlaylists/UserPlaylists.js

@@ -1,11 +1,13 @@
 import Vue from 'vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
+import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
 
 export default Vue.extend({
   name: 'UserPlaylists',
   components: {
     'ft-card': FtCard,
+    'ft-flex-box': FtFlexBox,
     'ft-element-list': FtElementList
   },
   mounted: function () {

src/renderer/views/UserPlaylists/UserPlaylists.vue

@@ -2,6 +2,11 @@
   <div>
     <ft-card class="card">
       <h3>Your Playlists</h3>
+      <ft-flex-box>
+        <p class="message">
+          This part of the app is not ready yet. Come back later when progress has been made.
+        </p>
+      </ft-flex-box>
     </ft-card>
   </div>
 </template>

src/renderer/views/Watch/Watch.js

@@ -202,7 +202,7 @@ export default Vue.extend({
                 label: 'Dash',
                 qualityLabel: format.qualityLabel
               }
-            })
+            }).reverse()
           } else {
             this.videoSourceList = result.player_response.streamingData.formats
           }