mirror of
https://github.com/TeamPiped/Piped.git
synced 2025-08-09 20:24:09 +00:00
Format all code files using the new configuration
This commit is contained in:
Maurice Oegerli
@@ -1,14 +1,7 @@
|
||||
<template>
|
||||
<div v-if="channel">
|
||||
<h1 class="uk-text-center">
|
||||
<img v-bind:src="channel.avatarUrl" />{{ channel.name }}
|
||||
</h1>
|
||||
<img
|
||||
v-if="channel.bannerUrl"
|
||||
v-bind:src="channel.bannerUrl"
|
||||
style="width: 100%"
|
||||
loading="lazy"
|
||||
/>
|
||||
<h1 class="uk-text-center"><img v-bind:src="channel.avatarUrl" />{{ channel.name }}</h1>
|
||||
<img v-if="channel.bannerUrl" v-bind:src="channel.bannerUrl" style="width: 100%" loading="lazy" />
|
||||
<p v-html="this.channel.description.replaceAll('\n', '<br>')"></p>
|
||||
|
||||
<hr />
|
||||
@@ -19,15 +12,8 @@
|
||||
v-bind:key="item.url"
|
||||
v-for="item in this.channel.relatedStreams"
|
||||
>
|
||||
<router-link
|
||||
class="uk-link-muted uk-text-justify"
|
||||
v-bind:to="item.url || '/'"
|
||||
>
|
||||
<img
|
||||
style="width: 100%"
|
||||
v-bind:src="item.thumbnail"
|
||||
loading="lazy"
|
||||
/>
|
||||
<router-link class="uk-link-muted uk-text-justify" v-bind:to="item.url || '/'">
|
||||
<img style="width: 100%" v-bind:src="item.thumbnail" loading="lazy" />
|
||||
<a>{{ item.title }}</a>
|
||||
</router-link>
|
||||
<br />
|
||||
@@ -53,7 +39,7 @@ import Constants from "@/Constants.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
channel: null
|
||||
channel: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@@ -65,9 +51,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
async fetchChannel() {
|
||||
return await this.fetchJson(
|
||||
Constants.BASE_URL + "/channels/" + this.$route.params.channelId
|
||||
);
|
||||
return await this.fetchJson(Constants.BASE_URL + "/channels/" + this.$route.params.channelId);
|
||||
},
|
||||
async getChannelData() {
|
||||
this.fetchChannel()
|
||||
@@ -75,17 +59,8 @@ export default {
|
||||
.then(() => (document.title = this.channel.name + " - Piped"));
|
||||
},
|
||||
handleScroll() {
|
||||
if (
|
||||
this.loading ||
|
||||
!this.channel ||
|
||||
!this.channel.nextpage ||
|
||||
!this.channel.nextid
|
||||
)
|
||||
return;
|
||||
if (
|
||||
window.innerHeight + window.scrollY >=
|
||||
document.body.offsetHeight - window.innerHeight
|
||||
) {
|
||||
if (this.loading || !this.channel || !this.channel.nextpage || !this.channel.nextid) return;
|
||||
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
|
||||
this.loading = true;
|
||||
this.fetchJson(
|
||||
Constants.BASE_URL +
|
||||
@@ -94,18 +69,16 @@ export default {
|
||||
"?url=" +
|
||||
encodeURIComponent(this.channel.nextpage) +
|
||||
"&id=" +
|
||||
encodeURIComponent(this.channel.nextid)
|
||||
encodeURIComponent(this.channel.nextid),
|
||||
).then(json => {
|
||||
this.channel.relatedStreams.concat(json.relatedStreams);
|
||||
this.channel.nextpage = json.nextpage;
|
||||
this.channel.nextid = json.nextid;
|
||||
this.loading = false;
|
||||
json.relatedStreams.map(stream =>
|
||||
this.channel.relatedStreams.push(stream)
|
||||
);
|
||||
json.relatedStreams.map(stream => this.channel.relatedStreams.push(stream));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,11 +1,7 @@
|
||||
<template>
|
||||
<div class="uk-container-expand">
|
||||
<div data-shaka-player-container>
|
||||
<video
|
||||
data-shaka-player
|
||||
autoplay
|
||||
style="width: 100%; height: 100%"
|
||||
></video>
|
||||
<video data-shaka-player autoplay style="width: 100%; height: 100%"></video>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -18,7 +14,7 @@ export default {
|
||||
props: {
|
||||
video: Object,
|
||||
sponsors: Object,
|
||||
selectedAutoPlay: Boolean
|
||||
selectedAutoPlay: Boolean,
|
||||
},
|
||||
methods: {
|
||||
loadVideo() {
|
||||
@@ -37,7 +33,7 @@ export default {
|
||||
|
||||
const dash = require("@/utils/DashUtils.js").default.generate_dash_file_from_formats(
|
||||
streams,
|
||||
this.video.duration
|
||||
this.video.duration,
|
||||
);
|
||||
|
||||
if (noPrevPlayer)
|
||||
@@ -74,15 +70,11 @@ export default {
|
||||
});
|
||||
|
||||
videoEl.addEventListener("volumechange", () => {
|
||||
if (localStorage)
|
||||
localStorage.setItem("volume", videoEl.volume);
|
||||
if (localStorage) localStorage.setItem("volume", videoEl.volume);
|
||||
});
|
||||
|
||||
videoEl.addEventListener("ended", () => {
|
||||
if (
|
||||
this.selectedAutoPlay &&
|
||||
this.video.relatedStreams.length > 0
|
||||
)
|
||||
if (this.selectedAutoPlay && this.video.relatedStreams.length > 0)
|
||||
this.$router.push(this.video.relatedStreams[0].url);
|
||||
});
|
||||
}
|
||||
@@ -90,52 +82,33 @@ export default {
|
||||
//TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
|
||||
},
|
||||
setPlayerAttrs(player, videoEl, dash, shaka) {
|
||||
player
|
||||
.load(
|
||||
"data:application/dash+xml;charset=utf-8;base64," +
|
||||
btoa(dash)
|
||||
)
|
||||
.then(() => {
|
||||
this.video.subtitles.map(subtitle => {
|
||||
player.addTextTrack(
|
||||
subtitle.url,
|
||||
"eng",
|
||||
"SUBTITLE",
|
||||
subtitle.mimeType,
|
||||
null,
|
||||
"English"
|
||||
);
|
||||
player.setTextTrackVisibility(true);
|
||||
});
|
||||
if (localStorage)
|
||||
videoEl.volume = localStorage.getItem("volume") || 1;
|
||||
|
||||
const ui =
|
||||
this.ui ||
|
||||
(this.ui = new shaka.ui.Overlay(
|
||||
player,
|
||||
document.querySelector(
|
||||
"div[data-shaka-player-container]"
|
||||
),
|
||||
videoEl
|
||||
));
|
||||
|
||||
const config = {
|
||||
overflowMenuButtons: [
|
||||
"quality",
|
||||
"captions",
|
||||
"playback_rate"
|
||||
],
|
||||
seekBarColors: {
|
||||
base: "rgba(255, 255, 255, 0.3)",
|
||||
buffered: "rgba(255, 255, 255, 0.54)",
|
||||
played: "rgb(255, 0, 0)"
|
||||
}
|
||||
};
|
||||
|
||||
ui.configure(config);
|
||||
player.load("data:application/dash+xml;charset=utf-8;base64," + btoa(dash)).then(() => {
|
||||
this.video.subtitles.map(subtitle => {
|
||||
player.addTextTrack(subtitle.url, "eng", "SUBTITLE", subtitle.mimeType, null, "English");
|
||||
player.setTextTrackVisibility(true);
|
||||
});
|
||||
}
|
||||
if (localStorage) videoEl.volume = localStorage.getItem("volume") || 1;
|
||||
|
||||
const ui =
|
||||
this.ui ||
|
||||
(this.ui = new shaka.ui.Overlay(
|
||||
player,
|
||||
document.querySelector("div[data-shaka-player-container]"),
|
||||
videoEl,
|
||||
));
|
||||
|
||||
const config = {
|
||||
overflowMenuButtons: ["quality", "captions", "playback_rate"],
|
||||
seekBarColors: {
|
||||
base: "rgba(255, 255, 255, 0.3)",
|
||||
buffered: "rgba(255, 255, 255, 0.54)",
|
||||
played: "rgb(255, 0, 0)",
|
||||
},
|
||||
};
|
||||
|
||||
ui.configure(config);
|
||||
});
|
||||
},
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (this.player) {
|
||||
@@ -143,6 +116,6 @@ export default {
|
||||
this.player = undefined;
|
||||
this.ui = undefined;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -6,10 +6,7 @@
|
||||
</h1>
|
||||
|
||||
<b
|
||||
><router-link
|
||||
class="uk-text-justify"
|
||||
v-bind:to="playlist.uploaderUrl || '/'"
|
||||
>
|
||||
><router-link class="uk-text-justify" v-bind:to="playlist.uploaderUrl || '/'">
|
||||
<img v-bind:src="playlist.uploaderAvatar" loading="lazy" />
|
||||
{{ playlist.uploader }}</router-link
|
||||
></b
|
||||
@@ -25,25 +22,16 @@
|
||||
v-bind:key="item.url"
|
||||
v-for="item in this.playlist.relatedStreams"
|
||||
>
|
||||
<router-link
|
||||
class="uk-link-muted uk-text-justify"
|
||||
v-bind:to="item.url || '/'"
|
||||
>
|
||||
<img
|
||||
style="width: 100%"
|
||||
v-bind:src="item.thumbnail"
|
||||
loading="lazy"
|
||||
/>
|
||||
<router-link class="uk-link-muted uk-text-justify" v-bind:to="item.url || '/'">
|
||||
<img style="width: 100%" v-bind:src="item.thumbnail" loading="lazy" />
|
||||
<a>{{ item.title }}</a>
|
||||
</router-link>
|
||||
<br />
|
||||
<div>
|
||||
<b class="uk-text-small uk-align-left">
|
||||
<router-link
|
||||
class="uk-text-justify"
|
||||
v-bind:to="item.uploaderUrl || '/'"
|
||||
>{{ item.uploaderName }}</router-link
|
||||
>
|
||||
<router-link class="uk-text-justify" v-bind:to="item.uploaderUrl || '/'">{{
|
||||
item.uploaderName
|
||||
}}</router-link>
|
||||
</b>
|
||||
<b class="uk-text-small uk-align-right">
|
||||
{{ timeFormat(item.duration) }}
|
||||
@@ -60,7 +48,7 @@ import Constants from "@/Constants.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
playlist: null
|
||||
playlist: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@@ -72,9 +60,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
async fetchPlaylist() {
|
||||
return await await this.fetchJson(
|
||||
Constants.BASE_URL + "/playlists/" + this.$route.query.list
|
||||
);
|
||||
return await await this.fetchJson(Constants.BASE_URL + "/playlists/" + this.$route.query.list);
|
||||
},
|
||||
async getPlaylistData() {
|
||||
this.fetchPlaylist()
|
||||
@@ -82,17 +68,8 @@ export default {
|
||||
.then(() => (document.title = this.playlist.name + " - Piped"));
|
||||
},
|
||||
handleScroll() {
|
||||
if (
|
||||
this.loading ||
|
||||
!this.playlist ||
|
||||
!this.playlist.nextpage ||
|
||||
!this.playlist.nextid
|
||||
)
|
||||
return;
|
||||
if (
|
||||
window.innerHeight + window.scrollY >=
|
||||
document.body.offsetHeight - window.innerHeight
|
||||
) {
|
||||
if (this.loading || !this.playlist || !this.playlist.nextpage || !this.playlist.nextid) return;
|
||||
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
|
||||
this.loading = true;
|
||||
this.fetchJson(
|
||||
Constants.BASE_URL +
|
||||
@@ -101,18 +78,16 @@ export default {
|
||||
"?url=" +
|
||||
encodeURIComponent(this.playlist.nextpage) +
|
||||
"&id=" +
|
||||
encodeURIComponent(this.playlist.nextid)
|
||||
encodeURIComponent(this.playlist.nextid),
|
||||
).then(json => {
|
||||
this.playlist.relatedStreams.concat(json.relatedStreams);
|
||||
this.playlist.nextpage = json.nextpage;
|
||||
this.playlist.nextid = json.nextid;
|
||||
this.loading = false;
|
||||
json.relatedStreams.map(stream =>
|
||||
this.playlist.relatedStreams.push(stream)
|
||||
);
|
||||
json.relatedStreams.map(stream => this.playlist.relatedStreams.push(stream));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -2,71 +2,34 @@
|
||||
<h1 class="uk-text-bold uk-text-center">Preferences</h1>
|
||||
<hr />
|
||||
<h2>SponsorBlock</h2>
|
||||
<p>
|
||||
Uses the API from <a href="https://sponsor.ajay.app/">sponsor.ajay.app</a>
|
||||
</p>
|
||||
<p>Uses the API from <a href="https://sponsor.ajay.app/">sponsor.ajay.app</a></p>
|
||||
<b>Enable Sponsorblock</b>
|
||||
<br />
|
||||
<input
|
||||
class="uk-checkbox"
|
||||
v-model="sponsorBlock"
|
||||
@change="onChange($event)"
|
||||
type="checkbox"
|
||||
/>
|
||||
<input class="uk-checkbox" v-model="sponsorBlock" @change="onChange($event)" type="checkbox" />
|
||||
<br />
|
||||
<b>Skip Sponsors</b>
|
||||
<br />
|
||||
<input
|
||||
class="uk-checkbox"
|
||||
v-model="skipSponsor"
|
||||
@change="onChange($event)"
|
||||
type="checkbox"
|
||||
/>
|
||||
<input class="uk-checkbox" v-model="skipSponsor" @change="onChange($event)" type="checkbox" />
|
||||
<br />
|
||||
<b>Skip Intermission/Intro Animation</b>
|
||||
<br />
|
||||
<input
|
||||
class="uk-checkbox"
|
||||
v-model="skipIntro"
|
||||
@change="onChange($event)"
|
||||
type="checkbox"
|
||||
/>
|
||||
<input class="uk-checkbox" v-model="skipIntro" @change="onChange($event)" type="checkbox" />
|
||||
<br />
|
||||
<b>Skip Endcards/Credits</b>
|
||||
<br />
|
||||
<input
|
||||
class="uk-checkbox"
|
||||
v-model="skipOutro"
|
||||
@change="onChange($event)"
|
||||
type="checkbox"
|
||||
/>
|
||||
<input class="uk-checkbox" v-model="skipOutro" @change="onChange($event)" type="checkbox" />
|
||||
<br />
|
||||
<b>Skip Interaction Reminder (Subscribe)</b>
|
||||
<br />
|
||||
<input
|
||||
class="uk-checkbox"
|
||||
v-model="skipInteraction"
|
||||
@change="onChange($event)"
|
||||
type="checkbox"
|
||||
/>
|
||||
<input class="uk-checkbox" v-model="skipInteraction" @change="onChange($event)" type="checkbox" />
|
||||
<br />
|
||||
<b>Skip Unpaid/Self Promotion</b>
|
||||
<br />
|
||||
<input
|
||||
class="uk-checkbox"
|
||||
v-model="skipSelfPromo"
|
||||
@change="onChange($event)"
|
||||
type="checkbox"
|
||||
/>
|
||||
<input class="uk-checkbox" v-model="skipSelfPromo" @change="onChange($event)" type="checkbox" />
|
||||
<br />
|
||||
<b>Skip Music: Non-Music Section</b>
|
||||
<br />
|
||||
<input
|
||||
class="uk-checkbox"
|
||||
v-model="skipMusicOffTopic"
|
||||
@change="onChange($event)"
|
||||
type="checkbox"
|
||||
/>
|
||||
<input class="uk-checkbox" v-model="skipMusicOffTopic" @change="onChange($event)" type="checkbox" />
|
||||
<h2>Instances List</h2>
|
||||
<table class="uk-table">
|
||||
<thead>
|
||||
@@ -83,9 +46,7 @@
|
||||
<td>{{ instance.locations }}</td>
|
||||
<td>{{ instance.cdn }}</td>
|
||||
<td>
|
||||
<a :href="sslScore(instance.apiurl)" target="_blank"
|
||||
>Click Here</a
|
||||
>
|
||||
<a :href="sslScore(instance.apiurl)" target="_blank">Click Here</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -94,16 +55,8 @@
|
||||
<hr />
|
||||
|
||||
<b>Instance Selection:</b>
|
||||
<select
|
||||
class="uk-select"
|
||||
v-model="selectedInstance"
|
||||
@change="onChange($event)"
|
||||
>
|
||||
<option
|
||||
v-bind:key="instance.name"
|
||||
v-for="instance in instances"
|
||||
v-bind:value="instance.apiurl"
|
||||
>
|
||||
<select class="uk-select" v-model="selectedInstance" @change="onChange($event)">
|
||||
<option v-bind:key="instance.name" v-for="instance in instances" v-bind:value="instance.apiurl">
|
||||
{{ instance.name }}
|
||||
</option>
|
||||
</select>
|
||||
@@ -121,13 +74,11 @@ export default {
|
||||
skipOutro: false,
|
||||
skipInteraction: true,
|
||||
skipSelfPromo: true,
|
||||
skipMusicOffTopic: true
|
||||
skipMusicOffTopic: true,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
fetch(
|
||||
"https://raw.githubusercontent.com/wiki/TeamPiped/Piped-Frontend/Instances.md"
|
||||
)
|
||||
fetch("https://raw.githubusercontent.com/wiki/TeamPiped/Piped-Frontend/Instances.md")
|
||||
.then(resp => resp.text())
|
||||
.then(body => {
|
||||
var skipped = 0;
|
||||
@@ -143,16 +94,14 @@ export default {
|
||||
name: split[0].trim(),
|
||||
apiurl: split[1].trim(),
|
||||
locations: split[2].trim(),
|
||||
cdn: split[3].trim()
|
||||
cdn: split[3].trim(),
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (localStorage) {
|
||||
this.selectedInstance =
|
||||
localStorage.getItem("instance") ||
|
||||
"https://pipedapi.kavin.rocks";
|
||||
this.selectedInstance = localStorage.getItem("instance") || "https://pipedapi.kavin.rocks";
|
||||
|
||||
this.sponsorBlock = localStorage.getItem("sponsorblock") || true;
|
||||
if (localStorage.getItem("selectedSkip")) {
|
||||
@@ -198,18 +147,13 @@ export default {
|
||||
if (this.skipOutro) sponsorSelected.push("outro");
|
||||
if (this.skipInteraction) sponsorSelected.push("interaction");
|
||||
if (this.skipSelfPromo) sponsorSelected.push("selfpromo");
|
||||
if (this.skipMusicOffTopic)
|
||||
sponsorSelected.push("music_offtopic");
|
||||
if (this.skipMusicOffTopic) sponsorSelected.push("music_offtopic");
|
||||
localStorage.setItem("selectedSkip", sponsorSelected);
|
||||
}
|
||||
},
|
||||
sslScore(url) {
|
||||
return (
|
||||
"https://www.ssllabs.com/ssltest/analyze.html?d=" +
|
||||
new URL(url).host +
|
||||
"&latest"
|
||||
);
|
||||
}
|
||||
}
|
||||
return "https://www.ssllabs.com/ssltest/analyze.html?d=" + new URL(url).host + "&latest";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -11,21 +11,11 @@
|
||||
v-for="result in results.items"
|
||||
>
|
||||
<div class="uk-text-secondary" style="background: #0b0e0f">
|
||||
<router-link
|
||||
class="uk-text-emphasis"
|
||||
v-bind:to="result.url || '/'"
|
||||
>
|
||||
<img
|
||||
style="width: 100%"
|
||||
v-bind:src="result.thumbnail"
|
||||
loading="lazy"
|
||||
/>
|
||||
<router-link class="uk-text-emphasis" v-bind:to="result.url || '/'">
|
||||
<img style="width: 100%" v-bind:src="result.thumbnail" loading="lazy" />
|
||||
<p>{{ result.name }}</p>
|
||||
</router-link>
|
||||
<router-link
|
||||
class="uk-link-muted"
|
||||
v-bind:to="result.uploaderUrl || '/'"
|
||||
>
|
||||
<router-link class="uk-link-muted" v-bind:to="result.uploaderUrl || '/'">
|
||||
<p>{{ result.uploaderName }}</p>
|
||||
</router-link>
|
||||
{{ result.duration ? timeFormat(result.duration) : "" }}
|
||||
@@ -48,7 +38,7 @@ import Constants from "@/Constants.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
results: null
|
||||
results: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@@ -61,28 +51,21 @@ export default {
|
||||
watch: {
|
||||
"$route.query.search_query": function(q) {
|
||||
if (q) this.updateResults();
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async fetchResults() {
|
||||
return await await this.fetchJson(
|
||||
Constants.BASE_URL +
|
||||
"/search?q=" +
|
||||
encodeURIComponent(this.$route.query.search_query)
|
||||
Constants.BASE_URL + "/search?q=" + encodeURIComponent(this.$route.query.search_query),
|
||||
);
|
||||
},
|
||||
async updateResults() {
|
||||
document.title = this.$route.query.search_query + " - Piped";
|
||||
this.results = this.fetchResults().then(
|
||||
json => (this.results = json)
|
||||
);
|
||||
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
|
||||
) {
|
||||
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
|
||||
this.loading = true;
|
||||
this.fetchJson(
|
||||
Constants.BASE_URL +
|
||||
@@ -92,7 +75,7 @@ export default {
|
||||
"&id=" +
|
||||
encodeURIComponent(this.results.id) +
|
||||
"&q=" +
|
||||
encodeURIComponent(this.$route.query.search_query)
|
||||
encodeURIComponent(this.$route.query.search_query),
|
||||
).then(json => {
|
||||
this.results.nextpage = json.nextpage;
|
||||
this.results.id = json.id;
|
||||
@@ -100,7 +83,7 @@ export default {
|
||||
json.items.map(stream => this.results.items.push(stream));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -11,21 +11,11 @@
|
||||
v-for="video in videos"
|
||||
>
|
||||
<div class="uk-text-secondary" style="background: #0b0e0f">
|
||||
<router-link
|
||||
class="uk-text-emphasis"
|
||||
v-bind:to="video.url || '/'"
|
||||
>
|
||||
<img
|
||||
style="width: 100%"
|
||||
v-bind:src="video.thumbnail"
|
||||
loading="lazy"
|
||||
/>
|
||||
<router-link class="uk-text-emphasis" v-bind:to="video.url || '/'">
|
||||
<img style="width: 100%" v-bind:src="video.thumbnail" loading="lazy" />
|
||||
<p>{{ video.title }}</p>
|
||||
</router-link>
|
||||
<router-link
|
||||
class="uk-link-muted"
|
||||
v-bind:to="video.uploaderUrl || '/'"
|
||||
>
|
||||
<router-link class="uk-link-muted" v-bind:to="video.uploaderUrl || '/'">
|
||||
<p>{{ video.uploaderName }}</p>
|
||||
</router-link>
|
||||
<b class="uk-text-small uk-align-left">
|
||||
@@ -48,7 +38,7 @@ import Constants from "@/Constants.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
videos: []
|
||||
videos: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@@ -59,7 +49,7 @@ export default {
|
||||
methods: {
|
||||
async fetchTrending() {
|
||||
return await this.fetchJson(Constants.BASE_URL + "/trending");
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,11 +1,6 @@
|
||||
<template>
|
||||
<div class="uk-container uk-container-xlarge">
|
||||
<Player
|
||||
ref="videoPlayer"
|
||||
:video="video"
|
||||
:sponsors="sponsors"
|
||||
:selectedAutoPlay="selectedAutoPlay"
|
||||
/>
|
||||
<Player ref="videoPlayer" :video="video" :sponsors="sponsors" :selectedAutoPlay="selectedAutoPlay" />
|
||||
<h1 class="uk-text-bold">{{ video.title }}</h1>
|
||||
|
||||
<img :src="video.uploaderAvatar" loading="lazy" />
|
||||
@@ -27,27 +22,16 @@
|
||||
<p>
|
||||
Uploaded on <b>{{ video.uploadDate }}</b>
|
||||
</p>
|
||||
<a
|
||||
class="uk-button uk-button-small"
|
||||
style="background: #222"
|
||||
@click="showDesc = !showDesc"
|
||||
>
|
||||
<a class="uk-button uk-button-small" style="background: #222" @click="showDesc = !showDesc">
|
||||
{{ showDesc ? "+" : "-" }}
|
||||
</a>
|
||||
<p v-show="showDesc" class="uk-light" v-html="video.description"></p>
|
||||
<a v-if="sponsors && sponsors.segments"
|
||||
>Sponsors Segments: {{ sponsors.segments.length }}</a
|
||||
>
|
||||
<a v-if="sponsors && sponsors.segments">Sponsors Segments: {{ sponsors.segments.length }}</a>
|
||||
|
||||
<hr />
|
||||
|
||||
<b>Auto Play next Video:</b>
|
||||
<input
|
||||
class="uk-checkbox"
|
||||
v-model="selectedAutoPlay"
|
||||
@change="onChange($event)"
|
||||
type="checkbox"
|
||||
/>
|
||||
<input class="uk-checkbox" v-model="selectedAutoPlay" @change="onChange($event)" type="checkbox" />
|
||||
|
||||
<div
|
||||
class="uk-tile-default uk-text-secondary"
|
||||
@@ -57,17 +41,10 @@
|
||||
>
|
||||
<router-link class="uk-link-muted" v-bind:to="related.url">
|
||||
<p class="uk-text-emphasis">{{ related.title }}</p>
|
||||
<img
|
||||
style="width: 100%"
|
||||
v-bind:src="related.thumbnail"
|
||||
loading="lazy"
|
||||
/>
|
||||
<img style="width: 100%" v-bind:src="related.thumbnail" loading="lazy" />
|
||||
</router-link>
|
||||
<p>
|
||||
<router-link
|
||||
class="uk-link-muted"
|
||||
v-bind:to="related.uploaderUrl || '/'"
|
||||
>
|
||||
<router-link class="uk-link-muted" v-bind:to="related.uploaderUrl || '/'">
|
||||
<p>{{ related.uploaderName }}</p>
|
||||
</router-link>
|
||||
<font-awesome-icon icon="eye"></font-awesome-icon>
|
||||
@@ -86,11 +63,11 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
video: {
|
||||
title: "Loading..."
|
||||
title: "Loading...",
|
||||
},
|
||||
sponsors: null,
|
||||
selectedAutoPlay: null,
|
||||
showDesc: true
|
||||
showDesc: true,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@@ -104,13 +81,11 @@ export default {
|
||||
this.getVideoData();
|
||||
this.getSponsors();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
fetchVideo() {
|
||||
return this.fetchJson(
|
||||
Constants.BASE_URL + "/streams/" + this.$route.query.v
|
||||
);
|
||||
return this.fetchJson(Constants.BASE_URL + "/streams/" + this.$route.query.v);
|
||||
},
|
||||
async fetchSponsors() {
|
||||
return await this.fetchJson(
|
||||
@@ -119,21 +94,12 @@ export default {
|
||||
this.$route.query.v +
|
||||
"?category=" +
|
||||
(localStorage && localStorage.getItem("selectedSkip")
|
||||
? encodeURIComponent(
|
||||
'["' +
|
||||
localStorage
|
||||
.getItem("selectedSkip")
|
||||
.replace(",", '","') +
|
||||
'"]'
|
||||
)
|
||||
: encodeURIComponent(
|
||||
'["sponsor", "interaction", "selfpromo", "music_offtopic"]'
|
||||
))
|
||||
? encodeURIComponent('["' + localStorage.getItem("selectedSkip").replace(",", '","') + '"]')
|
||||
: encodeURIComponent('["sponsor", "interaction", "selfpromo", "music_offtopic"]')),
|
||||
);
|
||||
},
|
||||
onChange() {
|
||||
if (localStorage)
|
||||
localStorage.setItem("autoplay", this.selectedAutoPlay);
|
||||
if (localStorage) localStorage.setItem("autoplay", this.selectedAutoPlay);
|
||||
},
|
||||
async getVideoData() {
|
||||
this.fetchVideo()
|
||||
@@ -154,10 +120,10 @@ export default {
|
||||
async getSponsors() {
|
||||
if (!localStorage || localStorage.getItem("sponsorblock") !== false)
|
||||
this.fetchSponsors().then(data => (this.sponsors = data));
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Player
|
||||
}
|
||||
Player,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user