TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

show "Next up" in related.

Browse source
This commit is contained in:
Alin 2023-02-17 12:21:15 +00:00
parent 8e74ee6c42
commit 6a6afa1f96
2 changed files with 68 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

53
src/components/VideoPlayer.vue
View file

@ -38,6 +38,12 @@ export default {
return {};
},
},
nextVideo: {
type: Object,
default: () => {
return {};
},
},
playlist: {
type: Object,
default: null,
@ -63,16 +69,12 @@ export default {
initialSeekComplete: false,
destroying: false,
inSegment: false,
nextVideo: null,
};
},
computed: {
shouldAutoPlay: _this => {
return _this.getPreferenceBoolean("playerAutoPlay", true) && !_this.isEmbed;
},
priorityAutoPlay: _this => {
return _this.getPreferenceBoolean("priorityAutoPlay", true) && !_this.isEmbed;
},
preferredVideoCodecs: _this => {
var preferredVideoCodecs = [];
const enabledCodecs = _this.getPreferenceString("enabledCodecs", "vp9,avc").split(",");
@ -408,9 +410,6 @@ export default {
}
});
}
if (this.priorityAutoPlay) {
this.setNextVideo();
}
//TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
},
@ -616,46 +615,6 @@ export default {
this.$refs.videoEl.currentTime = time;
}
},
async getWatchedRelatedVideos() {
var tx = window.db.transaction("watch_history", "readwrite");
var store = tx.objectStore("watch_history");
const results = [];
for (let i = 0; i < this.video.relatedStreams.length; i++) {
const video = this.video.relatedStreams[i];
const id = video.url.replace("/watch?v=", "");
const request = store.get(id);
results.push(request);
}
const data = results.map(result => {
return new Promise(resolve => {
result.onsuccess = function (event) {
const video = event.target.result;
resolve(video);
};
result.onerror = function () {
resolve(null);
};
});
});
return Promise.all(data);
},
async setNextVideo() {
const data = (await this.getWatchedRelatedVideos()).filter(video => video);
for (let i = 0; i < this.video.relatedStreams.length; i++) {
const video = this.video.relatedStreams[i];
const id = video.url.replace("/watch?v=", "");
const watched = data.find(video => video.videoId === id);
if (!watched) {
if (video.uploaderUrl === this.video.uploaderUrl) {
this.nextVideo = video;
return;
}
this.nextVideo = video;
return;
}
this.nextVideo = this.video.relatedStreams[0];
}
},
navigateNext() {
const params = this.$route.query;
const relatedUrl = this.nextVideo?.url ?? this.video.relatedStreams[0].url;

63
src/components/WatchVideo.vue
View file

@ -20,6 +20,7 @@
<VideoPlayer
ref="videoPlayer"
:video="video"
:next-video="nextVideo"
:sponsors="sponsors"
:playlist="playlist"
:index="index"
@ -203,8 +204,12 @@
/>
<hr v-show="showRecs" />
<div v-show="showRecs">
<div v-if="nextVideo" class="">
<p>Next up:</p>
<VideoItem :key="nextVideo.url" :item="nextVideo" height="94" width="168" />
</div>
<ContentItem
v-for="related in video.relatedStreams"
v-for="related in filteredRelatedStreams"
:key="related.url"
:item="related"
height="94"
@ -227,6 +232,7 @@ import PlaylistAddModal from "./PlaylistAddModal.vue";
import ShareModal from "./ShareModal.vue";
import PlaylistVideos from "./PlaylistVideos.vue";
import WatchOnYouTubeButton from "./WatchOnYouTubeButton.vue";
import VideoItem from "./VideoItem.vue";
export default {
name: "App",
@ -240,6 +246,7 @@ export default {
ShareModal,
PlaylistVideos,
WatchOnYouTubeButton,
VideoItem,
},
data() {
const smallViewQuery = window.matchMedia("(max-width: 640px)");
@ -247,6 +254,7 @@ export default {
video: {
title: "Loading...",
},
nextVideo: null,
playlistId: null,
playlist: null,
index: null,
@ -288,6 +296,12 @@ export default {
year: "numeric",
});
},
filteredRelatedStreams: _this => {
return _this.video.relatedStreams?.filter(video => video.url !== _this.nextVideo?.url);
},
priorityAutoPlay: _this => {
return _this.getPreferenceBoolean("priorityAutoPlay", true) && !_this.isEmbed;
},
},
mounted() {
// check screen size
@ -422,6 +436,9 @@ export default {
});
xmlDoc.querySelectorAll("br").forEach(elem => (elem.outerHTML = "\n"));
this.video.description = this.rewriteDescription(xmlDoc.querySelector("body").innerHTML);
if (this.priorityAutoPlay) {
this.setNextVideo();
}
}
});
},
@ -556,6 +573,50 @@ export default {
onTimeUpdate(time) {
this.currentTime = time;
},
async getWatchedRelatedVideos() {
var tx = window.db.transaction("watch_history", "readwrite");
var store = tx.objectStore("watch_history");
const results = [];
for (let i = 0; i < this.video.relatedStreams.length; i++) {
const video = this.video.relatedStreams[i];
const id = video.url.replace("/watch?v=", "");
const request = store.get(id);
results.push(request);
}
const data = results.map(result => {
return new Promise(resolve => {
result.onsuccess = function (event) {
const video = event.target.result;
resolve(video);
};
result.onerror = function () {
resolve(null);
};
});
});
return Promise.all(data);
},
async setNextVideo() {
const data = (await this.getWatchedRelatedVideos()).filter(video => video);
for (let i = 0; i < this.video.relatedStreams.length; i++) {
let foundAuthorMatch = false;
const video = this.video.relatedStreams[i];
const id = video.url.replace("/watch?v=", "");
const watched = data.find(video => video.videoId === id);
if (!watched) {
if (video.uploaderUrl === this.video.uploaderUrl) {
this.nextVideo = video;
foundAuthorMatch = true;
break;
} else if (!foundAuthorMatch) {
this.nextVideo = video;
}
}
if (!this.nextVideo) {
this.nextVideo = this.video.relatedStreams[0];
}
}
},
},
};
</script>