mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-10 02:08:21 +00:00
Add "Watch on YouTube" button.
This commit is contained in:
parent
e36bafea9c
commit
c599d56db6
@ -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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
@ -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");
|
||||
|
Loading…
Reference in New Issue
Block a user