Redesign watch component
This commit is contained in:
Cadence Ember
parent
0fc5a40ce9
commit
104131697d
|
|
@ -1,9 +1,7 @@
|
|||
.relative {
|
||||
position: relative;
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.ftVideoPlayer {
|
||||
width: 85%;
|
||||
max-height: 50vh;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,123 +0,0 @@
|
|||
.watchVideo {
|
||||
width: 65%;
|
||||
float: left;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.theatreWatchVideo {
|
||||
float: none;
|
||||
margin: 0 auto;
|
||||
width: 85%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.videoPlayer {
|
||||
width: calc(65% + 30px);
|
||||
float: left;
|
||||
margin-top: 0px;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.theatrePlayer {
|
||||
width: 100%;
|
||||
float: none;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.watchVideoSideBar {
|
||||
width: 27%;
|
||||
max-width: 425px;
|
||||
float: right;
|
||||
margin-bottom: 10px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.watchVideoPlaylist {
|
||||
right: 10px;
|
||||
top: 70px;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.theatrePlaylist {
|
||||
float: none;
|
||||
margin: 0 auto;
|
||||
width: 85%;
|
||||
height: 500px;
|
||||
margin-bottom: 10px;
|
||||
max-width: none;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.watchVideoRecommendations {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.watchVideoRecommendationsNoCard {
|
||||
top: 70px;
|
||||
}
|
||||
|
||||
.watchVideoRecommendationsLowerCard {
|
||||
top: 600px;
|
||||
}
|
||||
|
||||
.theatreRecommendations {
|
||||
float: none;
|
||||
margin: 0 auto;
|
||||
width: 85%;
|
||||
max-width: none;
|
||||
position: static;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1500px) {
|
||||
.watchVideo {
|
||||
width: 63%;
|
||||
}
|
||||
|
||||
.videoPlayer {
|
||||
width: calc(63% + 30px);
|
||||
}
|
||||
|
||||
.theatreWatchVideo {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.theatrePlayer {
|
||||
width: calc(85% + 30px);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1350px) {
|
||||
.watchVideo {
|
||||
float: none;
|
||||
margin: 0 auto;
|
||||
width: 85%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.videoPlayer {
|
||||
float: none;
|
||||
margin: 0 auto;
|
||||
width: calc(85% + 30px);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.watchVideoPlaylist {
|
||||
float: none;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 10px;
|
||||
width: 85%;
|
||||
max-width: none;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.watchVideoRecommendations {
|
||||
float: none;
|
||||
margin: 0 auto;
|
||||
width: 85%;
|
||||
max-width: none;
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
=dual-column-template
|
||||
grid-template: "video video sidebar" 0fr "info info sidebar" auto "info info sidebar" auto / 1fr 1fr 1fr
|
||||
|
||||
=theatre-mode-template
|
||||
grid-template: "video video video" auto "info info sidebar" auto "info info sidebar" auto / 1fr 1fr 1fr
|
||||
|
||||
=single-column-template
|
||||
grid-template: "video" auto "info" auto "sidebar" auto / auto
|
||||
|
||||
.videoLayout
|
||||
display: grid
|
||||
align-items: start
|
||||
+dual-column-template
|
||||
|
||||
@media only screen and (max-width: 1350px)
|
||||
+theatre-mode-template
|
||||
|
||||
@media only screen and (max-width: 900px)
|
||||
+single-column-template
|
||||
|
||||
&.useTheatreMode
|
||||
+theatre-mode-template
|
||||
|
||||
&.isLoading
|
||||
+single-column-template
|
||||
|
||||
.videoArea
|
||||
grid-area: video
|
||||
|
||||
.videoAreaMargin
|
||||
margin: 0px 8px 16px
|
||||
|
||||
.videoPlayer
|
||||
grid-column: 1
|
||||
max-width: calc(80vh * 1.78)
|
||||
margin: 0 auto
|
||||
|
||||
.watchVideo
|
||||
margin: 0px 8px 16px
|
||||
grid-column: 1
|
||||
|
||||
.infoArea
|
||||
grid-area: info
|
||||
|
||||
.sidebarArea
|
||||
grid-area: sidebar
|
||||
min-width: 380px
|
||||
|
||||
.watchVideoPlaylist, .watchVideoSidebar, .theatrePlaylist
|
||||
height: 500px
|
||||
margin: 0 8px 16px
|
||||
|
||||
.watchVideoRecommendations, .theatreRecommendations
|
||||
margin: 0 8px 16px
|
||||
|
|
@ -1,81 +1,95 @@
|
|||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="videoLayout"
|
||||
:class="{
|
||||
isLoading,
|
||||
useTheatreMode
|
||||
}"
|
||||
>
|
||||
<ft-loader
|
||||
v-if="isLoading"
|
||||
:fullscreen="true"
|
||||
/>
|
||||
<ft-video-player
|
||||
v-if="!isLoading && !hidePlayer"
|
||||
:dash-src="dashSrc"
|
||||
:source-list="activeSourceList"
|
||||
:caption-list="captionSourceList"
|
||||
:storyboard-src="videoStoryboardSrc"
|
||||
:format="activeFormat"
|
||||
:thumbnail="thumbnail"
|
||||
class="videoPlayer"
|
||||
:class="{ theatrePlayer: useTheatreMode }"
|
||||
ref="videoPlayer"
|
||||
@ended="handleVideoEnded"
|
||||
@error="handleVideoError"
|
||||
/>
|
||||
<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"
|
||||
@theatreMode="toggleTheatreMode"
|
||||
class="watchVideo"
|
||||
:class="{ theatreWatchVideo: useTheatreMode }"
|
||||
/>
|
||||
<watch-video-description
|
||||
v-if="!isLoading"
|
||||
:published="videoPublished"
|
||||
:description="videoDescription"
|
||||
:description-html="videoDescriptionHtml"
|
||||
class="watchVideo"
|
||||
:class="{ theatreWatchVideo: useTheatreMode }"
|
||||
/>
|
||||
<watch-video-comments
|
||||
v-if="!isLoading && !isLive"
|
||||
:id="videoId"
|
||||
class="watchVideo"
|
||||
:class="{ theatreWatchVideo: useTheatreMode }"
|
||||
/>
|
||||
<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"
|
||||
:playlist-id="playlistId"
|
||||
:video-id="videoId"
|
||||
ref="watchVideoPlaylist"
|
||||
class="watchVideoSideBar watchVideoPlaylist"
|
||||
:class="{ theatrePlaylist: useTheatreMode }"
|
||||
/>
|
||||
<watch-video-recommendations
|
||||
v-if="!isLoading"
|
||||
:data="recommendedVideos"
|
||||
class="watchVideoSideBar watchVideoRecommendations"
|
||||
:class="{
|
||||
theatreRecommendations: useTheatreMode,
|
||||
watchVideoRecommendationsLowerCard: watchingPlaylist || isLive,
|
||||
watchVideoRecommendationsNoCard: !watchingPlaylist || !isLive
|
||||
}"
|
||||
/>
|
||||
<div class="videoArea">
|
||||
<div class="videoAreaMargin">
|
||||
<ft-video-player
|
||||
v-if="!isLoading && !hidePlayer"
|
||||
:dash-src="dashSrc"
|
||||
:source-list="activeSourceList"
|
||||
:caption-list="captionSourceList"
|
||||
:storyboard-src="videoStoryboardSrc"
|
||||
:format="activeFormat"
|
||||
:thumbnail="thumbnail"
|
||||
class="videoPlayer"
|
||||
:class="{ theatrePlayer: useTheatreMode }"
|
||||
ref="videoPlayer"
|
||||
@ended="handleVideoEnded"
|
||||
@error="handleVideoError"
|
||||
/>
|
||||
</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"
|
||||
@theatreMode="toggleTheatreMode"
|
||||
class="watchVideo"
|
||||
:class="{ theatreWatchVideo: useTheatreMode }"
|
||||
/>
|
||||
<watch-video-description
|
||||
v-if="!isLoading"
|
||||
:published="videoPublished"
|
||||
:description="videoDescription"
|
||||
:description-html="videoDescriptionHtml"
|
||||
class="watchVideo"
|
||||
:class="{ theatreWatchVideo: useTheatreMode }"
|
||||
/>
|
||||
<watch-video-comments
|
||||
v-if="!isLoading && !isLive"
|
||||
:id="videoId"
|
||||
class="watchVideo"
|
||||
:class="{ theatreWatchVideo: useTheatreMode }"
|
||||
/>
|
||||
</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"
|
||||
:playlist-id="playlistId"
|
||||
:video-id="videoId"
|
||||
ref="watchVideoPlaylist"
|
||||
class="watchVideoSideBar watchVideoPlaylist"
|
||||
:class="{ theatrePlaylist: useTheatreMode }"
|
||||
/>
|
||||
<watch-video-recommendations
|
||||
v-if="!isLoading"
|
||||
:data="recommendedVideos"
|
||||
class="watchVideoSideBar watchVideoRecommendations"
|
||||
:class="{
|
||||
theatreRecommendations: useTheatreMode,
|
||||
watchVideoRecommendationsLowerCard: watchingPlaylist || isLive,
|
||||
watchVideoRecommendationsNoCard: !watchingPlaylist || !isLive
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./Watch.js" />
|
||||
<style scoped src="./Watch.css" />
|
||||
<style scoped src="./Watch.sass" lang="sass" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue