Add error handling for local channel API and add check for missing channel info

_scripts/webpack.main.config.js

@@ -85,6 +85,13 @@ if (isDevMode) {
               ignore: ['.*'],
             },
           },
+          {
+            from: path.join(__dirname, '../src/renderer/assets/img'),
+            to: path.join(__dirname, '../dist/images'),
+            globOptions: {
+              ignore: ['.*'],
+            },
+          },
         ]
       }
     ),

_scripts/webpack.renderer.config.js

@@ -132,6 +132,7 @@ const config = {
       '@': path.join(__dirname, '../src/'),
       src: path.join(__dirname, '../src/'),
       icons: path.join(__dirname, '../_icons/'),
+      images: path.join(__dirname, '../src/renderer/assets/img/'),
     },
     extensions: ['.ts', '.js', '.vue', '.json'],
   },
@@ -171,6 +172,13 @@ if (isDevMode) {
               ignore: ['.*'],
             },
           },
+          {
+            from: path.join(__dirname, '../src/renderer/assets/img'),
+            to: path.join(__dirname, '../dist/web/images'),
+            globOptions: {
+              ignore: ['.*'],
+            },
+          },
         ]
       }
     ),

_scripts/webpack.web.config.js

@@ -135,6 +135,7 @@ const config = {
       vue$: 'vue/dist/vue.esm.js',
       src: path.join(__dirname, '../src/'),
       icons: path.join(__dirname, '../_icons/'),
+      images: path.join(__dirname, '../src/renderer/assets/img/'),
     },
     extensions: ['.js', '.vue', '.json', '.css'],
   },
@@ -174,6 +175,13 @@ if (isDevMode) {
               ignore: ['.*'],
             },
           },
+          {
+            from: path.join(__dirname, '../src/renderer/assets/img'),
+            to: path.join(__dirname, '../dist/web/images'),
+            globOptions: {
+              ignore: ['.*'],
+            },
+          },
         ]
       }
     ),

src/renderer/views/Channel/Channel.css

@@ -13,6 +13,16 @@
   max-height: 300px;
 }
 
+.defaultChannelBanner {
+  width: 100%;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 200px;
+  background-color: black;
+  background-image: url("~images/defaultBanner.png");
+}
+
 .channelInfoContainer {
   width: 100%;
   height: 200px;
@@ -116,6 +126,10 @@
   margin-top: 200px;
 }
 
