mirror of
https://github.com/mmjee/Piped-Material.git
synced 2024-12-06 19:26:36 +01:00
Port
This commit is contained in:
root
+5
-1
@@ -9,11 +9,15 @@
|
||||
"dependencies": {
|
||||
"core-js": "^3.6.5",
|
||||
"vue": "^2.6.11",
|
||||
"vuetify": "^2.4.0"
|
||||
"vue-router": "^3.2.0",
|
||||
"vuetify": "^2.4.0",
|
||||
"vuex": "^3.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||
"@vue/cli-plugin-router": "~4.5.0",
|
||||
"@vue/cli-plugin-vuex": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"@vue/eslint-config-standard": "^5.1.2",
|
||||
"babel-eslint": "^10.1.0",
|
||||
|
||||
+56
-38
@@ -1,60 +1,78 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<v-app id="inspire">
|
||||
<v-app-bar
|
||||
app
|
||||
color="primary"
|
||||
dark
|
||||
flat
|
||||
>
|
||||
<div class="d-flex align-center">
|
||||
<v-img
|
||||
alt="Vuetify Logo"
|
||||
class="shrink mr-2"
|
||||
contain
|
||||
src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
|
||||
transition="scale-transition"
|
||||
width="40"
|
||||
/>
|
||||
<v-container class="py-0 fill-height">
|
||||
<v-avatar
|
||||
class="mr-10"
|
||||
color="grey darken-1"
|
||||
size="32"
|
||||
></v-avatar>
|
||||
|
||||
<v-img
|
||||
alt="Vuetify Name"
|
||||
class="shrink mt-1 hidden-sm-and-down"
|
||||
contain
|
||||
min-width="100"
|
||||
src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
|
||||
width="100"
|
||||
/>
|
||||
</div>
|
||||
<v-btn
|
||||
v-for="link in links"
|
||||
:key="link.id"
|
||||
text
|
||||
link
|
||||
:to="link.to"
|
||||
>
|
||||
{{ link.name }}
|
||||
</v-btn>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-btn
|
||||
href="https://github.com/vuetifyjs/vuetify/releases/latest"
|
||||
target="_blank"
|
||||
text
|
||||
>
|
||||
<span class="mr-2">Latest Release</span>
|
||||
<v-icon>mdi-open-in-new</v-icon>
|
||||
</v-btn>
|
||||
<v-responsive max-width="720">
|
||||
<v-text-field
|
||||
dense
|
||||
flat
|
||||
hide-details
|
||||
rounded
|
||||
solo-inverted
|
||||
></v-text-field>
|
||||
</v-responsive>
|
||||
</v-container>
|
||||
</v-app-bar>
|
||||
|
||||
<v-main>
|
||||
<HelloWorld/>
|
||||
<v-main class="grey lighten-3">
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive :max="5">
|
||||
<component :key="$route.fullPath" :is="Component" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HelloWorld from './components/HelloWorld'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
|
||||
components: {
|
||||
HelloWorld
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
//
|
||||
links: [
|
||||
{
|
||||
id: 'prefs',
|
||||
name: 'Preferences',
|
||||
to: '/preferences'
|
||||
},
|
||||
{
|
||||
id: 'login',
|
||||
name: 'Login',
|
||||
to: '/login'
|
||||
},
|
||||
{
|
||||
id: 'register',
|
||||
name: 'Register',
|
||||
to: '/register'
|
||||
},
|
||||
{
|
||||
id: 'feed',
|
||||
name: 'Feed',
|
||||
to: '/feed'
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import vuetify from './plugins/vuetify'
|
||||
import store from './store'
|
||||
import router from './router'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
vuetify,
|
||||
store,
|
||||
router,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
|
||||
@@ -1,7 +1,21 @@
|
||||
import Vue from 'vue'
|
||||
import Vuetify from 'vuetify/lib/framework'
|
||||
import colors from 'vuetify/es5/util/colors'
|
||||
|
||||
Vue.use(Vuetify)
|
||||
|
||||
export default new Vuetify({
|
||||
theme: {
|
||||
themes: {
|
||||
light: {
|
||||
primary: colors.deepPurple.base,
|
||||
secondary: colors.purple.base,
|
||||
accent: colors.pink.base,
|
||||
error: colors.red.base,
|
||||
warning: colors.deepOrange.base,
|
||||
info: colors.blue.base,
|
||||
success: colors.green.base
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
import TrendingPage from '@/routes/TrendingPage'
|
||||
import Preferences from '@/routes/Preferences'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Trending',
|
||||
component: TrendingPage
|
||||
},
|
||||
{
|
||||
path: '/preferences',
|
||||
name: 'Preferences',
|
||||
component: Preferences
|
||||
},
|
||||
{
|
||||
path: '/results',
|
||||
name: 'SearchResults',
|
||||
component: () => import('@/routes/SearchResults')
|
||||
},
|
||||
{
|
||||
path: '/playlist',
|
||||
name: 'Playlist',
|
||||
component: () => import('@/routes/Playlist')
|
||||
},
|
||||
{
|
||||
path: '/:path(v|w|embed|shorts|watch)/:v?',
|
||||
name: 'WatchVideo',
|
||||
component: () => import('@/routes/WatchVideo')
|
||||
},
|
||||
{
|
||||
path: '/:path(channel|user|c)/:channelId/:videos?',
|
||||
name: 'Channel',
|
||||
component: () => import('@/routes/Channel')
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: () => import('@/routes/LoginPage')
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
name: 'Register',
|
||||
component: () => import('@/routes/RegisterPage')
|
||||
},
|
||||
{
|
||||
path: '/feed',
|
||||
name: 'Feed',
|
||||
component: () => import('@/routes/FeedPage')
|
||||
},
|
||||
{
|
||||
path: '/import',
|
||||
name: 'Import',
|
||||
component: () => import('@/routes/ImportPage')
|
||||
},
|
||||
{
|
||||
path: '/:videoId([a-zA-Z0-9_-]{11})',
|
||||
component: () => import('@/routes/VideoRedirect')
|
||||
}
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
base: process.env.BASE_URL,
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<ErrorHandler v-if="channel && channel.error" :message="channel.message" :error="channel.error" />
|
||||
|
||||
<div v-if="channel" v-show="!channel.error">
|
||||
<h1 class="uk-text-center"><img height="48" width="48" v-bind:src="channel.avatarUrl" />{{ channel.name }}</h1>
|
||||
<img v-if="channel.bannerUrl" v-bind:src="channel.bannerUrl" style="width: 100%" loading="lazy" />
|
||||
<p style="white-space: pre-wrap">{{ channel.description }}</p>
|
||||
|
||||
<button
|
||||
v-if="authenticated"
|
||||
@click="subscribeHandler"
|
||||
class="uk-button uk-button-small"
|
||||
style="background: #222"
|
||||
type="button"
|
||||
>
|
||||
{{ subscribed ? "Unsubscribe" : "Subscribe" }}
|
||||
</button>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="uk-grid-xl" uk-grid="parallax: 0">
|
||||
<div
|
||||
class="uk-width-1-2 uk-width-1-3@m uk-width-1-4@l uk-width-1-5@xl"
|
||||
v-bind:key="video.url"
|
||||
v-for="video in this.channel.relatedStreams"
|
||||
>
|
||||
<VideoItem :video="video" height="94" width="168" hideChannel />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ErrorHandler,
|
||||
VideoItem
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<p>{{ message }}</p>
|
||||
<button uk-toggle="target: #stacktrace" class="uk-button uk-button-small" style="background: #222" type="button">
|
||||
Show More
|
||||
</button>
|
||||
<p id="stacktrace" style="white-space: pre-wrap" hidden>{{ error }}</p>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
error: String,
|
||||
message: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<h1 class="uk-text-bold uk-text-center">Feed</h1>
|
||||
|
||||
<small>You can import subscriptions from <router-link to="/import">here</router-link>.</small>
|
||||
|
||||
<div class="uk-align-right">
|
||||
<a :href="getRssUrl"><font-awesome-icon icon="rss"></font-awesome-icon></a>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="uk-grid-xl" uk-grid="parallax: 0">
|
||||
<div
|
||||
:style="[{ background: backgroundColor }]"
|
||||
class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
|
||||
v-bind:key="video.url"
|
||||
v-for="video in videos"
|
||||
>
|
||||
<div class="uk-text-secondary" :style="[{ background: backgroundColor }]">
|
||||
<router-link class="uk-text-emphasis" v-bind:to="'/watch?v=' + video.id">
|
||||
<img style="width: 100%" v-bind:src="video.thumbnail" alt="thumbnail" loading="lazy" />
|
||||
<p>{{ video.title }}</p>
|
||||
</router-link>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<router-link class="uk-link-muted" :to="'/channel/' + video.uploader_id">
|
||||
<a>{{ video.uploader }}</a>
|
||||
</router-link>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<b class="uk-text-small uk-align-left">
|
||||
<div v-if="video.views >= 0">
|
||||
<font-awesome-icon icon="eye"></font-awesome-icon>
|
||||
{{ numberFormat(video.views) }} views
|
||||
<br />
|
||||
</div>
|
||||
<div>
|
||||
{{ timeAgo(video.uploaded) }}
|
||||
</div>
|
||||
</b>
|
||||
<div class="uk-align-right">
|
||||
<b class="uk-text-small">{{ timeFormat(video.duration) }}</b>
|
||||
|
||||
<br />
|
||||
|
||||
<router-link :to="'/watch?v=' + video.id + '&listen=1'">
|
||||
<font-awesome-icon icon="headphones"></font-awesome-icon>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
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()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<div class="uk-vertical-align uk-text-center uk-height-1-1 ">
|
||||
<form class="uk-panel uk-panel-box">
|
||||
<div class="uk-form-row">
|
||||
<input type="file" @change="fileChange" ref="fileSelector" />
|
||||
</div>
|
||||
<div class="uk-form-row">
|
||||
<b>Selected Subscriptions: {{ selectedSubscriptions }}</b>
|
||||
</div>
|
||||
<div class="uk-form-row">
|
||||
<a
|
||||
class="uk-width-1-1 uk-button uk-button-primary uk-button-large uk-width-auto"
|
||||
style="background: #222"
|
||||
@click="handleImport"
|
||||
>Import</a
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
<br />
|
||||
<b>Importing Subscriptions from YouTube</b>
|
||||
<br />
|
||||
<div>
|
||||
Open
|
||||
<a href="https://takeout.google.com/takeout/custom/youtube">takeout.google.com/takeout/custom/youtube</a>
|
||||
<br />
|
||||
In "Select data to include", click on "All YouTube data included" and select only "subscriptions".
|
||||
<br />
|
||||
Create the export and download the zip file.
|
||||
<br />
|
||||
Extract subscriptions.json from the zip file.
|
||||
<br />
|
||||
Select and import the file above.
|
||||
</div>
|
||||
<br />
|
||||
<b>Importing Subscriptions from Invidious</b>
|
||||
<br />
|
||||
<div>
|
||||
Open
|
||||
<a href="https://invidio.us/data_control">invidiou.us/data_control</a>
|
||||
<br />
|
||||
Click on any of the export options.
|
||||
<br />
|
||||
Select and import the file above.
|
||||
</div>
|
||||
<br />
|
||||
<b>Importing Subscriptions from NewPipe</b>
|
||||
<br />
|
||||
<div>
|
||||
Go to the Feed tab.
|
||||
<br />
|
||||
Click on the arrow on where it says "Subscriptions".
|
||||
<br />
|
||||
Save the file somewhere.
|
||||
<br />
|
||||
Select and import the file above.
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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 = []
|
||||
|
||||
// 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>
|
||||
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="uk-vertical-align uk-text-center uk-height-1-1 ">
|
||||
<form class="uk-panel uk-panel-box">
|
||||
<div class="uk-form-row">
|
||||
<input
|
||||
class="uk-width-1-1 uk-form-large uk-input uk-width-auto"
|
||||
type="text"
|
||||
v-model="username"
|
||||
autocomplete="username"
|
||||
placeholder="Username"
|
||||
/>
|
||||
</div>
|
||||
<div class="uk-form-row">
|
||||
<input
|
||||
class="uk-width-1-1 uk-form-large uk-input uk-width-auto"
|
||||
type="password"
|
||||
v-model="password"
|
||||
autocomplete="password"
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
<div class="uk-form-row">
|
||||
<a
|
||||
class="uk-width-1-1 uk-button uk-button-primary uk-button-large uk-width-auto"
|
||||
style="background: #222"
|
||||
@click="login"
|
||||
>Login</a
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<nav
|
||||
class="uk-navbar-container uk-container-expand uk-position-relative"
|
||||
:style="[{ background: backgroundColor, colour: foregroundColor }]"
|
||||
uk-navbar
|
||||
>
|
||||
<div class="uk-navbar-left">
|
||||
<router-link class="uk-navbar-item uk-logo uk-text-bold" :style="[{ colour: foregroundColor }]" to="/"
|
||||
><img alt="logo" src="/img/icons/logo.svg" height="32" width="32" style="margin-bottom: 6px; margin-right: -13px" />iped</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="uk-navbar-center uk-flex uk-visible@m">
|
||||
<input
|
||||
class="uk-input uk-width-medium"
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
v-model="searchText"
|
||||
@keyup="onKeyUp"
|
||||
@focus="onInputFocus"
|
||||
@blur="onInputBlur"
|
||||
/>
|
||||
</div>
|
||||
<div class="uk-navbar-right">
|
||||
<ul class="uk-navbar-nav">
|
||||
<li>
|
||||
<router-link to="/preferences">Preferences</router-link>
|
||||
</li>
|
||||
<li v-if="shouldShowLogin">
|
||||
<router-link to="/login">Login</router-link>
|
||||
</li>
|
||||
<li v-if="shouldShowLogin">
|
||||
<router-link to="/register">Register</router-link>
|
||||
</li>
|
||||
<li v-if="authenticated">
|
||||
<router-link to="/feed">Feed</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="uk-container-expand uk-hidden@m">
|
||||
<input
|
||||
class="uk-input"
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
v-model="searchText"
|
||||
@keyup="onKeyUp"
|
||||
@focus="onInputFocus"
|
||||
@blur="onInputBlur"
|
||||
/>
|
||||
</div>
|
||||
<SearchSuggestions
|
||||
v-show="searchText && suggestionsVisible"
|
||||
:searchText="searchText"
|
||||
@searchchange="onSearchTextChange"
|
||||
ref="searchSuggestions"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SearchSuggestions from '@/components/SearchSuggestions'
|
||||
|
||||
export default {
|
||||
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)
|
||||
},
|
||||
onInputFocus () {
|
||||
this.suggestionsVisible = true
|
||||
},
|
||||
onInputBlur () {
|
||||
this.suggestionsVisible = false
|
||||
},
|
||||
onSearchTextChange (searchText) {
|
||||
this.searchText = searchText
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<div class="uk-container-expand">
|
||||
<div
|
||||
data-shaka-player-container
|
||||
style="width: 100%; height: 100%; max-height: 75vh; min-height: 250px; background: #000"
|
||||
ref="container"
|
||||
>
|
||||
<video
|
||||
data-shaka-player
|
||||
class="uk-width-expand"
|
||||
:autoplay="shouldAutoPlay"
|
||||
:loop="selectedAutoLoop"
|
||||
ref="videoEl"
|
||||
></video>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import muxjs from 'mux.js'
|
||||
import shaka from 'shaka-player/dist/shaka-player.ui.js'
|
||||
import('shaka-player/dist/controls.css')
|
||||
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
|
||||
|
||||
videoEl.setAttribute('poster', this.video.thumbnailUrl)
|
||||
|
||||
if (this.$route.query.t) videoEl.currentTime = this.$route.query.t
|
||||
|
||||
const noPrevPlayer = !this.player
|
||||
|
||||
const streams = []
|
||||
|
||||
streams.push(...this.video.audioStreams)
|
||||
streams.push(...this.video.videoStreams)
|
||||
|
||||
const MseSupport = window.MediaSource !== undefined
|
||||
|
||||
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
|
||||
)
|
||||
|
||||
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()
|
||||
}
|
||||
})
|
||||
|
||||
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.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
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
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
|
||||
},
|
||||
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) {
|
||||
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>
|
||||
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<ErrorHandler v-if="playlist && playlist.error" :message="playlist.message" :error="playlist.error" />
|
||||
|
||||
<div v-if="playlist" v-show="!playlist.error">
|
||||
<h1 class="uk-text-center">
|
||||
<img v-bind:src="playlist.avatarUrl" height="48" width="48" loading="lazy" />
|
||||
{{ playlist.name }}
|
||||
</h1>
|
||||
|
||||
<b
|
||||
><router-link class="uk-text-justify" v-bind:to="playlist.uploaderUrl || '/'">
|
||||
<img v-bind:src="playlist.uploaderAvatar" loading="lazy" />
|
||||
{{ playlist.uploader }}</router-link
|
||||
></b
|
||||
>
|
||||
|
||||
<div class="uk-align-right">
|
||||
<b>{{ playlist.videos }} Videos</b>
|
||||
<br />
|
||||
<a :href="getRssUrl"><font-awesome-icon icon="rss"></font-awesome-icon></a>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="uk-grid-xl" uk-grid="parallax: 0">
|
||||
<div
|
||||
class="uk-width-1-2 uk-width-1-3@m uk-width-1-4@l uk-width-1-5@xl"
|
||||
v-bind:key="video.url"
|
||||
v-for="video in this.playlist.relatedStreams"
|
||||
>
|
||||
<VideoItem :video="video" height="94" width="168" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ErrorHandler from '@/components/ErrorHandler.vue'
|
||||
import VideoItem from '@/components/VideoItem.vue'
|
||||
|
||||
export default {
|
||||
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)
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<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>
|
||||
<b>Enable Sponsorblock</b>
|
||||
<br />
|
||||
<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" />
|
||||
<br />
|
||||
<b>Skip Intermission/Intro Animation</b>
|
||||
<br />
|
||||
<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" />
|
||||
<br />
|
||||
<b>Skip Preview/Recap</b>
|
||||
<br />
|
||||
<input class="uk-checkbox" v-model="skipPreview" @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" />
|
||||
<br />
|
||||
<b>Skip Unpaid/Self Promotion</b>
|
||||
<br />
|
||||
<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" />
|
||||
<br />
|
||||
<b>Theme</b>
|
||||
<br />
|
||||
<select class="uk-select uk-width-auto" v-model="selectedTheme" @change="onChange($event)">
|
||||
<option value="auto">Auto</option>
|
||||
<option value="dark">Dark</option>
|
||||
<option value="light">Light</option>
|
||||
</select>
|
||||
<br />
|
||||
<b>Autoplay Video</b>
|
||||
<br />
|
||||
<input class="uk-checkbox" v-model="autoPlayVideo" @change="onChange($event)" type="checkbox" />
|
||||
<br />
|
||||
<b>Audio Only</b>
|
||||
<br />
|
||||
<input class="uk-checkbox" v-model="listen" @change="onChange($event)" type="checkbox" />
|
||||
<br />
|
||||
<b>Default Quality</b>
|
||||
<br />
|
||||
<select class="uk-select uk-width-auto" v-model="defaultQuality" @change="onChange($event)">
|
||||
<option value="0">Auto</option>
|
||||
<option :key="resolution" v-for="resolution in resolutions" :value="resolution">{{ resolution }}p</option>
|
||||
</select>
|
||||
<br />
|
||||
<b>Buffering Goal</b>
|
||||
<br />
|
||||
<input class="uk-input uk-width-auto" v-model="bufferingGoal" @change="onChange($event)" type="text" />
|
||||
<br />
|
||||
<b>Country Selection</b>
|
||||
<br />
|
||||
<select class="uk-select uk-width-auto" v-model="country" @change="onChange($event)">
|
||||
<option :key="country.code" v-for="country in countryMap" :value="country.code">{{ country.name }}</option>
|
||||
</select>
|
||||
<br />
|
||||
<b>Default Homepage</b>
|
||||
<br />
|
||||
<select class="uk-select uk-width-auto" v-model="defaultHomepage" @change="onChange($event)">
|
||||
<option value="trending">Trending</option>
|
||||
<option value="feed">Feed</option>
|
||||
</select>
|
||||
<br />
|
||||
<b>Show Comments</b>
|
||||
<br />
|
||||
<input class="uk-checkbox" v-model="showComments" @change="onChange($event)" type="checkbox" />
|
||||
<h2>Instances List</h2>
|
||||
<table class="uk-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Instance Name</th>
|
||||
<th>Instance Locations</th>
|
||||
<th>Has CDN?</th>
|
||||
<th>SSL Score</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody v-bind:key="instance.name" v-for="instance in instances">
|
||||
<tr>
|
||||
<td>{{ instance.name }}</td>
|
||||
<td>{{ instance.locations }}</td>
|
||||
<td>{{ instance.cdn }}</td>
|
||||
<td>
|
||||
<a :href="sslScore(instance.apiurl)" target="_blank">Click Here</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<hr />
|
||||
|
||||
<b>Instance Selection:</b>
|
||||
<br />
|
||||
<select class="uk-select uk-width-auto" 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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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: {} })
|
||||
|
||||
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()
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
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()
|
||||
}
|
||||
},
|
||||
sslScore (url) {
|
||||
return 'https://www.ssllabs.com/ssltest/analyze.html?d=' + new URL(url).host + '&latest'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="uk-vertical-align uk-text-center uk-height-1-1 ">
|
||||
<form class="uk-panel uk-panel-box">
|
||||
<div class="uk-form-row">
|
||||
<input
|
||||
class="uk-width-1-1 uk-form-large uk-input uk-width-auto"
|
||||
type="text"
|
||||
v-model="username"
|
||||
autocomplete="username"
|
||||
placeholder="Username"
|
||||
/>
|
||||
</div>
|
||||
<div class="uk-form-row">
|
||||
<input
|
||||
class="uk-width-1-1 uk-form-large uk-input uk-width-auto"
|
||||
type="password"
|
||||
v-model="password"
|
||||
autocomplete="password"
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
<div class="uk-form-row">
|
||||
<a
|
||||
class="uk-width-1-1 uk-button uk-button-primary uk-button-large uk-width-auto"
|
||||
style="background: #222"
|
||||
@click="register"
|
||||
>Register</a
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<h1 class="uk-text-center">
|
||||
{{ $route.query.search_query }}
|
||||
</h1>
|
||||
|
||||
<b>Filter: </b>
|
||||
<select
|
||||
default="all"
|
||||
class="uk-select uk-width-auto"
|
||||
style="height: 100%"
|
||||
v-model="selectedFilter"
|
||||
@change="updateResults()"
|
||||
>
|
||||
<option v-bind:key="filter" v-for="filter in availableFilters" v-bind:value="filter">
|
||||
{{ filter.replace("_", " ") }}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<hr />
|
||||
|
||||
<div v-if="results" class="uk-grid-xl" uk-grid="parallax: 0">
|
||||
<div
|
||||
:style="[{ background: backgroundColor }]"
|
||||
class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
|
||||
v-bind:key="result.url"
|
||||
v-for="result in results.items"
|
||||
>
|
||||
<div class="uk-text-secondary">
|
||||
<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 }} <font-awesome-icon
|
||||
v-if="result.verified"
|
||||
icon="check"
|
||||
></font-awesome-icon>
|
||||
</p>
|
||||
</router-link>
|
||||
<p v-if="result.description">{{ result.description }}</p>
|
||||
<router-link class="uk-link-muted" v-if="result.uploaderUrl" v-bind:to="result.uploaderUrl">
|
||||
<p>
|
||||
{{ result.uploader }} <font-awesome-icon
|
||||
v-if="result.uploaderVerified"
|
||||
icon="check"
|
||||
></font-awesome-icon>
|
||||
</p>
|
||||
</router-link>
|
||||
<b v-if="result.duration" class="uk-text-small uk-align-right uk-text-align-right">
|
||||
{{ timeFormat(result.duration) }}
|
||||
</b>
|
||||
|
||||
<b v-if="result.uploadDate">
|
||||
{{ result.uploadDate }}
|
||||
</b>
|
||||
|
||||
<a v-if="result.uploaderName" class="uk-text-muted">{{ result.uploaderName }}</a>
|
||||
<b v-if="result.videos >= 0"><br v-if="result.uploaderName" />{{ result.videos }} Videos</b>
|
||||
|
||||
<br />
|
||||
|
||||
<b v-if="result.views >= 0" class="uk-text-small">
|
||||
<font-awesome-icon icon="eye"></font-awesome-icon>
|
||||
{{ numberFormat(result.views) }} views
|
||||
</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
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
|
||||
})
|
||||
},
|
||||
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))
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div
|
||||
class="uk-position-absolute uk-panel uk-box-shadow-large suggestions-container"
|
||||
:style="[{ background: secondaryBackgroundColor }]"
|
||||
>
|
||||
<ul class="uk-list uk-margin-remove uk-text-secondary">
|
||||
<li
|
||||
v-for="(suggestion, i) in searchSuggestions"
|
||||
:key="i"
|
||||
:style="[selected === i ? { background: secondaryForegroundColor } : {}]"
|
||||
@mouseover="onMouseOver(i)"
|
||||
@mousedown.stop="onClick(i)"
|
||||
class="uk-margin-remove suggestion"
|
||||
>
|
||||
{{ suggestion }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
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()
|
||||
}
|
||||
},
|
||||
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])
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.suggestions-container {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
max-width: 640px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 5px 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.suggestion {
|
||||
padding: 4px 15px;
|
||||
}
|
||||
@media screen and (max-width: 959px) {
|
||||
.suggestions-container {
|
||||
max-width: calc(100% - 60px);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 639px) {
|
||||
.suggestions-container {
|
||||
max-width: calc(100% - 30px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<h1 class="uk-text-bold uk-text-center">Trending</h1>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="uk-grid-xl" uk-grid="parallax: 0">
|
||||
<div
|
||||
:style="[{ background: backgroundColor }]"
|
||||
class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
|
||||
v-bind:key="video.url"
|
||||
v-for="video in videos"
|
||||
>
|
||||
<VideoItem :video="video" height="118" width="210" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VideoItem from '@/components/VideoItem.vue'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
videos: []
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
document.title = 'Trending - Piped'
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="uk-text-secondary" :style="[{ background: backgroundColor }]">
|
||||
<router-link class="uk-text-emphasis" v-bind:to="video.url">
|
||||
<img
|
||||
:height="height"
|
||||
:width="width"
|
||||
style="width: 100%"
|
||||
v-bind:src="video.thumbnail"
|
||||
alt="thumbnail"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>{{ video.title }}</p>
|
||||
</router-link>
|
||||
|
||||
<div :class="{ 'uk-align-left': !(video.views >= 0 || video.uploadedDate) }">
|
||||
<div v-if="video.uploaderUrl && video.uploaderName && !hideChannel">
|
||||
<router-link class="uk-link-muted" :to="video.uploaderUrl">
|
||||
<a>{{ video.uploaderName }}</a>
|
||||
</router-link>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<b v-if="video.views >= 0 || video.uploadedDate" class="uk-text-small uk-align-left">
|
||||
<div v-if="video.views >= 0">
|
||||
<font-awesome-icon icon="eye"></font-awesome-icon>
|
||||
{{ numberFormat(video.views) }} views
|
||||
<br />
|
||||
</div>
|
||||
<div v-if="video.uploadedDate">
|
||||
{{ video.uploadedDate }}
|
||||
</div>
|
||||
</b>
|
||||
<div class="uk-align-right">
|
||||
<b class="uk-text-small">{{ timeFormat(video.duration) }}</b>
|
||||
|
||||
<br />
|
||||
|
||||
<router-link :to="video.url + '&listen=1'">
|
||||
<font-awesome-icon icon="headphones"></font-awesome-icon>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
video: Object,
|
||||
height: String,
|
||||
width: String,
|
||||
hideChannel: Boolean
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div>Loading...</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
activated () {
|
||||
const videoId = this.$route.params.videoId
|
||||
if (videoId) {
|
||||
this.$router.push({
|
||||
path: '/watch',
|
||||
query: { v: videoId }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<div class="uk-container uk-container-xlarge" v-if="video">
|
||||
<ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" />
|
||||
|
||||
<div v-show="!video.error">
|
||||
<Player
|
||||
ref="videoPlayer"
|
||||
:video="video"
|
||||
:sponsors="sponsors"
|
||||
:selectedAutoPlay="selectedAutoPlay"
|
||||
:selectedAutoLoop="selectedAutoLoop"
|
||||
/>
|
||||
<div class="uk-text-bold uk-margin-small-top uk-text-large uk-text-emphasis">{{ video.title }}</div>
|
||||
|
||||
<div class="uk-flex uk-flex-middle">
|
||||
<div class="uk-margin-small-right">{{ addCommas(video.views) }} views</div>
|
||||
<div class="uk-margin-small-right">{{ video.uploadDate }}</div>
|
||||
<div class="uk-flex-1"></div>
|
||||
<div class="uk-margin-small-left">
|
||||
<font-awesome-icon class="uk-margin-small-right" icon="thumbs-up"></font-awesome-icon>
|
||||
<b>{{ addCommas(video.likes) }}</b>
|
||||
</div>
|
||||
<div class="uk-margin-small-left">
|
||||
<font-awesome-icon class="uk-margin-small-right" icon="thumbs-down"></font-awesome-icon>
|
||||
<b>{{ addCommas(video.dislikes) }}</b>
|
||||
</div>
|
||||
<a
|
||||
:href="'https://youtu.be/' + getVideoId()"
|
||||
class="uk-margin-small-left uk-button uk-button-small"
|
||||
style="background: #222"
|
||||
>
|
||||
<font-awesome-icon class="uk-margin-small-right" :icon="['fab', 'youtube']"></font-awesome-icon>
|
||||
<b>Watch on</b>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="uk-flex uk-flex-middle uk-margin-small-top">
|
||||
<img :src="video.uploaderAvatar" loading="lazy" />
|
||||
<router-link class="uk-text-bold uk-margin-small-left" v-if="video.uploaderUrl" :to="video.uploaderUrl">
|
||||
<a>{{ video.uploader }}</a>
|
||||
</router-link>
|
||||
<div class="uk-flex-1"></div>
|
||||
<button
|
||||
v-if="authenticated"
|
||||
@click="subscribeHandler"
|
||||
class="uk-button uk-button-small"
|
||||
style="background: #222"
|
||||
type="button"
|
||||
>
|
||||
{{ subscribed ? "Unsubscribe" : "Subscribe" }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<a class="uk-button uk-button-small" style="background: #222" @click="showDesc = !showDesc">
|
||||
{{ showDesc ? "Minimize Description" : "Show Description" }}
|
||||
</a>
|
||||
<p v-show="showDesc" :style="[{ colour: foregroundColor }]" v-html="video.description"></p>
|
||||
<div v-if="showDesc && sponsors && sponsors.segments">
|
||||
Sponsors Segments: {{ sponsors.segments.length }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<b>Loop this Video:</b>
|
||||
<input class="uk-checkbox" v-model="selectedAutoLoop" @change="onChange($event)" type="checkbox" />
|
||||
<br />
|
||||
<b>Auto Play next Video:</b>
|
||||
<input class="uk-checkbox" v-model="selectedAutoPlay" @change="onChange($event)" type="checkbox" />
|
||||
|
||||
<hr />
|
||||
|
||||
<div uk-grid>
|
||||
<div class="uk-width-4-5@xl uk-width-3-4@l uk-width-1" v-if="comments" ref="comments">
|
||||
<div
|
||||
class="uk-tile-default uk-align-left uk-width-expand"
|
||||
:style="[{ background: backgroundColor }]"
|
||||
v-bind:key="comment.commentId"
|
||||
v-for="comment in comments.comments"
|
||||
>
|
||||
<div align="left">
|
||||
<div v-if="comment.pinned">
|
||||
<font-awesome-icon icon="thumbtack"></font-awesome-icon> Pinned by
|
||||
{{ video.uploader }}
|
||||
</div>
|
||||
<img
|
||||
:src="comment.thumbnail"
|
||||
style="width: 10vmin"
|
||||
height="176"
|
||||
width="176"
|
||||
loading="lazy"
|
||||
alt="avatar"
|
||||
/>
|
||||
<br />
|
||||
<router-link class="uk-link-muted" v-bind:to="comment.commentorUrl">
|
||||
{{ comment.author }} </router-link
|
||||
> <font-awesome-icon v-if="comment.verified" icon="check"></font-awesome-icon>
|
||||
</div>
|
||||
<p style="white-space: pre-wrap">{{ comment.commentText }}</p>
|
||||
<div>
|
||||
<b>{{ numberFormat(comment.likeCount) }}</b>
|
||||
|
||||
<font-awesome-icon icon="thumbs-up"></font-awesome-icon>
|
||||
|
||||
<font-awesome-icon v-if="comment.hearted" icon="heart"></font-awesome-icon>
|
||||
</div>
|
||||
<hr />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-width-1-5@xl uk-width-1-4@l uk-width-1 uk-flex-last@l uk-flex-first" v-if="video">
|
||||
<div
|
||||
class="uk-tile-default uk-width-auto"
|
||||
:style="[{ background: backgroundColor }]"
|
||||
v-bind:key="related.url"
|
||||
v-for="related in video.relatedStreams"
|
||||
>
|
||||
<VideoItem :video="related" height="94" width="168" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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
|
||||
}
|
||||
},
|
||||
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:
|
||||
'["' +
|
||||
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
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,15 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
},
|
||||
mutations: {
|
||||
},
|
||||
actions: {
|
||||
},
|
||||
modules: {
|
||||
}
|
||||
})
|
||||
@@ -1311,14 +1311,14 @@
|
||||
webpack "^4.0.0"
|
||||
yorkie "^2.0.0"
|
||||
|
||||
"@vue/cli-plugin-router@^4.5.13":
|
||||
"@vue/cli-plugin-router@^4.5.13", "@vue/cli-plugin-router@~4.5.0":
|
||||
version "4.5.13"
|
||||
resolved "https://registry.yarnpkg.com/@vue/cli-plugin-router/-/cli-plugin-router-4.5.13.tgz#0b67c8898a2bf132941919a2a2e5f3aacbd9ffbe"
|
||||
integrity sha512-tgtMDjchB/M1z8BcfV4jSOY9fZSMDTPgF9lsJIiqBWMxvBIsk9uIZHxp62DibYME4CCKb/nNK61XHaikFp+83w==
|
||||
dependencies:
|
||||
"@vue/cli-shared-utils" "^4.5.13"
|
||||
|
||||
"@vue/cli-plugin-vuex@^4.5.13":
|
||||
"@vue/cli-plugin-vuex@^4.5.13", "@vue/cli-plugin-vuex@~4.5.0":
|
||||
version "4.5.13"
|
||||
resolved "https://registry.yarnpkg.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.13.tgz#98646d8bc1e69cf6c6a6cba2fed3eace0356c360"
|
||||
integrity sha512-I1S9wZC7iI0Wn8kw8Zh+A2Qkf6s1M6vTGBkx8boXjuzfwEEyEHRxadsVCecZc8Mkpydo0nykj+MyYF96TKFuVA==
|
||||
@@ -8900,6 +8900,11 @@ vue-loader@^15.9.2:
|
||||
vue-hot-reload-api "^2.3.0"
|
||||
vue-style-loader "^4.1.0"
|
||||
|
||||
vue-router@^3.2.0:
|
||||
version "3.5.2"
|
||||
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.2.tgz#5f55e3f251970e36c3e8d88a7cd2d67a350ade5c"
|
||||
integrity sha512-807gn82hTnjCYGrnF3eNmIw/dk7/GE4B5h69BlyCK9KHASwSloD1Sjcn06zg9fVG4fYH2DrsNBZkpLtb25WtaQ==
|
||||
|
||||
vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
|
||||
version "4.1.3"
|
||||
resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"
|
||||
@@ -8940,6 +8945,11 @@ vuetify@^2.4.0:
|
||||
resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.5.6.tgz#9cbb1eacece6c42028216312b9be23e35a7f5cf4"
|
||||
integrity sha512-2T8ML5PYuJ/AdMVH3ZIvzHnsM0nX8t4Xzj+0HFFGfLT7jLlptCFpG+JE8+kyrgGZlbUgulyOwCUu8hJkVsReFA==
|
||||
|
||||
vuex@^3.4.0:
|
||||
version "3.6.2"
|
||||
resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
|
||||
integrity sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==
|
||||
|
||||
watchpack-chokidar2@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"
|
||||
|
||||
Reference in New Issue
Block a user