mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-08-14 23:57:27 +00:00
More fixes
This commit is contained in:
root
parent
d02641e802
commit
d8be46d849
18 changed files with 964 additions and 965 deletions
|
|
@ -36,7 +36,7 @@ export default {
|
|||
case 'trending':
|
||||
break
|
||||
case 'feed':
|
||||
this.$router.push('/feed')
|
||||
this.$router.replace('/feed')
|
||||
break
|
||||
default:
|
||||
break
|
||||
|
|
|
|||
|
|
@ -31,86 +31,86 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import ErrorHandler from "@/components/ErrorHandler.vue";
|
||||
import VideoItem from "@/components/VideoItem.vue";
|
||||
import ErrorHandler from '@/components/ErrorHandler.vue'
|
||||
import VideoItem from '@/components/VideoItem.vue'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
channel: null,
|
||||
subscribed: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getChannelData();
|
||||
},
|
||||
activated() {
|
||||
window.addEventListener("scroll", this.handleScroll);
|
||||
},
|
||||
deactivated() {
|
||||
window.removeEventListener("scroll", this.handleScroll);
|
||||
},
|
||||
methods: {
|
||||
async fetchSubscribedStatus() {
|
||||
this.fetchJson(
|
||||
this.apiUrl() + "/subscribed",
|
||||
{
|
||||
channelId: this.channel.id,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: this.getAuthToken(),
|
||||
},
|
||||
},
|
||||
).then(json => {
|
||||
this.subscribed = json.subscribed;
|
||||
});
|
||||
},
|
||||
async fetchChannel() {
|
||||
const url = this.apiUrl() + "/" + this.$route.params.path + "/" + this.$route.params.channelId;
|
||||
return await this.fetchJson(url);
|
||||
},
|
||||
async getChannelData() {
|
||||
this.fetchChannel()
|
||||
.then(data => (this.channel = data))
|
||||
.then(() => {
|
||||
if (!this.channel.error) {
|
||||
document.title = this.channel.name + " - Piped";
|
||||
if (this.authenticated) this.fetchSubscribedStatus();
|
||||
}
|
||||
});
|
||||
},
|
||||
handleScroll() {
|
||||
if (this.loading || !this.channel || !this.channel.nextpage) return;
|
||||
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
|
||||
this.loading = true;
|
||||
this.fetchJson(this.apiUrl() + "/nextpage/channel/" + this.channel.id, {
|
||||
nextpage: this.channel.nextpage,
|
||||
}).then(json => {
|
||||
this.channel.relatedStreams.concat(json.relatedStreams);
|
||||
this.channel.nextpage = json.nextpage;
|
||||
this.loading = false;
|
||||
json.relatedStreams.map(stream => this.channel.relatedStreams.push(stream));
|
||||
});
|
||||
}
|
||||
},
|
||||
subscribeHandler() {
|
||||
this.fetchJson(this.apiUrl() + (this.subscribed ? "/unsubscribe" : "/subscribe"), null, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
channelId: this.channel.id,
|
||||
}),
|
||||
headers: {
|
||||
Authorization: this.getAuthToken(),
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
this.subscribed = !this.subscribed;
|
||||
data () {
|
||||
return {
|
||||
channel: null,
|
||||
subscribed: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getChannelData()
|
||||
},
|
||||
activated () {
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
deactivated () {
|
||||
window.removeEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
methods: {
|
||||
async fetchSubscribedStatus () {
|
||||
this.fetchJson(
|
||||
this.apiUrl() + '/subscribed',
|
||||
{
|
||||
channelId: this.channel.id
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: this.getAuthToken()
|
||||
}
|
||||
}
|
||||
).then(json => {
|
||||
this.subscribed = json.subscribed
|
||||
})
|
||||
},
|
||||
components: {
|
||||
ErrorHandler,
|
||||
VideoItem,
|
||||
async fetchChannel () {
|
||||
const url = this.apiUrl() + '/' + this.$route.params.path + '/' + this.$route.params.channelId
|
||||
return await this.fetchJson(url)
|
||||
},
|
||||
};
|
||||
async getChannelData () {
|
||||
this.fetchChannel()
|
||||
.then(data => (this.channel = data))
|
||||
.then(() => {
|
||||
if (!this.channel.error) {
|
||||
document.title = this.channel.name + ' - Piped'
|
||||
if (this.authenticated) this.fetchSubscribedStatus()
|
||||
}
|
||||
})
|
||||
},
|
||||
handleScroll () {
|
||||
if (this.loading || !this.channel || !this.channel.nextpage) return
|
||||
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
|
||||
this.loading = true
|
||||
this.fetchJson(this.apiUrl() + '/nextpage/channel/' + this.channel.id, {
|
||||
nextpage: this.channel.nextpage
|
||||
}).then(json => {
|
||||
this.channel.relatedStreams.concat(json.relatedStreams)
|
||||
this.channel.nextpage = json.nextpage
|
||||
this.loading = false
|
||||
json.relatedStreams.map(stream => this.channel.relatedStreams.push(stream))
|
||||
})
|
||||
}
|
||||
},
|
||||
subscribeHandler () {
|
||||
this.fetchJson(this.apiUrl() + (this.subscribed ? '/unsubscribe' : '/subscribe'), null, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
channelId: this.channel.id
|
||||
}),
|
||||
headers: {
|
||||
Authorization: this.getAuthToken(),
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
this.subscribed = !this.subscribed
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ErrorHandler,
|
||||
VideoItem
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
error: String,
|
||||
message: String,
|
||||
},
|
||||
};
|
||||
props: {
|
||||
error: String,
|
||||
message: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -57,27 +57,27 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
videos: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
document.title = "Feed - Piped";
|
||||
data () {
|
||||
return {
|
||||
videos: []
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
document.title = 'Feed - Piped'
|
||||
|
||||
this.fetchFeed().then(videos => (this.videos = videos));
|
||||
},
|
||||
methods: {
|
||||
async fetchFeed() {
|
||||
return await this.fetchJson(this.apiUrl() + "/feed", {
|
||||
authToken: this.getAuthToken(),
|
||||
});
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
getRssUrl(_this) {
|
||||
return _this.apiUrl() + "/feed/rss?authToken=" + _this.getAuthToken();
|
||||
},
|
||||
},
|
||||
};
|
||||
this.fetchFeed().then(videos => (this.videos = videos))
|
||||
},
|
||||
methods: {
|
||||
async fetchFeed () {
|
||||
return await this.fetchJson(this.apiUrl() + '/feed', {
|
||||
authToken: this.getAuthToken()
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getRssUrl (_this) {
|
||||
return _this.apiUrl() + '/feed/rss?authToken=' + _this.getAuthToken()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -59,71 +59,71 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
subscriptions: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
selectedSubscriptions() {
|
||||
return this.subscriptions.length;
|
||||
},
|
||||
},
|
||||
activated() {
|
||||
if (!this.authenticated) this.$router.push("/login");
|
||||
},
|
||||
methods: {
|
||||
fileChange() {
|
||||
this.$refs.fileSelector.files[0].text().then(text => {
|
||||
this.subscriptions = [];
|
||||
data () {
|
||||
return {
|
||||
subscriptions: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedSubscriptions () {
|
||||
return this.subscriptions.length
|
||||
}
|
||||
},
|
||||
activated () {
|
||||
if (!this.authenticated) this.$router.push('/login')
|
||||
},
|
||||
methods: {
|
||||
fileChange () {
|
||||
this.$refs.fileSelector.files[0].text().then(text => {
|
||||
this.subscriptions = []
|
||||
|
||||
// Invidious
|
||||
if (text.indexOf("opml") != -1) {
|
||||
const parser = new DOMParser();
|
||||
const xmlDoc = parser.parseFromString(text, "text/xml");
|
||||
xmlDoc.querySelectorAll("outline[xmlUrl]").forEach(item => {
|
||||
const url = item.getAttribute("xmlUrl");
|
||||
const id = url.substr(-24);
|
||||
this.subscriptions.push(id);
|
||||
});
|
||||
}
|
||||
// NewPipe
|
||||
if (text.indexOf("app_version") != -1) {
|
||||
const json = JSON.parse(text);
|
||||
json.subscriptions
|
||||
.filter(item => item.service_id == 0)
|
||||
.forEach(item => {
|
||||
const url = item.url;
|
||||
const id = url.substr(-24);
|
||||
this.subscriptions.push(id);
|
||||
});
|
||||
}
|
||||
// Invidious JSON
|
||||
if (text.indexOf("thin_mode") != -1) {
|
||||
const json = JSON.parse(text);
|
||||
this.subscriptions = json.subscriptions;
|
||||
}
|
||||
// Google Takeout
|
||||
if (text.indexOf("contentDetails") != -1) {
|
||||
const json = JSON.parse(text);
|
||||
json.forEach(item => {
|
||||
const id = item.snippet.resourceId.channelId;
|
||||
this.subscriptions.push(id);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
handleImport() {
|
||||
this.fetchJson(this.apiUrl() + "/import", null, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Authorization: this.getAuthToken(),
|
||||
},
|
||||
body: JSON.stringify(this.subscriptions),
|
||||
}).then(json => {
|
||||
if (json.message === "ok") window.location = "/feed";
|
||||
});
|
||||
},
|
||||
// Invidious
|
||||
if (text.indexOf('opml') !== -1) {
|
||||
const parser = new DOMParser()
|
||||
const xmlDoc = parser.parseFromString(text, 'text/xml')
|
||||
xmlDoc.querySelectorAll('outline[xmlUrl]').forEach(item => {
|
||||
const url = item.getAttribute('xmlUrl')
|
||||
const id = url.substr(-24)
|
||||
this.subscriptions.push(id)
|
||||
})
|
||||
}
|
||||
// NewPipe
|
||||
if (text.indexOf('app_version') !== -1) {
|
||||
const json = JSON.parse(text)
|
||||
json.subscriptions
|
||||
.filter(item => item.service_id === 0)
|
||||
.forEach(item => {
|
||||
const url = item.url
|
||||
const id = url.substr(-24)
|
||||
this.subscriptions.push(id)
|
||||
})
|
||||
}
|
||||
// Invidious JSON
|
||||
if (text.indexOf('thin_mode') !== -1) {
|
||||
const json = JSON.parse(text)
|
||||
this.subscriptions = json.subscriptions
|
||||
}
|
||||
// Google Takeout
|
||||
if (text.indexOf('contentDetails') !== -1) {
|
||||
const json = JSON.parse(text)
|
||||
json.forEach(item => {
|
||||
const id = item.snippet.resourceId.channelId
|
||||
this.subscriptions.push(id)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
};
|
||||
handleImport () {
|
||||
this.fetchJson(this.apiUrl() + '/import', null, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Authorization: this.getAuthToken()
|
||||
},
|
||||
body: JSON.stringify(this.subscriptions)
|
||||
}).then(json => {
|
||||
if (json.message === 'ok') window.location = '/feed'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -33,34 +33,34 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: null,
|
||||
password: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
//TODO: Add Server Side check
|
||||
if (this.getAuthToken()) {
|
||||
this.$router.push("/");
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
login() {
|
||||
console.log("authToken" + this.hashCode(this.apiUrl()));
|
||||
this.fetchJson(this.apiUrl() + "/login", null, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
username: this.username,
|
||||
password: this.password,
|
||||
}),
|
||||
}).then(resp => {
|
||||
if (resp.token) {
|
||||
this.setPreference("authToken" + this.hashCode(this.apiUrl()), resp.token);
|
||||
window.location = "/"; // done to bypass cache
|
||||
} else alert(resp.error);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
data () {
|
||||
return {
|
||||
username: null,
|
||||
password: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// TODO: Add Server Side check
|
||||
if (this.getAuthToken()) {
|
||||
this.$router.push('/')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
login () {
|
||||
console.log('authToken' + this.hashCode(this.apiUrl()))
|
||||
this.fetchJson(this.apiUrl() + '/login', null, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
username: this.username,
|
||||
password: this.password
|
||||
})
|
||||
}).then(resp => {
|
||||
if (resp.token) {
|
||||
this.setPreference('authToken' + this.hashCode(this.apiUrl()), resp.token)
|
||||
window.location = '/' // done to bypass cache
|
||||
} else alert(resp.error)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -57,48 +57,48 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import SearchSuggestions from "@/components/SearchSuggestions";
|
||||
import SearchSuggestions from '@/components/SearchSuggestions'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SearchSuggestions,
|
||||
components: {
|
||||
SearchSuggestions
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
searchText: '',
|
||||
suggestionsVisible: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
shouldShowLogin (_this) {
|
||||
return _this.getAuthToken() == null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onKeyUp (e) {
|
||||
if (e.key === 'Enter') {
|
||||
e.target.blur()
|
||||
this.$router.push({
|
||||
name: 'SearchResults',
|
||||
query: { search_query: this.searchText }
|
||||
})
|
||||
return
|
||||
} else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
|
||||
e.preventDefault()
|
||||
}
|
||||
this.$refs.searchSuggestions.onKeyUp(e)
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchText: "",
|
||||
suggestionsVisible: false,
|
||||
};
|
||||
onInputFocus () {
|
||||
this.suggestionsVisible = true
|
||||
},
|
||||
computed: {
|
||||
shouldShowLogin(_this) {
|
||||
return _this.getAuthToken() == null;
|
||||
},
|
||||
onInputBlur () {
|
||||
this.suggestionsVisible = false
|
||||
},
|
||||
methods: {
|
||||
onKeyUp(e) {
|
||||
if (e.key === "Enter") {
|
||||
e.target.blur();
|
||||
this.$router.push({
|
||||
name: "SearchResults",
|
||||
query: { search_query: this.searchText },
|
||||
});
|
||||
return;
|
||||
} else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
|
||||
e.preventDefault();
|
||||
}
|
||||
this.$refs.searchSuggestions.onKeyUp(e);
|
||||
},
|
||||
onInputFocus() {
|
||||
this.suggestionsVisible = true;
|
||||
},
|
||||
onInputBlur() {
|
||||
this.suggestionsVisible = false;
|
||||
},
|
||||
onSearchTextChange(searchText) {
|
||||
this.searchText = searchText;
|
||||
},
|
||||
},
|
||||
};
|
||||
onSearchTextChange (searchText) {
|
||||
this.searchText = searchText
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
|
|
|||
|
|
@ -17,255 +17,255 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import("shaka-player/dist/controls.css");
|
||||
const shaka = import("shaka-player/dist/shaka-player.ui.js");
|
||||
import muxjs from "mux.js";
|
||||
window.muxjs = muxjs;
|
||||
import muxjs from 'mux.js'
|
||||
import('shaka-player/dist/controls.css')
|
||||
const shaka = import('shaka-player/dist/shaka-player.ui.js')
|
||||
window.muxjs = muxjs
|
||||
|
||||
export default {
|
||||
props: {
|
||||
video: Object,
|
||||
sponsors: Object,
|
||||
selectedAutoPlay: Boolean,
|
||||
selectedAutoLoop: Boolean,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
player: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
shouldAutoPlay: _this => {
|
||||
return _this.getPreferenceBoolean("playerAutoPlay", true);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (!this.shaka) this.shakaPromise = shaka.then(shaka => shaka.default).then(shaka => (this.shaka = shaka));
|
||||
},
|
||||
methods: {
|
||||
loadVideo() {
|
||||
const component = this;
|
||||
const videoEl = this.$refs.videoEl;
|
||||
props: {
|
||||
video: Object,
|
||||
sponsors: Object,
|
||||
selectedAutoPlay: Boolean,
|
||||
selectedAutoLoop: Boolean
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
player: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
shouldAutoPlay: _this => {
|
||||
return _this.getPreferenceBoolean('playerAutoPlay', true)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (!this.shaka) this.shakaPromise = shaka.then(shaka => shaka.default).then(shaka => (this.shaka = shaka))
|
||||
},
|
||||
methods: {
|
||||
loadVideo () {
|
||||
const component = this
|
||||
const videoEl = this.$refs.videoEl
|
||||
|
||||
videoEl.setAttribute("poster", this.video.thumbnailUrl);
|
||||
videoEl.setAttribute('poster', this.video.thumbnailUrl)
|
||||
|
||||
if (this.$route.query.t) videoEl.currentTime = this.$route.query.t;
|
||||
if (this.$route.query.t) videoEl.currentTime = this.$route.query.t
|
||||
|
||||
const noPrevPlayer = !this.player;
|
||||
const noPrevPlayer = !this.player
|
||||
|
||||
var streams = [];
|
||||
const streams = []
|
||||
|
||||
streams.push(...this.video.audioStreams);
|
||||
streams.push(...this.video.videoStreams);
|
||||
streams.push(...this.video.audioStreams)
|
||||
streams.push(...this.video.videoStreams)
|
||||
|
||||
const MseSupport = window.MediaSource !== undefined;
|
||||
const MseSupport = window.MediaSource !== undefined
|
||||
|
||||
var uri;
|
||||
let uri
|
||||
|
||||
if (this.video.livestream) {
|
||||
uri = this.video.hls;
|
||||
} else if (this.video.audioStreams.length > 0 && MseSupport) {
|
||||
const dash = require("@/utils/DashUtils.js").default.generate_dash_file_from_formats(
|
||||
streams,
|
||||
this.video.duration,
|
||||
);
|
||||
if (this.video.livestream) {
|
||||
uri = this.video.hls
|
||||
} else if (this.video.audioStreams.length > 0 && MseSupport) {
|
||||
const dash = require('@/utils/DashUtils.js').default.generate_dash_file_from_formats(
|
||||
streams,
|
||||
this.video.duration
|
||||
)
|
||||
|
||||
uri = "data:application/dash+xml;charset=utf-8;base64," + btoa(dash);
|
||||
} else {
|
||||
uri = this.video.videoStreams.filter(stream => stream.codec == null).slice(-1)[0].url;
|
||||
uri = 'data:application/dash+xml;charset=utf-8;base64,' + btoa(dash)
|
||||
} else {
|
||||
uri = this.video.videoStreams.filter(stream => stream.codec == null).slice(-1)[0].url
|
||||
}
|
||||
|
||||
if (noPrevPlayer) {
|
||||
this.shakaPromise.then(() => {
|
||||
this.shaka.polyfill.installAll()
|
||||
|
||||
const localPlayer = new this.shaka.Player(videoEl)
|
||||
|
||||
localPlayer.getNetworkingEngine().registerRequestFilter((_type, request) => {
|
||||
const uri = request.uris[0]
|
||||
const url = new URL(uri)
|
||||
if (url.host.endsWith('.googlevideo.com')) {
|
||||
url.searchParams.set('host', url.host)
|
||||
url.host = new URL(component.video.proxyUrl).host
|
||||
request.uris[0] = url.toString()
|
||||
}
|
||||
})
|
||||
|
||||
if (noPrevPlayer)
|
||||
this.shakaPromise.then(() => {
|
||||
this.shaka.polyfill.installAll();
|
||||
localPlayer.configure(
|
||||
'streaming.bufferingGoal',
|
||||
Math.max(this.getPreferenceNumber('bufferGoal', 10), 10)
|
||||
)
|
||||
|
||||
const localPlayer = new this.shaka.Player(videoEl);
|
||||
this.setPlayerAttrs(localPlayer, videoEl, uri, this.shaka)
|
||||
})
|
||||
} else this.setPlayerAttrs(this.player, videoEl, uri, this.shaka)
|
||||
|
||||
localPlayer.getNetworkingEngine().registerRequestFilter((_type, request) => {
|
||||
const uri = request.uris[0];
|
||||
var url = new URL(uri);
|
||||
if (url.host.endsWith(".googlevideo.com")) {
|
||||
url.searchParams.set("host", url.host);
|
||||
url.host = new URL(component.video.proxyUrl).host;
|
||||
request.uris[0] = url.toString();
|
||||
}
|
||||
});
|
||||
|
||||
localPlayer.configure(
|
||||
"streaming.bufferingGoal",
|
||||
Math.max(this.getPreferenceNumber("bufferGoal", 10), 10),
|
||||
);
|
||||
|
||||
this.setPlayerAttrs(localPlayer, videoEl, uri, this.shaka);
|
||||
});
|
||||
else this.setPlayerAttrs(this.player, videoEl, uri, this.shaka);
|
||||
|
||||
if (noPrevPlayer) {
|
||||
videoEl.addEventListener("timeupdate", () => {
|
||||
if (this.sponsors && this.sponsors.segments) {
|
||||
const time = videoEl.currentTime;
|
||||
this.sponsors.segments.map(segment => {
|
||||
if (!segment.skipped || this.selectedAutoLoop) {
|
||||
const end = segment.segment[1];
|
||||
if (time >= segment.segment[0] && time < end) {
|
||||
console.log("Skipped segment at " + time);
|
||||
videoEl.currentTime = end;
|
||||
segment.skipped = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
videoEl.addEventListener("volumechange", () => {
|
||||
this.setPreference("volume", videoEl.volume);
|
||||
});
|
||||
|
||||
videoEl.addEventListener("ended", () => {
|
||||
if (!this.selectedAutoLoop && this.selectedAutoPlay && this.video.relatedStreams.length > 0) {
|
||||
const params = this.$route.query;
|
||||
let url = this.video.relatedStreams[0].url;
|
||||
const searchParams = new URLSearchParams();
|
||||
for (var param in params)
|
||||
switch (param) {
|
||||
case "v":
|
||||
case "t":
|
||||
break;
|
||||
default:
|
||||
searchParams.set(param, params[param]);
|
||||
break;
|
||||
}
|
||||
const paramStr = searchParams.toString();
|
||||
if (paramStr.length > 0) url += "&" + paramStr;
|
||||
this.$router.push(url);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
|
||||
},
|
||||
setPlayerAttrs(localPlayer, videoEl, uri, shaka) {
|
||||
if (!this.ui) {
|
||||
this.ui = new shaka.ui.Overlay(localPlayer, this.$refs.container, videoEl);
|
||||
|
||||
const config = {
|
||||
overflowMenuButtons: ["quality", "captions", "picture_in_picture", "playback_rate"],
|
||||
seekBarColors: {
|
||||
base: "rgba(255, 255, 255, 0.3)",
|
||||
buffered: "rgba(255, 255, 255, 0.54)",
|
||||
played: "rgb(255, 0, 0)",
|
||||
},
|
||||
};
|
||||
|
||||
this.ui.configure(config);
|
||||
}
|
||||
|
||||
const player = this.ui.getControls().getPlayer();
|
||||
|
||||
this.player = player;
|
||||
|
||||
const disableVideo = this.getPreferenceBoolean("listen", false) && !this.video.livestream;
|
||||
|
||||
this.player.configure({
|
||||
preferredVideoCodecs: ["av01", "vp9", "avc1"],
|
||||
preferredAudioCodecs: ["opus", "mp4a"],
|
||||
manifest: {
|
||||
disableVideo: disableVideo,
|
||||
},
|
||||
});
|
||||
|
||||
const quality = this.getPreferenceNumber("quality", 0);
|
||||
const qualityConds =
|
||||
quality > 0 && (this.video.audioStreams.length > 0 || this.video.livestream) && !disableVideo;
|
||||
if (qualityConds) this.player.configure("abr.enabled", false);
|
||||
|
||||
player.load(uri, 0, uri.indexOf("dash+xml") >= 0 ? "application/dash+xml" : "video/mp4").then(() => {
|
||||
if (qualityConds) {
|
||||
var leastDiff = Number.MAX_VALUE;
|
||||
var bestStream = null;
|
||||
player
|
||||
.getVariantTracks()
|
||||
.sort((a, b) => a.bandwidth - b.bandwidth)
|
||||
.forEach(stream => {
|
||||
const diff = Math.abs(quality - stream.height);
|
||||
if (diff < leastDiff) {
|
||||
leastDiff = diff;
|
||||
bestStream = stream;
|
||||
}
|
||||
});
|
||||
player.selectVariantTrack(bestStream);
|
||||
if (noPrevPlayer) {
|
||||
videoEl.addEventListener('timeupdate', () => {
|
||||
if (this.sponsors && this.sponsors.segments) {
|
||||
const time = videoEl.currentTime
|
||||
this.sponsors.segments.forEach(segment => {
|
||||
if (!segment.skipped || this.selectedAutoLoop) {
|
||||
const end = segment.segment[1]
|
||||
if (time >= segment.segment[0] && time < end) {
|
||||
console.log('Skipped segment at ' + time)
|
||||
videoEl.currentTime = end
|
||||
segment.skipped = true
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
this.video.subtitles.map(subtitle => {
|
||||
player.addTextTrackAsync(
|
||||
subtitle.url,
|
||||
subtitle.code,
|
||||
"SUBTITLE",
|
||||
subtitle.mimeType,
|
||||
null,
|
||||
subtitle.name,
|
||||
);
|
||||
});
|
||||
videoEl.volume = this.getPreferenceNumber("volume", 1);
|
||||
});
|
||||
},
|
||||
videoEl.addEventListener('volumechange', () => {
|
||||
this.setPreference('volume', videoEl.volume)
|
||||
})
|
||||
|
||||
videoEl.addEventListener('ended', () => {
|
||||
if (!this.selectedAutoLoop && this.selectedAutoPlay && this.video.relatedStreams.length > 0) {
|
||||
const params = this.$route.query
|
||||
let url = this.video.relatedStreams[0].url
|
||||
const searchParams = new URLSearchParams()
|
||||
for (const param in params) {
|
||||
switch (param) {
|
||||
case 'v':
|
||||
case 't':
|
||||
break
|
||||
default:
|
||||
searchParams.set(param, params[param])
|
||||
break
|
||||
}
|
||||
}
|
||||
const paramStr = searchParams.toString()
|
||||
if (paramStr.length > 0) url += '&' + paramStr
|
||||
this.$router.push(url)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
|
||||
},
|
||||
activated() {
|
||||
import("hotkeys-js")
|
||||
.then(mod => mod.default)
|
||||
.then(hotkeys => {
|
||||
this.hotkeys = hotkeys;
|
||||
var self = this;
|
||||
hotkeys("f,m,space,up,down,left,right", function(e, handler) {
|
||||
const videoEl = self.$refs.videoEl;
|
||||
switch (handler.key) {
|
||||
case "f":
|
||||
if (document.fullscreenElement) document.exitFullscreen();
|
||||
else self.$refs.container.requestFullscreen();
|
||||
e.preventDefault();
|
||||
break;
|
||||
case "m":
|
||||
videoEl.muted = !videoEl.muted;
|
||||
e.preventDefault();
|
||||
break;
|
||||
case "space":
|
||||
if (videoEl.paused) videoEl.play();
|
||||
else videoEl.pause();
|
||||
e.preventDefault();
|
||||
break;
|
||||
case "up":
|
||||
videoEl.volume = Math.min(videoEl.volume + 0.05, 1);
|
||||
e.preventDefault();
|
||||
break;
|
||||
case "down":
|
||||
videoEl.volume = Math.max(videoEl.volume - 0.05, 0);
|
||||
e.preventDefault();
|
||||
break;
|
||||
case "left":
|
||||
videoEl.currentTime = Math.max(videoEl.currentTime - 5, 0);
|
||||
e.preventDefault();
|
||||
break;
|
||||
case "right":
|
||||
videoEl.currentTime = videoEl.currentTime + 5;
|
||||
e.preventDefault();
|
||||
break;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
deactivated() {
|
||||
if (this.ui) {
|
||||
this.ui.destroy();
|
||||
this.ui = undefined;
|
||||
this.player = undefined;
|
||||
setPlayerAttrs (localPlayer, videoEl, uri, shaka) {
|
||||
if (!this.ui) {
|
||||
this.ui = new shaka.ui.Overlay(localPlayer, this.$refs.container, videoEl)
|
||||
|
||||
const config = {
|
||||
overflowMenuButtons: ['quality', 'captions', 'picture_in_picture', 'playback_rate'],
|
||||
seekBarColors: {
|
||||
base: 'rgba(255, 255, 255, 0.3)',
|
||||
buffered: 'rgba(255, 255, 255, 0.54)',
|
||||
played: 'rgb(255, 0, 0)'
|
||||
}
|
||||
}
|
||||
if (this.player) {
|
||||
this.player.destroy();
|
||||
this.player = undefined;
|
||||
|
||||
this.ui.configure(config)
|
||||
}
|
||||
|
||||
const player = this.ui.getControls().getPlayer()
|
||||
|
||||
this.player = player
|
||||
|
||||
const disableVideo = this.getPreferenceBoolean('listen', false) && !this.video.livestream
|
||||
|
||||
this.player.configure({
|
||||
preferredVideoCodecs: ['av01', 'vp9', 'avc1'],
|
||||
preferredAudioCodecs: ['opus', 'mp4a'],
|
||||
manifest: {
|
||||
disableVideo: disableVideo
|
||||
}
|
||||
if (this.hotkeys) this.hotkeys.unbind();
|
||||
this.$refs.container.querySelectorAll("div").forEach(node => node.remove());
|
||||
},
|
||||
};
|
||||
})
|
||||
|
||||
const quality = this.getPreferenceNumber('quality', 0)
|
||||
const qualityConds =
|
||||
quality > 0 && (this.video.audioStreams.length > 0 || this.video.livestream) && !disableVideo
|
||||
if (qualityConds) this.player.configure('abr.enabled', false)
|
||||
|
||||
player.load(uri, 0, uri.indexOf('dash+xml') >= 0 ? 'application/dash+xml' : 'video/mp4').then(() => {
|
||||
if (qualityConds) {
|
||||
let leastDiff = Number.MAX_VALUE
|
||||
let bestStream = null
|
||||
player
|
||||
.getVariantTracks()
|
||||
.sort((a, b) => a.bandwidth - b.bandwidth)
|
||||
.forEach(stream => {
|
||||
const diff = Math.abs(quality - stream.height)
|
||||
if (diff < leastDiff) {
|
||||
leastDiff = diff
|
||||
bestStream = stream
|
||||
}
|
||||
})
|
||||
player.selectVariantTrack(bestStream)
|
||||
}
|
||||
|
||||
this.video.subtitles.forEach(subtitle => {
|
||||
player.addTextTrackAsync(
|
||||
subtitle.url,
|
||||
subtitle.code,
|
||||
'SUBTITLE',
|
||||
subtitle.mimeType,
|
||||
null,
|
||||
subtitle.name
|
||||
)
|
||||
})
|
||||
videoEl.volume = this.getPreferenceNumber('volume', 1)
|
||||
})
|
||||
}
|
||||
},
|
||||
activated () {
|
||||
import('hotkeys-js')
|
||||
.then(mod => mod.default)
|
||||
.then(hotkeys => {
|
||||
this.hotkeys = hotkeys
|
||||
const self = this
|
||||
hotkeys('f,m,space,up,down,left,right', function (e, handler) {
|
||||
const videoEl = self.$refs.videoEl
|
||||
switch (handler.key) {
|
||||
case 'f':
|
||||
if (document.fullscreenElement) document.exitFullscreen()
|
||||
else self.$refs.container.requestFullscreen()
|
||||
e.preventDefault()
|
||||
break
|
||||
case 'm':
|
||||
videoEl.muted = !videoEl.muted
|
||||
e.preventDefault()
|
||||
break
|
||||
case 'space':
|
||||
if (videoEl.paused) videoEl.play()
|
||||
else videoEl.pause()
|
||||
e.preventDefault()
|
||||
break
|
||||
case 'up':
|
||||
videoEl.volume = Math.min(videoEl.volume + 0.05, 1)
|
||||
e.preventDefault()
|
||||
break
|
||||
case 'down':
|
||||
videoEl.volume = Math.max(videoEl.volume - 0.05, 0)
|
||||
e.preventDefault()
|
||||
break
|
||||
case 'left':
|
||||
videoEl.currentTime = Math.max(videoEl.currentTime - 5, 0)
|
||||
e.preventDefault()
|
||||
break
|
||||
case 'right':
|
||||
videoEl.currentTime = videoEl.currentTime + 5
|
||||
e.preventDefault()
|
||||
break
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
deactivated () {
|
||||
if (this.ui) {
|
||||
this.ui.destroy()
|
||||
this.ui = undefined
|
||||
this.player = undefined
|
||||
}
|
||||
if (this.player) {
|
||||
this.player.destroy()
|
||||
this.player = undefined
|
||||
}
|
||||
if (this.hotkeys) this.hotkeys.unbind()
|
||||
this.$refs.container.querySelectorAll('div').forEach(node => node.remove())
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -35,56 +35,56 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import ErrorHandler from "@/components/ErrorHandler.vue";
|
||||
import VideoItem from "@/components/VideoItem.vue";
|
||||
import ErrorHandler from '@/components/ErrorHandler.vue'
|
||||
import VideoItem from '@/components/VideoItem.vue'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
playlist: null,
|
||||
};
|
||||
data () {
|
||||
return {
|
||||
playlist: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getPlaylistData()
|
||||
},
|
||||
activated () {
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
deactivated () {
|
||||
window.removeEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
computed: {
|
||||
getRssUrl: _this => {
|
||||
return _this.apiUrl() + '/rss/playlists/' + _this.$route.query.list
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async fetchPlaylist () {
|
||||
return await await this.fetchJson(this.apiUrl() + '/playlists/' + this.$route.query.list)
|
||||
},
|
||||
mounted() {
|
||||
this.getPlaylistData();
|
||||
async getPlaylistData () {
|
||||
this.fetchPlaylist()
|
||||
.then(data => (this.playlist = data))
|
||||
.then(() => (document.title = this.playlist.name + ' - Piped'))
|
||||
},
|
||||
activated() {
|
||||
window.addEventListener("scroll", this.handleScroll);
|
||||
},
|
||||
deactivated() {
|
||||
window.removeEventListener("scroll", this.handleScroll);
|
||||
},
|
||||
computed: {
|
||||
getRssUrl: _this => {
|
||||
return _this.apiUrl() + "/rss/playlists/" + _this.$route.query.list;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async fetchPlaylist() {
|
||||
return await await this.fetchJson(this.apiUrl() + "/playlists/" + this.$route.query.list);
|
||||
},
|
||||
async getPlaylistData() {
|
||||
this.fetchPlaylist()
|
||||
.then(data => (this.playlist = data))
|
||||
.then(() => (document.title = this.playlist.name + " - Piped"));
|
||||
},
|
||||
handleScroll() {
|
||||
if (this.loading || !this.playlist || !this.playlist.nextpage) return;
|
||||
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
|
||||
this.loading = true;
|
||||
this.fetchJson(this.apiUrl() + "/nextpage/playlists/" + this.$route.query.list, {
|
||||
nextpage: this.playlist.nextpage,
|
||||
}).then(json => {
|
||||
this.playlist.relatedStreams.concat(json.relatedStreams);
|
||||
this.playlist.nextpage = json.nextpage;
|
||||
this.loading = false;
|
||||
json.relatedStreams.map(stream => this.playlist.relatedStreams.push(stream));
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
ErrorHandler,
|
||||
VideoItem,
|
||||
},
|
||||
};
|
||||
handleScroll () {
|
||||
if (this.loading || !this.playlist || !this.playlist.nextpage) return
|
||||
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
|
||||
this.loading = true
|
||||
this.fetchJson(this.apiUrl() + '/nextpage/playlists/' + this.$route.query.list, {
|
||||
nextpage: this.playlist.nextpage
|
||||
}).then(json => {
|
||||
this.playlist.relatedStreams.concat(json.relatedStreams)
|
||||
this.playlist.nextpage = json.nextpage
|
||||
this.loading = false
|
||||
json.relatedStreams.map(stream => this.playlist.relatedStreams.push(stream))
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ErrorHandler,
|
||||
VideoItem
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -112,139 +112,139 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import CountryMap from "@/utils/CountryMap.js";
|
||||
import CountryMap from '@/utils/CountryMap.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedInstance: null,
|
||||
instances: [],
|
||||
sponsorBlock: true,
|
||||
skipSponsor: true,
|
||||
skipIntro: false,
|
||||
skipOutro: false,
|
||||
skipPreview: false,
|
||||
skipInteraction: true,
|
||||
skipSelfPromo: true,
|
||||
skipMusicOffTopic: true,
|
||||
selectedTheme: "dark",
|
||||
autoPlayVideo: true,
|
||||
listen: false,
|
||||
resolutions: [144, 240, 360, 480, 720, 1080, 1440, 2160, 4320],
|
||||
defaultQuality: 0,
|
||||
bufferingGoal: 10,
|
||||
countryMap: CountryMap.COUNTRIES,
|
||||
country: "US",
|
||||
defaultHomepage: "trending",
|
||||
showComments: true,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (Object.keys(this.$route.query).length > 0) this.$router.replace({ query: {} });
|
||||
data () {
|
||||
return {
|
||||
selectedInstance: null,
|
||||
instances: [],
|
||||
sponsorBlock: true,
|
||||
skipSponsor: true,
|
||||
skipIntro: false,
|
||||
skipOutro: false,
|
||||
skipPreview: false,
|
||||
skipInteraction: true,
|
||||
skipSelfPromo: true,
|
||||
skipMusicOffTopic: true,
|
||||
selectedTheme: 'dark',
|
||||
autoPlayVideo: true,
|
||||
listen: false,
|
||||
resolutions: [144, 240, 360, 480, 720, 1080, 1440, 2160, 4320],
|
||||
defaultQuality: 0,
|
||||
bufferingGoal: 10,
|
||||
countryMap: CountryMap.COUNTRIES,
|
||||
country: 'US',
|
||||
defaultHomepage: 'trending',
|
||||
showComments: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (Object.keys(this.$route.query).length > 0) this.$router.replace({ query: {} })
|
||||
|
||||
fetch("https://raw.githubusercontent.com/wiki/TeamPiped/Piped-Frontend/Instances.md")
|
||||
.then(resp => resp.text())
|
||||
.then(body => {
|
||||
var skipped = 0;
|
||||
const lines = body.split("\n");
|
||||
lines.map(line => {
|
||||
const split = line.split("|");
|
||||
if (split.length == 4) {
|
||||
if (skipped < 2) {
|
||||
skipped++;
|
||||
return;
|
||||
}
|
||||
this.instances.push({
|
||||
name: split[0].trim(),
|
||||
apiurl: split[1].trim(),
|
||||
locations: split[2].trim(),
|
||||
cdn: split[3].trim(),
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (localStorage) {
|
||||
this.selectedInstance = this.getPreferenceString("instance", "https://pipedapi.kavin.rocks");
|
||||
|
||||
this.sponsorBlock = this.getPreferenceBoolean("sponsorblock", true);
|
||||
if (localStorage.getItem("selectedSkip") !== null) {
|
||||
var skipList = localStorage.getItem("selectedSkip").split(",");
|
||||
this.skipSponsor = this.skipIntro = this.skipOutro = this.skipPreview = this.skipInteraction = this.skipSelfPromo = this.skipMusicOffTopic = false;
|
||||
skipList.forEach(skip => {
|
||||
switch (skip) {
|
||||
case "sponsor":
|
||||
this.skipSponsor = true;
|
||||
break;
|
||||
case "intro":
|
||||
this.skipIntro = true;
|
||||
break;
|
||||
case "outro":
|
||||
this.skipOutro = true;
|
||||
break;
|
||||
case "preview":
|
||||
this.skipPreview = true;
|
||||
break;
|
||||
case "interaction":
|
||||
this.skipInteraction = true;
|
||||
break;
|
||||
case "selfpromo":
|
||||
this.skipSelfPromo = true;
|
||||
break;
|
||||
case "music_offtopic":
|
||||
this.skipMusicOffTopic = true;
|
||||
break;
|
||||
default:
|
||||
console.log("Unknown sponsor type: " + skip);
|
||||
break;
|
||||
}
|
||||
});
|
||||
fetch('https://raw.githubusercontent.com/wiki/TeamPiped/Piped-Frontend/Instances.md')
|
||||
.then(resp => resp.text())
|
||||
.then(body => {
|
||||
let skipped = 0
|
||||
const lines = body.split('\n')
|
||||
lines.forEach(line => {
|
||||
const split = line.split('|')
|
||||
if (split.length === 4) {
|
||||
if (skipped < 2) {
|
||||
skipped++
|
||||
return
|
||||
}
|
||||
this.instances.push({
|
||||
name: split[0].trim(),
|
||||
apiurl: split[1].trim(),
|
||||
locations: split[2].trim(),
|
||||
cdn: split[3].trim()
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
this.selectedTheme = this.getPreferenceString("theme", "dark");
|
||||
this.autoPlayVideo = this.getPreferenceBoolean(localStorage.getItem("playerAutoPlay"), true);
|
||||
this.listen = this.getPreferenceBoolean("listen", false);
|
||||
this.defaultQuality = Number(localStorage.getItem("quality"));
|
||||
this.bufferingGoal = Math.max(Number(localStorage.getItem("bufferGoal")), 10);
|
||||
this.country = this.getPreferenceString("region", "US");
|
||||
this.defaultHomepage = this.getPreferenceString("homepage", "trending");
|
||||
this.showComments = this.getPreferenceBoolean("comments", true);
|
||||
}
|
||||
if (localStorage) {
|
||||
this.selectedInstance = this.getPreferenceString('instance', 'https://pipedapi.kavin.rocks')
|
||||
|
||||
this.sponsorBlock = this.getPreferenceBoolean('sponsorblock', true)
|
||||
if (localStorage.getItem('selectedSkip') !== null) {
|
||||
const skipList = localStorage.getItem('selectedSkip').split(',')
|
||||
this.skipSponsor = this.skipIntro = this.skipOutro = this.skipPreview = this.skipInteraction = this.skipSelfPromo = this.skipMusicOffTopic = false
|
||||
skipList.forEach(skip => {
|
||||
switch (skip) {
|
||||
case 'sponsor':
|
||||
this.skipSponsor = true
|
||||
break
|
||||
case 'intro':
|
||||
this.skipIntro = true
|
||||
break
|
||||
case 'outro':
|
||||
this.skipOutro = true
|
||||
break
|
||||
case 'preview':
|
||||
this.skipPreview = true
|
||||
break
|
||||
case 'interaction':
|
||||
this.skipInteraction = true
|
||||
break
|
||||
case 'selfpromo':
|
||||
this.skipSelfPromo = true
|
||||
break
|
||||
case 'music_offtopic':
|
||||
this.skipMusicOffTopic = true
|
||||
break
|
||||
default:
|
||||
console.log('Unknown sponsor type: ' + skip)
|
||||
break
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.selectedTheme = this.getPreferenceString('theme', 'dark')
|
||||
this.autoPlayVideo = this.getPreferenceBoolean(localStorage.getItem('playerAutoPlay'), true)
|
||||
this.listen = this.getPreferenceBoolean('listen', false)
|
||||
this.defaultQuality = Number(localStorage.getItem('quality'))
|
||||
this.bufferingGoal = Math.max(Number(localStorage.getItem('bufferGoal')), 10)
|
||||
this.country = this.getPreferenceString('region', 'US')
|
||||
this.defaultHomepage = this.getPreferenceString('homepage', 'trending')
|
||||
this.showComments = this.getPreferenceBoolean('comments', true)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange () {
|
||||
if (localStorage) {
|
||||
let shouldReload = false
|
||||
|
||||
if (this.getPreferenceString('theme', 'dark') !== this.selectedTheme) shouldReload = true
|
||||
|
||||
localStorage.setItem('instance', this.selectedInstance)
|
||||
localStorage.setItem('sponsorblock', this.sponsorBlock)
|
||||
|
||||
const sponsorSelected = []
|
||||
if (this.skipSponsor) sponsorSelected.push('sponsor')
|
||||
if (this.skipIntro) sponsorSelected.push('intro')
|
||||
if (this.skipOutro) sponsorSelected.push('outro')
|
||||
if (this.skipPreview) sponsorSelected.push('preview')
|
||||
if (this.skipInteraction) sponsorSelected.push('interaction')
|
||||
if (this.skipSelfPromo) sponsorSelected.push('selfpromo')
|
||||
if (this.skipMusicOffTopic) sponsorSelected.push('music_offtopic')
|
||||
localStorage.setItem('selectedSkip', sponsorSelected)
|
||||
|
||||
localStorage.setItem('theme', this.selectedTheme)
|
||||
localStorage.setItem('playerAutoPlay', this.autoPlayVideo)
|
||||
localStorage.setItem('listen', this.listen)
|
||||
localStorage.setItem('quality', this.defaultQuality)
|
||||
localStorage.setItem('bufferGoal', this.bufferingGoal)
|
||||
localStorage.setItem('region', this.country)
|
||||
localStorage.setItem('homepage', this.defaultHomepage)
|
||||
localStorage.setItem('comments', this.showComments)
|
||||
|
||||
if (shouldReload) window.location.reload()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange() {
|
||||
if (localStorage) {
|
||||
var shouldReload = false;
|
||||
|
||||
if (this.getPreferenceString("theme", "dark") !== this.selectedTheme) shouldReload = true;
|
||||
|
||||
localStorage.setItem("instance", this.selectedInstance);
|
||||
localStorage.setItem("sponsorblock", this.sponsorBlock);
|
||||
|
||||
var sponsorSelected = [];
|
||||
if (this.skipSponsor) sponsorSelected.push("sponsor");
|
||||
if (this.skipIntro) sponsorSelected.push("intro");
|
||||
if (this.skipOutro) sponsorSelected.push("outro");
|
||||
if (this.skipPreview) sponsorSelected.push("preview");
|
||||
if (this.skipInteraction) sponsorSelected.push("interaction");
|
||||
if (this.skipSelfPromo) sponsorSelected.push("selfpromo");
|
||||
if (this.skipMusicOffTopic) sponsorSelected.push("music_offtopic");
|
||||
localStorage.setItem("selectedSkip", sponsorSelected);
|
||||
|
||||
localStorage.setItem("theme", this.selectedTheme);
|
||||
localStorage.setItem("playerAutoPlay", this.autoPlayVideo);
|
||||
localStorage.setItem("listen", this.listen);
|
||||
localStorage.setItem("quality", this.defaultQuality);
|
||||
localStorage.setItem("bufferGoal", this.bufferingGoal);
|
||||
localStorage.setItem("region", this.country);
|
||||
localStorage.setItem("homepage", this.defaultHomepage);
|
||||
localStorage.setItem("comments", this.showComments);
|
||||
|
||||
if (shouldReload) window.location.reload();
|
||||
}
|
||||
},
|
||||
sslScore(url) {
|
||||
return "https://www.ssllabs.com/ssltest/analyze.html?d=" + new URL(url).host + "&latest";
|
||||
},
|
||||
},
|
||||
};
|
||||
sslScore (url) {
|
||||
return 'https://www.ssllabs.com/ssltest/analyze.html?d=' + new URL(url).host + '&latest'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -33,34 +33,34 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: null,
|
||||
password: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
//TODO: Add Server Side check
|
||||
if (this.getAuthToken()) {
|
||||
this.$router.push("/");
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
register() {
|
||||
console.log("authToken" + this.hashCode(this.apiUrl()));
|
||||
this.fetchJson(this.apiUrl() + "/register", null, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
username: this.username,
|
||||
password: this.password,
|
||||
}),
|
||||
}).then(resp => {
|
||||
if (resp.token) {
|
||||
this.setPreference("authToken" + this.hashCode(this.apiUrl()), resp.token);
|
||||
window.location = "/"; // done to bypass cache
|
||||
} else alert(resp.error);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
data () {
|
||||
return {
|
||||
username: null,
|
||||
password: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// TODO: Add Server Side check
|
||||
if (this.getAuthToken()) {
|
||||
this.$router.push('/')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
register () {
|
||||
console.log('authToken' + this.hashCode(this.apiUrl()))
|
||||
this.fetchJson(this.apiUrl() + '/register', null, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
username: this.username,
|
||||
password: this.password
|
||||
})
|
||||
}).then(resp => {
|
||||
if (resp.token) {
|
||||
this.setPreference('authToken' + this.hashCode(this.apiUrl()), resp.token)
|
||||
window.location = '/' // done to bypass cache
|
||||
} else alert(resp.error)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -68,58 +68,58 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
results: null,
|
||||
availableFilters: [
|
||||
"all",
|
||||
"videos",
|
||||
"channels",
|
||||
"playlists",
|
||||
"music_songs",
|
||||
"music_videos",
|
||||
"music_albums",
|
||||
"music_playlists",
|
||||
],
|
||||
selectedFilter: "all",
|
||||
};
|
||||
data () {
|
||||
return {
|
||||
results: null,
|
||||
availableFilters: [
|
||||
'all',
|
||||
'videos',
|
||||
'channels',
|
||||
'playlists',
|
||||
'music_songs',
|
||||
'music_videos',
|
||||
'music_albums',
|
||||
'music_playlists'
|
||||
],
|
||||
selectedFilter: 'all'
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.updateResults()
|
||||
},
|
||||
activated () {
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
deactivated () {
|
||||
window.removeEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
methods: {
|
||||
async fetchResults () {
|
||||
return await await this.fetchJson(this.apiUrl() + '/search', {
|
||||
q: this.$route.query.search_query,
|
||||
filter: this.selectedFilter
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
this.updateResults();
|
||||
async updateResults () {
|
||||
document.title = this.$route.query.search_query + ' - Piped'
|
||||
this.results = this.fetchResults().then(json => (this.results = json))
|
||||
},
|
||||
activated() {
|
||||
window.addEventListener("scroll", this.handleScroll);
|
||||
},
|
||||
deactivated() {
|
||||
window.removeEventListener("scroll", this.handleScroll);
|
||||
},
|
||||
methods: {
|
||||
async fetchResults() {
|
||||
return await await this.fetchJson(this.apiUrl() + "/search", {
|
||||
q: this.$route.query.search_query,
|
||||
filter: this.selectedFilter,
|
||||
});
|
||||
},
|
||||
async updateResults() {
|
||||
document.title = this.$route.query.search_query + " - Piped";
|
||||
this.results = this.fetchResults().then(json => (this.results = json));
|
||||
},
|
||||
handleScroll() {
|
||||
if (this.loading || !this.results || !this.results.nextpage) return;
|
||||
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
|
||||
this.loading = true;
|
||||
this.fetchJson(this.apiUrl() + "/nextpage/search", {
|
||||
nextpage: this.results.nextpage,
|
||||
q: this.$route.query.search_query,
|
||||
filter: this.selectedFilter,
|
||||
}).then(json => {
|
||||
this.results.nextpage = json.nextpage;
|
||||
this.results.id = json.id;
|
||||
this.loading = false;
|
||||
json.items.map(stream => this.results.items.push(stream));
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
handleScroll () {
|
||||
if (this.loading || !this.results || !this.results.nextpage) return
|
||||
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
|
||||
this.loading = true
|
||||
this.fetchJson(this.apiUrl() + '/nextpage/search', {
|
||||
nextpage: this.results.nextpage,
|
||||
q: this.$route.query.search_query,
|
||||
filter: this.selectedFilter
|
||||
}).then(json => {
|
||||
this.results.nextpage = json.nextpage
|
||||
this.results.id = json.id
|
||||
this.loading = false
|
||||
json.items.map(stream => this.results.items.push(stream))
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -20,60 +20,60 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
searchText: String,
|
||||
props: {
|
||||
searchText: String
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selected: 0,
|
||||
searchSuggestions: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onKeyUp (e) {
|
||||
if (e.key === 'ArrowUp') {
|
||||
if (this.selected <= 0) {
|
||||
this.setSelected(this.searchSuggestions.length - 1)
|
||||
} else {
|
||||
this.setSelected(this.selected - 1)
|
||||
}
|
||||
e.preventDefault()
|
||||
} else if (e.key === 'ArrowDown') {
|
||||
if (this.selected >= this.searchSuggestions.length - 1) {
|
||||
this.setSelected(0)
|
||||
} else {
|
||||
this.setSelected(this.selected + 1)
|
||||
}
|
||||
e.preventDefault()
|
||||
} else {
|
||||
this.refreshSuggestions()
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selected: 0,
|
||||
searchSuggestions: [],
|
||||
};
|
||||
async refreshSuggestions () {
|
||||
this.searchSuggestions = await this.fetchJson(this.apiUrl() + '/suggestions', {
|
||||
query: this.searchText
|
||||
})
|
||||
this.searchSuggestions.unshift(this.searchText)
|
||||
this.setSelected(0)
|
||||
},
|
||||
methods: {
|
||||
onKeyUp(e) {
|
||||
if (e.key === "ArrowUp") {
|
||||
if (this.selected <= 0) {
|
||||
this.setSelected(this.searchSuggestions.length - 1);
|
||||
} else {
|
||||
this.setSelected(this.selected - 1);
|
||||
}
|
||||
e.preventDefault();
|
||||
} else if (e.key === "ArrowDown") {
|
||||
if (this.selected >= this.searchSuggestions.length - 1) {
|
||||
this.setSelected(0);
|
||||
} else {
|
||||
this.setSelected(this.selected + 1);
|
||||
}
|
||||
e.preventDefault();
|
||||
} else {
|
||||
this.refreshSuggestions();
|
||||
}
|
||||
},
|
||||
async refreshSuggestions() {
|
||||
this.searchSuggestions = await this.fetchJson(this.apiUrl() + "/suggestions", {
|
||||
query: this.searchText,
|
||||
});
|
||||
this.searchSuggestions.unshift(this.searchText);
|
||||
this.setSelected(0);
|
||||
},
|
||||
onMouseOver(i) {
|
||||
if (i !== this.selected) {
|
||||
this.selected = i;
|
||||
}
|
||||
},
|
||||
onClick(i) {
|
||||
this.setSelected(i);
|
||||
this.$router.push({
|
||||
name: "SearchResults",
|
||||
query: { search_query: this.searchSuggestions[i] },
|
||||
});
|
||||
},
|
||||
setSelected(val) {
|
||||
this.selected = val;
|
||||
this.$emit("searchchange", this.searchSuggestions[this.selected]);
|
||||
},
|
||||
onMouseOver (i) {
|
||||
if (i !== this.selected) {
|
||||
this.selected = i
|
||||
}
|
||||
},
|
||||
};
|
||||
onClick (i) {
|
||||
this.setSelected(i)
|
||||
this.$router.push({
|
||||
name: 'SearchResults',
|
||||
query: { search_query: this.searchSuggestions[i] }
|
||||
})
|
||||
},
|
||||
setSelected (val) {
|
||||
this.selected = val
|
||||
this.$emit('searchchange', this.searchSuggestions[this.selected])
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -16,30 +16,30 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import VideoItem from "@/components/VideoItem.vue";
|
||||
import VideoItem from '@/components/VideoItem.vue'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
videos: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
document.title = "Trending - Piped";
|
||||
data () {
|
||||
return {
|
||||
videos: []
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
document.title = 'Trending - Piped'
|
||||
|
||||
let region = this.getPreferenceString("region", "US");
|
||||
const region = this.getPreferenceString('region', 'US')
|
||||
|
||||
this.fetchTrending(region).then(videos => (this.videos = videos));
|
||||
},
|
||||
methods: {
|
||||
async fetchTrending(region) {
|
||||
return await this.fetchJson(this.apiUrl() + "/trending", {
|
||||
region: region || "US",
|
||||
});
|
||||
},
|
||||
},
|
||||
components: {
|
||||
VideoItem,
|
||||
},
|
||||
};
|
||||
this.fetchTrending(region).then(videos => (this.videos = videos))
|
||||
},
|
||||
methods: {
|
||||
async fetchTrending (region) {
|
||||
return await this.fetchJson(this.apiUrl() + '/trending', {
|
||||
region: region || 'US'
|
||||
})
|
||||
}
|
||||
},
|
||||
components: {
|
||||
VideoItem
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -45,11 +45,11 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
video: Object,
|
||||
height: String,
|
||||
width: String,
|
||||
hideChannel: Boolean,
|
||||
},
|
||||
};
|
||||
props: {
|
||||
video: Object,
|
||||
height: String,
|
||||
width: String,
|
||||
hideChannel: Boolean
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,16 +2,16 @@
|
|||
<div>Loading...</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
activated() {
|
||||
const videoId = this.$route.params.videoId;
|
||||
if (videoId)
|
||||
this.$router.push({
|
||||
path: "/watch",
|
||||
query: { v: videoId },
|
||||
});
|
||||
},
|
||||
};
|
||||
activated () {
|
||||
const videoId = this.$route.params.videoId
|
||||
if (videoId) {
|
||||
this.$router.push({
|
||||
path: '/watch',
|
||||
query: { v: videoId }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -125,147 +125,146 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Player from "@/components/Player.vue";
|
||||
import VideoItem from "@/components/VideoItem.vue";
|
||||
import ErrorHandler from "@/components/ErrorHandler.vue";
|
||||
import Player from '@/components/Player.vue'
|
||||
import VideoItem from '@/components/VideoItem.vue'
|
||||
import ErrorHandler from '@/components/ErrorHandler.vue'
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {
|
||||
video: {
|
||||
title: "Loading...",
|
||||
},
|
||||
sponsors: null,
|
||||
selectedAutoLoop: false,
|
||||
selectedAutoPlay: null,
|
||||
showDesc: true,
|
||||
comments: null,
|
||||
subscribed: false,
|
||||
channelId: null,
|
||||
};
|
||||
name: 'App',
|
||||
data () {
|
||||
return {
|
||||
video: {
|
||||
title: 'Loading...'
|
||||
},
|
||||
sponsors: null,
|
||||
selectedAutoLoop: false,
|
||||
selectedAutoPlay: null,
|
||||
showDesc: true,
|
||||
comments: null,
|
||||
subscribed: false,
|
||||
channelId: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getVideoData().then(() => {
|
||||
this.$refs.videoPlayer.loadVideo()
|
||||
})
|
||||
this.getSponsors()
|
||||
if (this.getPreferenceBoolean('comments', true)) this.getComments()
|
||||
},
|
||||
activated () {
|
||||
this.selectedAutoPlay = this.getPreferenceBoolean('autoplay', true)
|
||||
if (this.video.duration) this.$refs.videoPlayer.loadVideo()
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
deactivated () {
|
||||
window.removeEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
watch: {
|
||||
'$route.query.v': function (v) {
|
||||
if (v) {
|
||||
window.scrollTo(0, 0)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchVideo () {
|
||||
return this.fetchJson(this.apiUrl() + '/streams/' + this.getVideoId())
|
||||
},
|
||||
mounted() {
|
||||
this.getVideoData().then(() => {
|
||||
this.$refs.videoPlayer.loadVideo();
|
||||
});
|
||||
this.getSponsors();
|
||||
if (this.getPreferenceBoolean("comments", true)) this.getComments();
|
||||
},
|
||||
activated() {
|
||||
this.selectedAutoPlay = this.getPreferenceBoolean("autoplay", true);
|
||||
if (this.video.duration) this.$refs.videoPlayer.loadVideo();
|
||||
window.addEventListener("scroll", this.handleScroll);
|
||||
},
|
||||
deactivated() {
|
||||
window.removeEventListener("scroll", this.handleScroll);
|
||||
},
|
||||
watch: {
|
||||
"$route.query.v": function(v) {
|
||||
if (v) {
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
fetchVideo() {
|
||||
return this.fetchJson(this.apiUrl() + "/streams/" + this.getVideoId());
|
||||
},
|
||||
async fetchSponsors() {
|
||||
return await this.fetchJson(this.apiUrl() + "/sponsors/" + this.getVideoId(), {
|
||||
category:
|
||||
async fetchSponsors () {
|
||||
return await this.fetchJson(this.apiUrl() + '/sponsors/' + this.getVideoId(), {
|
||||
category:
|
||||
'["' +
|
||||
this.getPreferenceString("selectedSkip", "sponsor,interaction,selfpromo,music_offtopic").replaceAll(
|
||||
",",
|
||||
'","',
|
||||
this.getPreferenceString('selectedSkip', 'sponsor,interaction,selfpromo,music_offtopic').replaceAll(
|
||||
',',
|
||||
'","'
|
||||
) +
|
||||
'"]',
|
||||
});
|
||||
},
|
||||
fetchComments() {
|
||||
return this.fetchJson(this.apiUrl() + "/comments/" + this.getVideoId());
|
||||
},
|
||||
onChange() {
|
||||
this.setPreference("autoplay", this.selectedAutoPlay);
|
||||
},
|
||||
async getVideoData() {
|
||||
await this.fetchVideo()
|
||||
.then(data => {
|
||||
this.video = data;
|
||||
})
|
||||
.then(() => {
|
||||
if (!this.video.error) {
|
||||
document.title = this.video.title + " - Piped";
|
||||
this.channelId = this.video.uploaderUrl.split("/")[2];
|
||||
this.fetchSubscribedStatus();
|
||||
|
||||
this.video.description = this.purifyHTML(
|
||||
this.video.description
|
||||
.replaceAll("http://www.youtube.com", "")
|
||||
.replaceAll("https://www.youtube.com", "")
|
||||
.replaceAll("\n", "<br>"),
|
||||
);
|
||||
}
|
||||
});
|
||||
},
|
||||
async getSponsors() {
|
||||
if (this.getPreferenceBoolean("sponsorblock", true))
|
||||
this.fetchSponsors().then(data => (this.sponsors = data));
|
||||
},
|
||||
async getComments() {
|
||||
this.fetchComments().then(data => (this.comments = data));
|
||||
},
|
||||
async fetchSubscribedStatus() {
|
||||
if (!this.channelId) return;
|
||||
|
||||
this.fetchJson(
|
||||
this.apiUrl() + "/subscribed",
|
||||
{
|
||||
channelId: this.channelId,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: this.getAuthToken(),
|
||||
},
|
||||
},
|
||||
).then(json => {
|
||||
this.subscribed = json.subscribed;
|
||||
});
|
||||
},
|
||||
subscribeHandler() {
|
||||
this.fetchJson(this.apiUrl() + (this.subscribed ? "/unsubscribe" : "/subscribe"), null, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
channelId: this.channelId,
|
||||
}),
|
||||
headers: {
|
||||
Authorization: this.getAuthToken(),
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
this.subscribed = !this.subscribed;
|
||||
},
|
||||
handleScroll() {
|
||||
if (this.loading || !this.comments || !this.comments.nextpage) return;
|
||||
if (window.innerHeight + window.scrollY >= this.$refs.comments.offsetHeight - window.innerHeight) {
|
||||
this.loading = true;
|
||||
this.fetchJson(this.apiUrl() + "/nextpage/comments/" + this.getVideoId(), {
|
||||
url: this.comments.nextpage,
|
||||
}).then(json => {
|
||||
this.comments.nextpage = json.nextpage;
|
||||
this.loading = false;
|
||||
json.comments.map(comment => this.comments.comments.push(comment));
|
||||
});
|
||||
}
|
||||
},
|
||||
getVideoId() {
|
||||
return this.$route.query.v || this.$route.params.v;
|
||||
},
|
||||
'"]'
|
||||
})
|
||||
},
|
||||
components: {
|
||||
Player,
|
||||
VideoItem,
|
||||
ErrorHandler,
|
||||
fetchComments () {
|
||||
return this.fetchJson(this.apiUrl() + '/comments/' + this.getVideoId())
|
||||
},
|
||||
};
|
||||
onChange () {
|
||||
this.setPreference('autoplay', this.selectedAutoPlay)
|
||||
},
|
||||
async getVideoData () {
|
||||
await this.fetchVideo()
|
||||
.then(data => {
|
||||
this.video = data
|
||||
})
|
||||
.then(() => {
|
||||
if (!this.video.error) {
|
||||
document.title = this.video.title + ' - Piped'
|
||||
this.channelId = this.video.uploaderUrl.split('/')[2]
|
||||
this.fetchSubscribedStatus()
|
||||
|
||||
this.video.description = this.purifyHTML(
|
||||
this.video.description
|
||||
.replaceAll('http://www.youtube.com', '')
|
||||
.replaceAll('https://www.youtube.com', '')
|
||||
.replaceAll('\n', '<br>')
|
||||
)
|
||||
}
|
||||
})
|
||||
},
|
||||
async getSponsors () {
|
||||
if (this.getPreferenceBoolean('sponsorblock', true)) { this.fetchSponsors().then(data => (this.sponsors = data)) }
|
||||
},
|
||||
async getComments () {
|
||||
this.fetchComments().then(data => (this.comments = data))
|
||||
},
|
||||
async fetchSubscribedStatus () {
|
||||
if (!this.channelId) return
|
||||
|
||||
this.fetchJson(
|
||||
this.apiUrl() + '/subscribed',
|
||||
{
|
||||
channelId: this.channelId
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: this.getAuthToken()
|
||||
}
|
||||
}
|
||||
).then(json => {
|
||||
this.subscribed = json.subscribed
|
||||
})
|
||||
},
|
||||
subscribeHandler () {
|
||||
this.fetchJson(this.apiUrl() + (this.subscribed ? '/unsubscribe' : '/subscribe'), null, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
channelId: this.channelId
|
||||
}),
|
||||
headers: {
|
||||
Authorization: this.getAuthToken(),
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
this.subscribed = !this.subscribed
|
||||
},
|
||||
handleScroll () {
|
||||
if (this.loading || !this.comments || !this.comments.nextpage) return
|
||||
if (window.innerHeight + window.scrollY >= this.$refs.comments.offsetHeight - window.innerHeight) {
|
||||
this.loading = true
|
||||
this.fetchJson(this.apiUrl() + '/nextpage/comments/' + this.getVideoId(), {
|
||||
url: this.comments.nextpage
|
||||
}).then(json => {
|
||||
this.comments.nextpage = json.nextpage
|
||||
this.loading = false
|
||||
json.comments.map(comment => this.comments.comments.push(comment))
|
||||
})
|
||||
}
|
||||
},
|
||||
getVideoId () {
|
||||
return this.$route.query.v || this.$route.params.v
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Player,
|
||||
VideoItem,
|
||||
ErrorHandler
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,56 +4,56 @@ const routes = [
|
|||
{
|
||||
path: '/',
|
||||
name: 'Trending',
|
||||
component: () => import('@/components/TrendingPage.vue')
|
||||
component: () => import('@/components/TrendingPage')
|
||||
},
|
||||
{
|
||||
path: '/preferences',
|
||||
name: 'Preferences',
|
||||
component: () => import('@/components/Preferences.vue')
|
||||
component: () => import('@/components/Preferences')
|
||||
},
|
||||
{
|
||||
path: '/results',
|
||||
name: 'SearchResults',
|
||||
component: () => import('@/components/SearchResults.vue')
|
||||
component: () => import('@/components/SearchResults')
|
||||
},
|
||||
{
|
||||
path: '/playlist',
|
||||
name: 'Playlist',
|
||||
component: () => import('@/components/Playlist.vue')
|
||||
component: () => import('@/components/Playlist')
|
||||
},
|
||||
{
|
||||
path: '/:path(v|w|embed|shorts|watch)/:v?',
|
||||
name: 'WatchVideo',
|
||||
component: () => import('@/components/WatchVideo.vue')
|
||||
component: () => import('@/components/WatchVideo')
|
||||
},
|
||||
{
|
||||
path: '/:path(channel|user|c)/:channelId/:videos?',
|
||||
name: 'Channel',
|
||||
component: () => import('@/components/Channel.vue')
|
||||
component: () => import('@/components/Channel')
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: () => import('@/components/LoginPage.vue')
|
||||
component: () => import('@/components/LoginPage')
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
name: 'Register',
|
||||
component: () => import('@/components/RegisterPage.vue')
|
||||
component: () => import('@/components/RegisterPage')
|
||||
},
|
||||
{
|
||||
path: '/feed',
|
||||
name: 'Feed',
|
||||
component: () => import('@/components/FeedPage.vue')
|
||||
component: () => import('@/components/FeedPage')
|
||||
},
|
||||
{
|
||||
path: '/import',
|
||||
name: 'Import',
|
||||
component: () => import('@/components/ImportPage.vue')
|
||||
component: () => import('@/components/ImportPage')
|
||||
},
|
||||
{
|
||||
path: '/:videoId([a-zA-Z0-9_-]{11})',
|
||||
component: () => import('@/components/VideoRedirect.vue')
|
||||
component: () => import('@/components/VideoRedirect')
|
||||
}
|
||||
]
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue