tesses50
/
freetube
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Preston 2020-07-11 18:36:42 -04:00
parent 7dd50f9c28
commit b625683a2e
7 changed files with 618 additions and 772 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
_scripts/webpack.main.config.js
View File

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

8
_scripts/webpack.renderer.config.js
View File

@ -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: ['.*'],
},
},
]
}
),

8
_scripts/webpack.web.config.js
View File

@ -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: ['.*'],
},
},
]
}
),

1260
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

14
src/renderer/views/Channel/Channel.css
View File

@ -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%;

56
src/renderer/views/Channel/Channel.js
View File

@ -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.id, this.videoContinuationString).then((response) => {
ytch.getChannelVideosMore(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)
})
}
},

37
src/renderer/views/Channel/Channel.vue
View File

@ -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>
<ft-flex-box>
<h2
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"
>