mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-08-14 23:57:27 +00:00
Initial commit.
A WIP front end.
This commit is contained in:
FireMasterK
parent
ec24841f1a
commit
14a1d96c65
10 changed files with 1541 additions and 222 deletions
63
src/App.vue
63
src/App.vue
|
|
@ -1,26 +1,37 @@
|
|||
<template>
|
||||
<img alt="Vue logo" src="./assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
HelloWorld
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<nav class="uk-navbar-container uk-container-expand uk-light" style="background:#0b0e0f" uk-navbar>
|
||||
<div class="uk-navbar-left">
|
||||
<router-link class="uk-navbar-item uk-logo uk-text-bold" to="/">Piped</router-link>
|
||||
</div>
|
||||
<div class="uk-navbar-right">
|
||||
<ul class="uk-navbar-nav">
|
||||
<li>
|
||||
<router-link to="/login">Login</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/feed">Feed</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="uk-container uk-light" style="background:#0b0e0f">
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
background: #0b0e0f;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
3
src/Constants.js
Normal file
3
src/Constants.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export default {
|
||||
BASE_URL: '',
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
43
src/components/TrendingPage.vue
Normal file
43
src/components/TrendingPage.vue
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<h1 class="uk-text-bold uk-text-center">Trending</h1>
|
||||
|
||||
<div class="" style="width: 100%" uk-grid="parallax: 0">
|
||||
<div class="uk-tile-default" style="width: 350px; background: #0b0e0f" v-bind:key="video.url" v-for="video in videos">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-grid-match uk-text-secondary" style="background: #0b0e0f">
|
||||
<router-link class="uk-text-emphasis" v-bind:to="video.url || '/'">
|
||||
<p>{{ video.title }}</p>
|
||||
<img style="width: 100%" v-bind:src="video.thumbnail" />
|
||||
</router-link>
|
||||
<router-link class="uk-link-muted" v-bind:to="video.uploaderUrl || '/'">
|
||||
<p>{{ video.uploaderName }}</p>
|
||||
</router-link>
|
||||
<font-awesome-icon icon="eye"></font-awesome-icon> {{ video.views }} views
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Constants from '@/Constants.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
videos: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
document.title = "Trending - Piped";
|
||||
|
||||
this.fetchTrending().then(videos => this.videos = videos)
|
||||
},
|
||||
methods: {
|
||||
async fetchTrending() {
|
||||
return await (
|
||||
await fetch(Constants.BASE_URL + "/trending")
|
||||
).json();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
183
src/components/WatchVideo.vue
Normal file
183
src/components/WatchVideo.vue
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
<template>
|
||||
<h1 class="uk-text-bold">{{ video.title }}</h1>
|
||||
<video controls ref="player" class="video-js vjs-16-9"></video>
|
||||
|
||||
<div>
|
||||
<img :src="video.uploaderAvatar" />
|
||||
<router-link class="uk-text-bold" v-bind:to="video.uploaderUrl || '/'">
|
||||
<p>{{ video.uploader }}</p>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<p v-if="sponsors && sponsors.segments">Sponsors found in Video: {{ sponsors.segments.length }}</p>
|
||||
|
||||
<p class="uk-dark">
|
||||
<font-awesome-icon icon="thumbs-down"></font-awesome-icon>
|
||||
{{ video.likes }}
|
||||
<font-awesome-icon icon="thumbs-up"></font-awesome-icon>
|
||||
{{ video.dislikes }}
|
||||
</p>
|
||||
<p>
|
||||
<font-awesome-icon icon="eye"></font-awesome-icon> {{ video.views }} views
|
||||
</p>
|
||||
<p class="uk-light" v-html="video.description"></p>
|
||||
|
||||
<div class="uk-tile-default uk-text-secondary" style="background: #0b0e0f; width: 300px" v-bind:key="related.url" v-for="related in video.relatedStreams">
|
||||
<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" />
|
||||
</router-link>
|
||||
<p>
|
||||
<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>
|
||||
{{ related.views }} views
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import "video.js/dist/video-js.css";
|
||||
import "@silvermine/videojs-quality-selector/dist/css/quality-selector.css";
|
||||
import videojs from "video.js";
|
||||
import "videojs-hotkeys";
|
||||
import Constants from "@/Constants.js";
|
||||
require("@silvermine/videojs-quality-selector")(videojs);
|
||||
//import "videojs-ttml/dist/videojs-ttml.min.js";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {
|
||||
video: {
|
||||
title: "Loading...",
|
||||
},
|
||||
player: null,
|
||||
sponsors: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getVideoData();
|
||||
this.getSponsors();
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (this.player) {
|
||||
this.player.dispose();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
"$route.query.v": function (v) {
|
||||
if (v) {
|
||||
this.getVideoData();
|
||||
this.getSponsors();
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async fetchVideo() {
|
||||
return await (
|
||||
await fetch(Constants.BASE_URL + "/streams/" + this.$route.query.v)
|
||||
).json();
|
||||
},
|
||||
async fetchSponsors() {
|
||||
return await (
|
||||
await fetch(Constants.BASE_URL + "/sponsors/" + this.$route.query.v + "?category=[\"sponsor\",\"interaction\",\"selfpromo\",\"music_offtopic\"]")
|
||||
).json();
|
||||
},
|
||||
async getVideoData() {
|
||||
this.fetchVideo()
|
||||
.then((data) => (this.video = data))
|
||||
.then(() => {
|
||||
document.title = this.video.title + " - Piped";
|
||||
|
||||
this.video.description = this.video.description.replaceAll("http://www.youtube.com", "").replaceAll("https://www.youtube.com", "")
|
||||
|
||||
const options = {
|
||||
autoplay: false,
|
||||
controlBar: {
|
||||
children: [
|
||||
"playToggle",
|
||||
"currentTimeDisplay",
|
||||
"progressControl",
|
||||
"volumePanel",
|
||||
"qualitySelector",
|
||||
"subtitlesButton",
|
||||
"fullscreenToggle",
|
||||
],
|
||||
},
|
||||
plugins: {
|
||||
ttml: {}
|
||||
},
|
||||
nativeTextTracks: false,
|
||||
};
|
||||
|
||||
const noPrevPlayer = !this.player
|
||||
|
||||
if (noPrevPlayer) this.player = videojs(this.$refs.player, options);
|
||||
|
||||
this.player.hotkeys({
|
||||
volumeStep: 0.1,
|
||||
seekStep: 5,
|
||||
enableModifiersForNumbers: false,
|
||||
enableHoverScroll: true,
|
||||
});
|
||||
|
||||
this.player.poster(this.video.thumbnailUrl);
|
||||
|
||||
var src = [];
|
||||
|
||||
this.video.videoStreams.map((stream) =>
|
||||
src.push({
|
||||
src: stream.url,
|
||||
type: stream.mimeType,
|
||||
label: stream.quality,
|
||||
})
|
||||
);
|
||||
|
||||
this.player.src(src);
|
||||
|
||||
if (noPrevPlayer)
|
||||
this.player.on('timeupdate', () => {
|
||||
if (this.sponsors && this.sponsors.segments) {
|
||||
const time = this.player.currentTime()
|
||||
this.sponsors.segments.map(segment => {
|
||||
if (!segment.skipped) {
|
||||
const end = segment.segment[1]
|
||||
if (time >= segment.segment[0] && time < end) {
|
||||
this.player.currentTime(end)
|
||||
segment.skipped = true
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
// if (!noPrevPlayer)
|
||||
// this.player.remoteTextTracks().map(track => this.player.removeRemoteTextTrack(track));
|
||||
|
||||
this.video.subtitles.map(subtitle => {
|
||||
this.player.addRemoteTextTrack({
|
||||
kind: "captions",
|
||||
src: subtitle.url,
|
||||
label: "Track",
|
||||
type: subtitle.mimeType
|
||||
}, false);
|
||||
})
|
||||
|
||||
//TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
|
||||
|
||||
});
|
||||
},
|
||||
async getSponsors() {
|
||||
this.fetchSponsors().then((data) => (this.sponsors = data));
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.vjs-current-time {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
14
src/main.js
14
src/main.js
|
|
@ -1,4 +1,16 @@
|
|||
import { createApp } from 'vue'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { faThumbsUp, faThumbsDown, faEye } from '@fortawesome/free-solid-svg-icons'
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
library.add(faThumbsUp, faThumbsDown, faEye)
|
||||
|
||||
import "uikit/src/less/uikit.less";
|
||||
import "uikit/dist/js/uikit.min.js";
|
||||
|
||||
import router from '@/router/router'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
const app = createApp(App)
|
||||
app.use(router)
|
||||
app.component('font-awesome-icon', FontAwesomeIcon)
|
||||
app.mount('#app')
|
||||
20
src/router/router.js
Normal file
20
src/router/router.js
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import Watch from '../components/WatchVideo.vue'
|
||||
import Trending from '../components/TrendingPage.vue'
|
||||
|
||||
const routes = [{
|
||||
path: '/watch',
|
||||
name: 'Watch',
|
||||
component: Watch
|
||||
}, {
|
||||
path: '/',
|
||||
name: 'Trending',
|
||||
component: Trending
|
||||
}]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
Loading…
Add table
Add a link
Reference in a new issue