+
{{ title }}
{{ viewCount }} views - {{ uploadedTime }} {{ viewCount }} watching
{{ description }}
- {{ videoCount }} videos - {{ viewCount }} views - Last updated on {{ lastUpdated }} + {{ videoCount }} videos - {{ viewCount }} views - + + Last updated on + + {{ lastUpdated }}
{{ description }} diff --git a/src/renderer/components/watch-video-info/watch-video-info.js b/src/renderer/components/watch-video-info/watch-video-info.js index 937b5367..f3a3859b 100644 --- a/src/renderer/components/watch-video-info/watch-video-info.js +++ b/src/renderer/components/watch-video-info/watch-video-info.js @@ -44,11 +44,11 @@ export default Vue.extend({ }, likeCount: { type: Number, - required: true + default: 0 }, dislikeCount: { type: Number, - required: true + default: 0 } }, data: function () { @@ -88,6 +88,10 @@ export default Vue.extend({ return this.$store.getters.getInvidiousInstance }, + usingElectron: function () { + return this.$store.getters.getUsingElectron + }, + invidiousUrl: function () { return `${this.invidiousInstance}/watch?v=${this.id}` }, @@ -118,7 +122,7 @@ export default Vue.extend({ }, methods: { goToChannel: function () { - console.log('TODO: Handle goToChannel') + this.$router.push({ path: `/channel/${this.channelId}` }) }, handleSubscription: function () { @@ -126,9 +130,6 @@ export default Vue.extend({ }, handleFormatChange: function (format) { - console.log('Handling share') - console.log(this) - switch (format) { case 'dash': this.$parent.enableDashFormat() @@ -147,19 +148,28 @@ export default Vue.extend({ navigator.clipboard.writeText(this.youtubeUrl) break case 'openYoutube': - // shell.openExternal(this.youtubeUrl) + if (this.usingElectron) { + const shell = require('electron').shell + shell.openExternal(this.youtubeUrl) + } break case 'copyYoutubeEmbed': navigator.clipboard.writeText(this.youtubeEmbedUrl) break case 'openYoutubeEmbed': - // shell.openExternal(this.youtubeEmbedUrl) + if (this.usingElectron) { + const shell = require('electron').shell + shell.openExternal(this.youtubeEmbedUrl) + } break case 'copyInvidious': navigator.clipboard.writeText(this.invidiousUrl) break case 'openInvidious': - // shell.openExternal(this.invidiousUrl) + if (this.usingElectron) { + const shell = require('electron').shell + shell.openExternal(this.invidiousUrl) + } break } } diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.css b/src/renderer/components/watch-video-playlist/watch-video-playlist.css new file mode 100644 index 00000000..8a0f27fc --- /dev/null +++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.css @@ -0,0 +1,106 @@ +.pointer { + cursor: pointer; +} + +.channelName { + font-size: 15px; + cursor: pointer; + position: relative; + bottom: 15px; +} + +.playlistIndex { + position: relative; + bottom: 15px; + color: var(--tertiary-text-color); +} + +.playlistIcon { + font-size: 20px; + padding: 10px; + margin-top: -25px; + cursor: pointer; + border-radius: 50%; + color: var(--tertiary-text-color); + transition: background 0.2s ease-out; +} + +.playlistIcon:hover { + background-color: var(--side-nav-hover-color); + transition: background 0.2s ease-in; +} + +.playlistIconActive { + color: var(--accent-color) +} + +.playlistItems { + overflow-y: auto; + height: 395px; + margin-top: -15px; + margin-left: -16px; + margin-right: -16px; +} + +.playlistItem { + height: 75px; + width: 100%; + transition: background 0.2s ease-out; +} + +.playlistItem:hover { + background-color: var(--side-nav-hover-color); + transition: background 0.2s ease-in; +} + +.videoIndex { + float: left; + position: relative; + top: 15px; + left: 10px; + color: var(--tertiary-text-color); +} + +.videoIndexIcon { + float: left; + position: relative; + font-size: 14px; + top: 32px; + left: 10px; + color: var(--tertiary-text-color); +} + +.videoInfo { + margin-left: 30px; + position: relative; + bottom: 7px; +} + +/deep/ .list { + height: 60px; + width: calc(100% - 30px); +} + +/deep/ .list .videoThumbnail { + width: 100px; + height: 60px; +} + +/deep/ .list .videoThumbnail img { + height: 60px; +} + +/deep/ .list .videoTitle { + font-size: 12px; + margin-left: 105px; + margin-right: 30px; +} + +/deep/ .list .channelName { + margin-left: 105px; + margin-right: 30px; +} + +/deep/ .list .viewCount { + margin-left: 5px; +} diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.js b/src/renderer/components/watch-video-playlist/watch-video-playlist.js new file mode 100644 index 00000000..2e6e7cde --- /dev/null +++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.js @@ -0,0 +1,252 @@ +import Vue from 'vue' +import FtLoader from '../ft-loader/ft-loader.vue' +import FtCard from '../ft-card/ft-card.vue' +import FtFlexBox from '../ft-flex-box/ft-flex-box.vue' +import FtListVideo from '../ft-list-video/ft-list-video.vue' + +export default Vue.extend({ + name: 'WatchVideoPlaylist', + components: { + 'ft-loader': FtLoader, + 'ft-card': FtCard, + 'ft-flex-box': FtFlexBox, + 'ft-list-video': FtListVideo + }, + props: { + playlistId: { + type: String, + required: true + }, + videoId: { + type: String, + required: true + } + }, + data: function () { + return { + isLoading: false, + shuffleEnabled: false, + loopEnabled: false, + channelName: '', + channelId: '', + channelThumbnail: '', + playlistTitle: '', + playlistItems: [], + playlistWatchedVideoList: [] + } + }, + computed: { + usingElectron: function () { + return this.$store.getters.getUsingElectron + }, + + backendPreference: function () { + return this.$store.getters.getBackendPreference + }, + + backendFallback: function () { + return this.$store.getters.getBackendFallback + }, + + currentVideoIndex: function () { + const index = this.playlistItems.findIndex((item) => { + return item.videoId === this.videoId + }) + + return index + 1 + }, + + playlistVideoCount: function () { + return this.playlistItems.length + } + }, + watch: { + videoId () { + this.playlistWatchedVideoList.push(this.videoId) + }, + }, + mounted: function () { + if (this.usingElectron) { + this.getPlaylistInformationInvidious() + } else { + switch (this.backendPreference) { + case 'local': + this.getPlaylistInformationLocal() + break + case 'invidious': + this.getPlaylistInformationInvidious() + break + } + } + }, + methods: { + goToPlaylist: function () { + this.$router.push({ path: `/playlist/${this.playlistId}` }) + }, + + goToChannel: function () { + this.$router.push({ path: `/channel/${this.channelId}` }) + }, + + toggleLoop: function () { + if (this.loopEnabled) { + this.loopEnabled = false + console.log('Disabling loop') + } else { + this.loopEnabled = true + console.log('Enabling loop') + } + }, + + toggleShuffle: function () { + if (this.shuffleEnabled) { + this.shuffleEnabled = false + console.log('Disabling shuffle') + } else { + this.shuffleEnabled = true + console.log('Enabling shuffle') + } + }, + + playNextVideo: function () { + const playlistInfo = { + playlistId: this.playlistId + } + + const videoIndex = this.playlistItems.findIndex((item) => { + return item.videoId === this.videoId + }) + + const videosRemain = this.playlistWatchedVideoList.length < this.playlistItems.length + + if (this.shuffleEnabled && videosRemain) { + let runLoop = true + while (runLoop) { + const randomInt = Math.floor(Math.random() * this.playlistItems.length) + const randomVideoId = this.playlistItems[randomInt].videoId + + const watchedIndex = this.playlistWatchedVideoList.findIndex((watchedVideo) => { + return watchedVideo === randomVideoId + }) + + if (watchedIndex === -1) { + runLoop = false + this.$router.push( + { + path: `/watch/${randomVideoId}`, + query: playlistInfo + } + ) + break + } + } + } else if (this.shuffleEnabled && !videosRemain) { + if (this.loopEnabled) { + let runLoop = true + while (runLoop) { + const randomInt = Math.floor(Math.random() * this.playlistItems.length) + const randomVideoId = this.playlistItems[randomInt].videoId + + if (this.videoId !== randomVideoId) { + this.playlistItems = [] + runLoop = false + this.$router.push( + { + path: `/watch/${randomVideoId}`, + query: playlistInfo + } + ) + break + } + } + } + } else if (this.loopEnabled && videoIndex === this.playlistItems.length - 1) { + this.$router.push( + { + path: `/watch/${this.playlistItems[0].videoId}`, + query: playlistInfo + } + ) + } else if (videoIndex < this.playlistItems.length - 1 && !videosRemain) { + this.$router.push( + { + path: `/watch/${this.playlistItems[videoIndex + 1].videoId}`, + query: playlistInfo + } + ) + } + }, + + getPlaylistInformationLocal: function () { + this.isLoading = true + + this.$store.dispatch('ytGetPlaylistInfo', this.playlistId).then((result) => { + console.log('done') + console.log(result) + + this.playlistTitle = result.title + this.playlistItems = result.items + this.videoCount = result.total_items + this.channelName = result.author.name + this.channelThumbnail = result.author.avatar + this.channelId = result.author.id + + this.playlistItems = result.items + + this.playlistWatchedVideoList.push(this.videoId) + this.isLoading = false + }).catch((err) => { + console.log(err) + if (this.backendPreference === 'local' && this.backendFallback) { + console.log('Falling back to Invidious API') + this.getPlaylistInformationInvidious() + } else { + this.isLoading = false + // TODO: Show toast with error message + } + }) + }, + + getPlaylistInformationInvidious: function () { + this.isLoading = true + + const payload = { + resource: 'playlists', + id: this.playlistId, + params: { + page: this.playlistPage + } + } + + this.$store.dispatch('invidiousGetPlaylistInfo', payload).then((result) => { + console.log('done') + console.log(result) + + this.playlistTitle = result.title + this.videoCount = result.videoCount + this.channelName = result.author + this.channelThumbnail = result.authorThumbnails[2].url + this.channelId = result.authorId + this.playlistItems = this.playlistItems.concat(result.videos) + + if (this.playlistItems.length < result.videoCount) { + console.log('getting next page') + this.playlistPage++ + this.getPlaylistInformationInvidious() + } else { + this.playlistWatchedVideoList.push(this.videoId) + this.isLoading = false + } + }).catch((err) => { + console.log(err) + if (this.backendPreference === 'invidious' && this.backendFallback) { + console.log('Error getting data with Invidious, falling back to local backend') + this.getPlaylistInformationLocal() + } else { + this.isLoading = false + // TODO: Show toast with error message + } + }) + } + } +}) diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.vue b/src/renderer/components/watch-video-playlist/watch-video-playlist.vue new file mode 100644 index 00000000..d2025419 --- /dev/null +++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.vue @@ -0,0 +1,73 @@ + + + + + + {{ playlistTitle }} + + + {{ channelName }} + + + - {{ currentVideoIndex }} / {{ playlistVideoCount }} + + + + + + + + + + {{ index + 1 }} + + + + + + + + + + diff --git a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.css b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.css index e83928a1..4e95dfed 100644 --- a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.css +++ b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.css @@ -5,3 +5,29 @@ .videoRecommendation { margin-bottom: -15px; } + +/deep/ .list { + height: 110px; +} + +/deep/ .list .videoThumbnail { + width: 180px; + height: 100px; +} + +/deep/ .list .videoThumbnail img { + height: 100px; +} + +/deep/ .list .videoTitle { + font-size: 12px; + margin-left: 185px; +} + +/deep/ .list .channelName { + margin-left: 185px; +} + +/deep/ .list .viewCount { + margin-left: 5px; +} diff --git a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.js b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.js index 897cd852..9cfd3d6c 100644 --- a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.js +++ b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.js @@ -14,11 +14,6 @@ export default Vue.extend({ required: true } }, - data: function () { - return { - test: 'hello' - } - }, computed: { listType: function () { return this.$store.getters.getListType diff --git a/src/renderer/store/modules/playlist.js b/src/renderer/store/modules/playlist.js new file mode 100644 index 00000000..5d6c3eea --- /dev/null +++ b/src/renderer/store/modules/playlist.js @@ -0,0 +1,66 @@ +import Datastore from 'nedb' + +let dbLocation + +if (window && window.process && window.process.type === 'renderer') { + // Electron is being used + let dbLocation = localStorage.getItem('dbLocation') + + if (dbLocation === null) { + const electron = require('electron') + dbLocation = electron.remote.app.getPath('userData') + } + + dbLocation += '/playlists.db' +} else { + dbLocation = 'playlists.db' +} + +const subDb = new Datastore({ + filename: dbLocation, + autoload: true +}) + +const state = { + activePlaylistId: '', + activePlaylistVideoList: [], + watchedVideosWithinPlaylist: [] +} + +const mutations = { + addSubscription (state, payload) { + state.subscriptions.push(payload) + }, + setSubscriptions (state, payload) { + state.subscriptions = payload + } +} + +const actions = { + addSubscriptions ({ commit }, payload) { + subDb.insert(payload, (err, payload) => { + if (!err) { + commit('addSubscription', payload) + } + }) + }, + getSubscriptions ({ commit }, payload) { + subDb.find({}, (err, payload) => { + if (!err) { + commit('setSubscriptions', payload) + } + }) + }, + removeSubscription ({ commit }, channelId) { + subDb.remove({ channelId: channelId }, {}, () => { + commit('setSubscriptions', this.state.subscriptions.filter(sub => sub.channelId !== channelId)) + }) + } +} +const getters = {} +export default { + state, + getters, + actions, + mutations +} diff --git a/src/renderer/store/modules/ytdl.js b/src/renderer/store/modules/ytdl.js index eeca4290..a37815d3 100644 --- a/src/renderer/store/modules/ytdl.js +++ b/src/renderer/store/modules/ytdl.js @@ -118,7 +118,7 @@ const actions = { return new Promise((resolve, reject) => { console.log(playlistId) console.log('Getting playlist info please wait...') - ytpl(playlistId, (err, result) => { + ytpl(playlistId, { limit: 0 }, (err, result) => { if (err) { reject(err) } else { diff --git a/src/renderer/videoJS.css b/src/renderer/videoJS.css index c678e93c..75dca2ed 100644 --- a/src/renderer/videoJS.css +++ b/src/renderer/videoJS.css @@ -1,7 +1,7 @@ @charset "UTF-8"; .vjs-modal-dialog .vjs-modal-dialog-content, .video-js .vjs-modal-dialog, .vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before { position: absolute; - top: 3px; + top: 0px; left: 0; width: 100%; height: 100%; diff --git a/src/renderer/views/Playlist/Playlist.js b/src/renderer/views/Playlist/Playlist.js index 35608def..7a96add1 100644 --- a/src/renderer/views/Playlist/Playlist.js +++ b/src/renderer/views/Playlist/Playlist.js @@ -18,7 +18,7 @@ export default Vue.extend({ data: function () { return { isLoading: false, - playlistId: '', + playlistId: null, nextPageRef: '', lastSearchQuery: '', playlistPage: 1, @@ -82,13 +82,14 @@ export default Vue.extend({ id: result.id, title: result.title, description: result.description, - thumbnail: result.items[randomVideoIndex].thumbnail, + randomVideoId: result.items[randomVideoIndex].id, viewCount: result.views, videoCount: result.total_items, lastUpdated: result.last_updated, channelName: result.author.name, channelThumbnail: result.author.avatar, - channelId: result.author.id + channelId: result.author.id, + infoSource: 'local' } this.playlistItems = result.items @@ -127,12 +128,13 @@ export default Vue.extend({ id: result.playlistId, title: result.title, description: result.description, - thumbnail: result.videos[randomVideoIndex].videoThumbnails[0].url, + randomVideoId: result.videos[randomVideoIndex].videoId, viewCount: result.viewCount, videoCount: result.videoCount, channelName: result.author, channelThumbnail: result.authorThumbnails[2].url, - channelId: result.authorId + channelId: result.authorId, + infoSource: 'invidious' } const dateString = new Date(result.updated * 1000) diff --git a/src/renderer/views/Playlist/Playlist.vue b/src/renderer/views/Playlist/Playlist.vue index 97dfcf12..4974145c 100644 --- a/src/renderer/views/Playlist/Playlist.vue +++ b/src/renderer/views/Playlist/Playlist.vue @@ -9,18 +9,21 @@ :data="infoData" class="playlistInfo" /> - - - + + + + diff --git a/src/renderer/views/Watch/Watch.css b/src/renderer/views/Watch/Watch.css index a676c712..c7bac958 100644 --- a/src/renderer/views/Watch/Watch.css +++ b/src/renderer/views/Watch/Watch.css @@ -27,14 +27,40 @@ margin-bottom: 10px; } -.watchVideoRecommendations { +.watchVideoSideBar { width: 27%; max-width: 425px; float: right; margin-bottom: 10px; position: absolute; - top: 70px; +} + +.watchVideoPlaylist { right: 10px; + top: 70px; + height: 500px; +} + +.theatrePlaylist { + float: none; + margin: 0 auto; + width: 85%; + height: 500px; + margin-bottom: 10px; + max-width: none; + position: static; +} + +.watchVideoRecommendations { + right: 10px; +} + +.watchVideoRecommendationsNoCard { + top: 70px; +} + +.watchVideoRecommendationsLowerCard { + top: 600px; } .theatreRecommendations { @@ -78,6 +104,14 @@ margin-bottom: 10px; } + .watchVideoPlaylist { + float: none; + margin: 0 auto; + width: 85%; + max-width: none; + position: static; + } + .watchVideoRecommendations { float: none; margin: 0 auto; diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js index 7c64fc6d..840f6e76 100644 --- a/src/renderer/views/Watch/Watch.js +++ b/src/renderer/views/Watch/Watch.js @@ -8,6 +8,7 @@ import FtVideoPlayer from '../../components/ft-video-player/ft-video-player.vue' import WatchVideoInfo from '../../components/watch-video-info/watch-video-info.vue' import WatchVideoDescription from '../../components/watch-video-description/watch-video-description.vue' import WatchVideoComments from '../../components/watch-video-comments/watch-video-comments.vue' +import WatchVideoPlaylist from '../../components/watch-video-playlist/watch-video-playlist.vue' import WatchVideoRecommendations from '../../components/watch-video-recommendations/watch-video-recommendations.vue' export default Vue.extend({ @@ -20,6 +21,7 @@ export default Vue.extend({ 'watch-video-info': WatchVideoInfo, 'watch-video-description': WatchVideoDescription, 'watch-video-comments': WatchVideoComments, + 'watch-video-playlist': WatchVideoPlaylist, 'watch-video-recommendations': WatchVideoRecommendations, }, data: function() { @@ -31,6 +33,7 @@ export default Vue.extend({ showLegacyPlayer: false, showYouTubeNoCookieEmbed: false, hidePlayer: false, + isLive: false, activeFormat: 'legacy', videoId: '', videoTitle: '', @@ -49,6 +52,8 @@ export default Vue.extend({ videoSourceList: [], captionSourceList: [], recommendedVideos: [], + watchingPlaylist: false, + playlistId: '', } }, computed: { @@ -111,6 +116,8 @@ export default Vue.extend({ this.firstLoad = true + this.checkIfPlaylist() + switch (this.backendPreference) { case 'local': this.getVideoInformationLocal(this.videoId) @@ -125,13 +132,15 @@ export default Vue.extend({ } }, }, - mounted: function() { + mounted: function () { this.videoId = this.$route.params.id this.videoStoryboardSrc = `${this.invidiousInstance}/api/v1/storyboards/${this.videoId}?height=90` this.activeFormat = this.defaultVideoFormat this.useTheatreMode = this.defaultTheatreMode + this.checkIfPlaylist() + if (!this.usingElectron) { this.getVideoInformationInvidious() } else { @@ -158,6 +167,7 @@ export default Vue.extend({ this.$store .dispatch('ytGetVideoInformation', this.videoId) .then(result => { + console.log(result) this.videoTitle = result.title this.videoViewCount = parseInt( result.player_response.videoDetails.viewCount, @@ -170,9 +180,24 @@ export default Vue.extend({ this.videoDescription = result.player_response.videoDetails.shortDescription this.recommendedVideos = result.related_videos - this.videoSourceList = result.player_response.streamingData.formats this.videoLikeCount = result.likes this.videoDislikeCount = result.dislikes + this.isLive = result.player_response.videoDetails.isLive + + if (this.isLive) { + this.showLegacyPlayer = false + this.showDashPlayer = true + this.videoSourceList = [ + { + url: 'https://invidious.snopyta.org/api/manifest/dash/id/EEIk7gwjgIM', + type: 'application/dash+xml', + label: 'Dash', + qualityLabel: 'Auto' + }, + ] + } else { + this.videoSourceList = result.player_response.streamingData.formats + } // The response provides a storyboard, however it returns a 403 error. // Uncomment this line if that ever changes. @@ -275,6 +300,22 @@ export default Vue.extend({ }) }, + checkIfPlaylist: function () { + if (typeof (this.$route.query) !== 'undefined') { + console.log('defined') + console.log(this.$route.query) + this.playlistId = this.$route.query.playlistId + + if (typeof (this.playlistId) !== 'undefined') { + this.watchingPlaylist = true + } else { + this.watchingPlaylist = false + } + } else { + this.watchingPlaylist = false + } + }, + getLegacyFormats: function () { this.$store .dispatch('ytGetVideoInformation', this.videoId) @@ -296,7 +337,7 @@ export default Vue.extend({ }, 100) }, - enableLegacyFormat: function() { + enableLegacyFormat: function () { if (this.activeFormat === 'legacy') { return } @@ -309,6 +350,15 @@ export default Vue.extend({ }, 100) }, + handleVideoEnded: function () { + if (this.watchingPlaylist) { + console.log('Playlist next video in 5 seconds') + setTimeout(() => { + this.$refs.watchVideoPlaylist.playNextVideo() + }, 5000) + } + }, + handleVideoError: function(error) { console.log(error) if (error.code === 4) { diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue index df16f9a9..03fcacbd 100644 --- a/src/renderer/views/Watch/Watch.vue +++ b/src/renderer/views/Watch/Watch.vue @@ -14,6 +14,7 @@ class="videoPlayer" :class="{ theatrePlayer: useTheatreMode }" ref="videoPlayer" + @ended="handleVideoEnded" @error="handleVideoError" /> +
+ + +
+ {{ index + 1 }} +