2020-02-16 18:30:00 +00:00
|
|
|
<template>
|
2020-06-18 15:47:43 +00:00
|
|
|
<div
|
|
|
|
class="videoLayout"
|
|
|
|
:class="{
|
|
|
|
isLoading,
|
2021-01-13 04:13:36 +00:00
|
|
|
useTheatreMode,
|
|
|
|
noSidebar: !theatrePossible
|
2020-06-18 15:47:43 +00:00
|
|
|
}"
|
|
|
|
>
|
2020-02-16 18:30:00 +00:00
|
|
|
<ft-loader
|
|
|
|
v-if="isLoading"
|
|
|
|
:fullscreen="true"
|
|
|
|
/>
|
2020-06-18 15:47:43 +00:00
|
|
|
<div class="videoArea">
|
|
|
|
<div class="videoAreaMargin">
|
|
|
|
<ft-video-player
|
2020-09-16 02:07:54 +00:00
|
|
|
v-if="!isLoading && !hidePlayer && !isUpcoming"
|
2020-06-19 20:20:06 +00:00
|
|
|
ref="videoPlayer"
|
2020-06-18 15:47:43 +00:00
|
|
|
:dash-src="dashSrc"
|
|
|
|
:source-list="activeSourceList"
|
2021-05-15 19:08:41 +00:00
|
|
|
:adaptive-formats="adaptiveFormats"
|
2021-03-17 01:28:25 +00:00
|
|
|
:caption-hybrid-list="captionHybridList"
|
2020-06-18 15:47:43 +00:00
|
|
|
:storyboard-src="videoStoryboardSrc"
|
|
|
|
:format="activeFormat"
|
|
|
|
:thumbnail="thumbnail"
|
2021-05-16 20:01:24 +00:00
|
|
|
:video-id="videoId"
|
2020-06-18 15:47:43 +00:00
|
|
|
class="videoPlayer"
|
|
|
|
:class="{ theatrePlayer: useTheatreMode }"
|
2020-08-20 02:39:44 +00:00
|
|
|
@ready="checkIfWatched"
|
2020-06-18 15:47:43 +00:00
|
|
|
@ended="handleVideoEnded"
|
|
|
|
@error="handleVideoError"
|
2021-03-17 01:28:25 +00:00
|
|
|
@store-caption-list="captionHybridList = $event"
|
2020-06-18 15:47:43 +00:00
|
|
|
/>
|
2020-09-16 02:07:54 +00:00
|
|
|
<div
|
|
|
|
v-if="!isLoading && isUpcoming"
|
|
|
|
class="videoPlayer"
|
|
|
|
>
|
|
|
|
<img
|
|
|
|
:src="thumbnail"
|
|
|
|
class="upcomingThumbnail"
|
2020-09-16 03:10:15 +00:00
|
|
|
>
|
2020-09-16 02:07:54 +00:00
|
|
|
<div
|
2020-09-16 03:10:15 +00:00
|
|
|
class="premiereDate"
|
2020-09-16 02:07:54 +00:00
|
|
|
>
|
|
|
|
<font-awesome-icon
|
|
|
|
icon="satellite-dish"
|
|
|
|
class="premiereIcon"
|
|
|
|
/>
|
|
|
|
<p
|
2020-09-25 14:14:49 +00:00
|
|
|
v-if="upcomingTimestamp !== null"
|
2020-09-16 02:07:54 +00:00
|
|
|
class="premiereText"
|
|
|
|
>
|
2021-11-06 02:11:21 +00:00
|
|
|
{{ $t("Video.Premieres on") }}:
|
2020-09-16 03:10:15 +00:00
|
|
|
<br>
|
2020-09-16 02:07:54 +00:00
|
|
|
{{ upcomingTimestamp }}
|
|
|
|
</p>
|
2020-09-25 14:14:49 +00:00
|
|
|
<p
|
|
|
|
v-else
|
|
|
|
class="premiereText"
|
|
|
|
>
|
|
|
|
{{ $t("Video.Starting soon, please refresh the page to check again") }}
|
|
|
|
</p>
|
2020-09-16 02:07:54 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2020-06-18 15:47:43 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="infoArea">
|
|
|
|
<watch-video-info
|
|
|
|
v-if="!isLoading"
|
|
|
|
:id="videoId"
|
|
|
|
:title="videoTitle"
|
|
|
|
:channel-id="channelId"
|
|
|
|
:channel-name="channelName"
|
|
|
|
:channel-thumbnail="channelThumbnail"
|
|
|
|
:published="videoPublished"
|
|
|
|
:subscription-count-text="channelSubscriptionCountText"
|
|
|
|
:like-count="videoLikeCount"
|
|
|
|
:dislike-count="videoDislikeCount"
|
|
|
|
:view-count="videoViewCount"
|
2020-09-12 03:20:26 +00:00
|
|
|
:get-timestamp="getTimestamp"
|
2020-10-31 14:57:51 +00:00
|
|
|
:is-live-content="isLiveContent"
|
|
|
|
:is-live="isLive"
|
2020-09-16 02:07:54 +00:00
|
|
|
:is-upcoming="isUpcoming"
|
2020-10-08 19:01:46 +00:00
|
|
|
:download-links="downloadLinks"
|
2021-05-25 17:39:34 +00:00
|
|
|
:playlist-id="playlistId"
|
2021-06-13 15:31:43 +00:00
|
|
|
:watching-playlist="watchingPlaylist"
|
|
|
|
:get-playlist-index="getPlaylistIndex"
|
|
|
|
:get-playlist-reverse="getPlaylistReverse"
|
|
|
|
:get-playlist-shuffle="getPlaylistShuffle"
|
|
|
|
:get-playlist-loop="getPlaylistLoop"
|
2021-01-13 04:13:36 +00:00
|
|
|
:theatre-possible="theatrePossible"
|
2021-01-14 23:03:23 +00:00
|
|
|
:length-seconds="videoLengthSeconds"
|
2021-02-22 03:07:50 +00:00
|
|
|
:video-thumbnail="thumbnail"
|
2020-06-18 15:47:43 +00:00
|
|
|
class="watchVideo"
|
|
|
|
:class="{ theatreWatchVideo: useTheatreMode }"
|
2021-06-13 15:31:43 +00:00
|
|
|
@pause-player="pausePlayer"
|
2020-06-18 15:47:43 +00:00
|
|
|
/>
|
|
|
|
<watch-video-description
|
|
|
|
v-if="!isLoading"
|
|
|
|
:published="videoPublished"
|
|
|
|
:description="videoDescription"
|
|
|
|
:description-html="videoDescriptionHtml"
|
|
|
|
class="watchVideo"
|
|
|
|
:class="{ theatreWatchVideo: useTheatreMode }"
|
2020-10-04 18:42:46 +00:00
|
|
|
@timestamp-event="changeTimestamp"
|
2020-06-18 15:47:43 +00:00
|
|
|
/>
|
|
|
|
<watch-video-comments
|
|
|
|
v-if="!isLoading && !isLive"
|
|
|
|
:id="videoId"
|
|
|
|
class="watchVideo"
|
|
|
|
:class="{ theatreWatchVideo: useTheatreMode }"
|
2020-10-19 14:01:24 +00:00
|
|
|
:channel-thumbnail="channelThumbnail"
|
2021-11-06 02:11:21 +00:00
|
|
|
:channel-name="channelName"
|
2020-10-04 18:42:46 +00:00
|
|
|
@timestamp-event="changeTimestamp"
|
2020-06-18 15:47:43 +00:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div class="sidebarArea">
|
|
|
|
<watch-video-live-chat
|
|
|
|
v-if="!isLoading && isLive"
|
|
|
|
:video-id="videoId"
|
|
|
|
:channel-name="channelName"
|
|
|
|
class="watchVideoSideBar watchVideoPlaylist"
|
|
|
|
:class="{ theatrePlaylist: useTheatreMode }"
|
|
|
|
/>
|
|
|
|
<watch-video-playlist
|
|
|
|
v-if="watchingPlaylist"
|
|
|
|
v-show="!isLoading"
|
2020-06-19 20:20:06 +00:00
|
|
|
ref="watchVideoPlaylist"
|
2020-06-18 15:47:43 +00:00
|
|
|
:playlist-id="playlistId"
|
|
|
|
:video-id="videoId"
|
|
|
|
class="watchVideoSideBar watchVideoPlaylist"
|
|
|
|
:class="{ theatrePlaylist: useTheatreMode }"
|
2021-06-13 15:31:43 +00:00
|
|
|
@pause-player="pausePlayer"
|
2020-06-18 15:47:43 +00:00
|
|
|
/>
|
|
|
|
<watch-video-recommendations
|
|
|
|
v-if="!isLoading"
|
2020-09-09 22:58:35 +00:00
|
|
|
:show-autoplay="!watchingPlaylist"
|
2020-06-18 15:47:43 +00:00
|
|
|
:data="recommendedVideos"
|
|
|
|
class="watchVideoSideBar watchVideoRecommendations"
|
|
|
|
:class="{
|
|
|
|
theatreRecommendations: useTheatreMode,
|
|
|
|
watchVideoRecommendationsLowerCard: watchingPlaylist || isLive,
|
|
|
|
watchVideoRecommendationsNoCard: !watchingPlaylist || !isLive
|
|
|
|
}"
|
|
|
|
/>
|
|
|
|
</div>
|
2020-02-16 18:30:00 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script src="./Watch.js" />
|
2020-06-18 15:47:43 +00:00
|
|
|
<style scoped src="./Watch.sass" lang="sass" />
|