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

Add "Watch on YouTube" button.

Browse source
This commit is contained in:
FireMasterK 2021-07-01 01:56:04 +05:30
parent e36bafea9c
commit c599d56db6
No known key found for this signature in database
GPG key ID: 49451E4482CC5BCD
2 changed files with 34 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/components/WatchVideo.vue
View file

@ -1,30 +1,43 @@
<template>
<div class="uk-container uk-container-xlarge">
<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" />
<h1 class="uk-text-bold">{{ video.title }}</h1>
<img :src="video.uploaderAvatar" loading="lazy" />
<router-link class="uk-text-bold" v-bind:to="video.uploaderUrl || '/'">
<a>{{ video.uploader }}</a>
</router-link>
<div uk-grid>
<div class="uk-width-1-2 uk-text-left">
<img :src="video.uploaderAvatar" loading="lazy" />
<router-link class="uk-text-bold" v-if="video.uploaderUrl" :to="video.uploaderUrl">
<a>{{ video.uploader }}</a>
</router-link>
<div :style="[{ colour: foregroundColor }]">
<font-awesome-icon icon="thumbs-up"></font-awesome-icon>
<b>{{ addCommas(video.likes) }}</b>
&nbsp;
<font-awesome-icon icon="thumbs-down"></font-awesome-icon>
<b>{{ addCommas(video.dislikes) }}</b>
</div>
<div>
<font-awesome-icon icon="eye"></font-awesome-icon>
<b>{{ addCommas(video.views) }}</b> views
</div>
<div>
Uploaded on <b>{{ video.uploadDate }}</b>
</div>
</div>
<div class="uk-width-1-2 uk-text-right">
<a :href="'https://youtu.be/' + getVideoId()"
>Watch on <font-awesome-icon :icon="['fab', 'youtube']"></font-awesome-icon
></a>
</div>
</div>
<hr />
<p :style="[{ colour: foregroundColor }]">
<font-awesome-icon icon="thumbs-up"></font-awesome-icon>
<b>{{ addCommas(video.likes) }}</b>
&nbsp;
<font-awesome-icon icon="thumbs-down"></font-awesome-icon>
<b>{{ addCommas(video.dislikes) }}</b>
</p>
<p>
<font-awesome-icon icon="eye"></font-awesome-icon>
<b>{{ addCommas(video.views) }}</b> views
</p>
<p>
Uploaded on <b>{{ video.uploadDate }}</b>
</p>
<a class="uk-button uk-button-small" style="background: #222" @click="showDesc = !showDesc">
{{ showDesc ? "+" : "-" }}
</a>

4
src/main.js
View file

@ -1,9 +1,9 @@
import { createApp } from "vue";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faThumbsUp, faThumbsDown, faEye, faThumbtack, faCheck, faHeart, faHeadphones } from "@fortawesome/free-solid-svg-icons";
import { faGithub, faBitcoin } from "@fortawesome/free-brands-svg-icons";
import { faGithub, faBitcoin, faYoutube } from "@fortawesome/free-brands-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
library.add(faThumbsUp, faThumbsDown, faEye, faGithub, faBitcoin, faThumbtack, faCheck, faHeart, faHeadphones);
library.add(faThumbsUp, faThumbsDown, faEye, faGithub, faBitcoin, faThumbtack, faCheck, faHeart, faHeadphones, faYoutube);
import("uikit/dist/css/uikit-core.css");
import("uikit/dist/js/uikit-core.min");