+.message {
+  color: var(--tertiary-text-color);
+}
+
 .getNextPage {
   background-color: var(--search-bar-color);
   width: 100%;

src/renderer/views/Channel/Channel.js

@@ -88,6 +88,28 @@ export default Vue.extend({
 
     formattedSubCount: function () {
       return this.subCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+    },
+
+    showFetchMoreButton: function () {
+      switch (this.currentTab) {
+        case 'videos':
+          if (this.videoContinuationString !== '' && this.videoContinuationString !== null) {
+            return true
+          }
+          break
+        case 'playlists':
+          if (this.playlistContinuationString !== '' && this.playlistContinuationString !== null) {
+            return true
+          }
+          break
+        case 'search':
+          if (this.searchContinuationString !== '' && this.searchContinuationString !== null) {
+            return true
+          }
+          break
+      }
+
+      return false
     }
   },
   watch: {
@@ -152,9 +174,15 @@ export default Vue.extend({
         this.channelName = response.author
         this.subCount = response.subscriberCount
         this.thumbnailUrl = response.authorThumbnails[2].url
-        this.bannerUrl = `https://${response.authorBanners[response.authorBanners.length - 1].url}`
         this.channelDescription = response.description
         this.relatedChannels = response.relatedChannels
+
+        if (response.authorBanners !== null) {
+          this.bannerUrl = `https://${response.authorBanners[response.authorBanners.length - 1].url}`
+        } else {
+          this.bannerUrl = null
+        }
+
         this.isLoading = false
       }).catch((err) => {
         console.log(err)
@@ -167,15 +195,17 @@ export default Vue.extend({
         this.latestVideos = response.items
         this.videoContinuationString = response.continuation
         this.isElementListLoading = false
+      }).catch((err) => {
+        console.log(err)
       })
     },
 
     channelLocalNextPage: function () {
-      console.log(this.videoContinuationString)
+      ytch.getChannelVideosMore(this.videoContinuationString).then((response) => {
-      ytch.getChannelVideosMore(this.id, this.videoContinuationString).then((response) => {
         this.latestVideos = this.latestVideos.concat(response.items)
         this.videoContinuationString = response.continuation
-        console.log(this.videoContinuationString)
+      }).catch((err) => {
+        console.log(err)
       })
     },
 
@@ -188,10 +218,14 @@ export default Vue.extend({
         this.id = response.authorId
         this.subCount = response.subCount
         this.thumbnailUrl = response.authorThumbnails[3].url
-        this.bannerUrl = response.authorBanners[0].url
         this.channelDescription = response.description
         this.relatedChannels = response.relatedChannels
         this.latestVideos = response.latestVideos
+
+        if (typeof (response.authorBanners) !== 'undefined') {
+          this.bannerUrl = response.authorBanners[0].url
+        }
+
         this.isLoading = false
       }).catch((error) => {
         console.log(error)
@@ -222,14 +256,18 @@ export default Vue.extend({
         this.latestPlaylists = response.items
         this.playlistContinuationString = response.continuation
         this.isElementListLoading = false
+      }).catch((err) => {
+        console.log(err)
       })
     },
 
     getPlaylistsLocalMore: function () {
-      ytch.getChannelPlaylistsMore(this.id, this.playlistContinuationString).then((response) => {
+      ytch.getChannelPlaylistsMore(this.playlistContinuationString).then((response) => {
         console.log(response)
         this.latestPlaylists = this.latestPlaylists.concat(response.items)
         this.playlistContinuationString = response.continuation
+      }).catch((err) => {
+        console.log(err)
       })
     },
 
@@ -324,13 +362,17 @@ export default Vue.extend({
           this.searchResults = response.items
           this.isElementListLoading = false
           this.searchContinuationString = response.continuation
+        }).catch((err) => {
+          console.log(err)
         })
       } else {
-        ytch.searchChannelMore(this.id, this.searchContinuationString).then((response) => {
+        ytch.searchChannelMore(this.searchContinuationString).then((response) => {
           console.log(response)
           this.searchResults = this.searchResults.concat(response.items)
           this.isElementListLoading = false
           this.searchContinuationString = response.continuation
+        }).catch((err) => {
+          console.log(err)
         })
       }
     },

src/renderer/views/Channel/Channel.vue

@@ -11,9 +11,14 @@
       class="card"
     >
       <img
+        v-if="bannerUrl !== null"
         class="channelBanner"
         :src="bannerUrl"
       >
+      <img
+        v-else
+        class="defaultChannelBanner"
+      >
       <div class="channelInfoContainer">
         <div class="channelInfo">
           <img
@@ -102,8 +107,14 @@
           v-html="channelDescription"
         />
         <br>
-        <h2>Featured Channels</h2>
+        <h2
-        <ft-flex-box>
+          v-if="relatedChannels.length > 0"
+        >
+          Featured Channels
+        </h2>
+        <ft-flex-box
+          v-if="relatedChannels.length > 0"
+        >
           <ft-channel-bubble
             v-for="(channel, index) in relatedChannels"
             :key="index"
@@ -124,15 +135,37 @@
           v-show="currentTab === 'videos'"
           :data="latestVideos"
         />
+        <ft-flex-box
+          v-if="currentTab === 'videos' && latestVideos.length === 0"
+        >
+          <p class="message">
+            This channel does not currently have any videos
+          </p>
+        </ft-flex-box>
         <ft-element-list
           v-show="currentTab === 'playlists'"
           :data="latestPlaylists"
         />
+        <ft-flex-box
+          v-if="currentTab === 'playlists' && latestPlaylists.length === 0"
+        >
+          <p class="message">
+            This channel does not currently have any playlists
+          </p>
+        </ft-flex-box>
         <ft-element-list
           v-show="currentTab === 'search'"
           :data="searchResults"
         />
+        <ft-flex-box
+          v-if="currentTab === 'search' && searchResults.length === 0"
+        >
+          <p class="message">
+            Your search results have returned 0 results
+          </p>
+        </ft-flex-box>
         <div
+          v-if="showFetchMoreButton"
           class="getNextPage"
           @click="handleFetchMore"
         >