From 9a18a6252071cf21b18f82a24bb63078abb75bc1 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 18 Mar 2019 10:26:53 +0100 Subject: Handle theater mode for playlists --- .../videos/+video-watch/video-watch.component.html | 290 ++++++++++----------- .../videos/+video-watch/video-watch.component.scss | 101 +++++-- .../videos/+video-watch/video-watch.component.ts | 7 + 3 files changed, 225 insertions(+), 173 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html index 3df5b7b19..91f77cbf3 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -1,4 +1,4 @@ -
+
@@ -59,200 +59,198 @@
-
-
-
-
-
+
+
+
+
+

{{ video.name }}

+
+ Published {{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views +
+
+ +
+

{{ video.name }}

+
Published {{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
-
-
-

{{ video.name }}

+
+
+
+ +
-
- Published {{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views +
+
-
-
-
-
- -
+
+ + Support +
-
- -
+
+ + Share +
-
- - Support +
+
+ + Save
-
- - Share +
+
+
-
-
- - Save -
- -
- -
+
+
+
-
-
- -
+
+
-
- -
+
+
+
-
- - {{ video.channel.displayName }} - - Video channel avatar - +
+ + {{ video.channel.displayName }} - -
+ Video channel avatar + -
- - By {{ video.byAccount }} - Account avatar - -
+
+
+ + By {{ video.byAccount }} + Account avatar + +
-
-
+
-
- Show more - - -
+
+
-
- Show less - -
+
+ Show more + +
-
-
- Privacy - {{ video.privacy.label }} -
+
+ Show less + +
+
-
- Originally published - {{ video.originallyPublishedAt | date: 'dd MMMM yyyy' }} -
+
+
+ Privacy + {{ video.privacy.label }} +
-
- Category - {{ video.category.label }} - {{ video.category.label }} -
+
+ Originally published + {{ video.originallyPublishedAt | date: 'dd MMMM yyyy' }} +
-
- Licence - {{ video.licence.label }} - {{ video.licence.label }} -
+
+ Category + {{ video.category.label }} + {{ video.category.label }} +
-
- Language - {{ video.language.label }} - {{ video.language.label }} -
+
+ Licence + {{ video.licence.label }} + {{ video.licence.label }} +
-
- Tags - {{ tag }} -
+
+ Language + {{ video.language.label }} + {{ video.language.label }}
- +
+ Tags + {{ tag }} +
- +
+ +
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss index 281b9240b..11406e887 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -4,9 +4,43 @@ @import '_miniature'; $other-videos-width: 260px; +$player-factor: 1.7; // 16/9 -.root-row { - flex-direction: column; +@function getPlayerHeight($width){ + @return calc(#{$width} / #{$player-factor}) +} + +@function getPlayerWidth($height){ + @return calc(#{$height} * #{$player-factor}) +} + +@mixin playlist-below-player { + width: 100%; + border-bottom: 1px solid $separator-border-color; +} + +.root { + margin: 0 -15px; + + &.theater-enabled #video-wrapper { + flex-direction: column; + justify-content: center; + + #videojs-wrapper { + width: 100%; + } + + /deep/ .video-js { + $height: calc(100vh - #{$header-height} - #{$theater-bottom-space}); + + height: $height; + width: 100%; + } + + .playlist { + @include playlist-below-player; + } + } } .blacklisted-label { @@ -17,7 +51,6 @@ $other-videos-width: 260px; background-color: #000; display: flex; justify-content: center; - flex-grow: 1; .remote-server-down { color: #fff; @@ -93,14 +126,9 @@ $other-videos-width: 260px; } /deep/ .video-js { - width: calc(66vh * 1.77); + width: getPlayerWidth(66vh); height: 66vh; - &.vjs-theater-enabled { - height: calc(100vh - #{$header-height} - #{$theater-bottom-space}); - width: 100%; - } - // VideoJS create an inner video player video { outline: 0; @@ -112,7 +140,7 @@ $other-videos-width: 260px; .remote-server-down, /deep/ .video-js { width: 100vw; - height: calc(100vw / 1.7); // 16/9 + height: getPlayerHeight(100vw) } } } @@ -131,6 +159,7 @@ $other-videos-width: 260px; } .video-bottom { + display: flex; margin-top: 40px; .video-info { @@ -366,7 +395,7 @@ $other-videos-width: 260px; /deep/ .other-videos { padding-left: 15px; - width: $other-videos-width; + flex-basis: $other-videos-width; .title-page { margin-top: 0 !important; @@ -374,14 +403,11 @@ $other-videos-width: 260px; .video-miniature { display: flex; + width: $other-videos-width; height: 100%; margin-bottom: 20px; flex-wrap: wrap; - .video-miniature-information { - flex-grow: 1; - } - .video-thumbnail { margin-right: 10px } @@ -455,12 +481,6 @@ my-video-comments { } } -@media screen and (min-width: map-get($grid-breakpoints, xl)) { - .video-bottom .video-info { - max-width: calc(100% - #{$other-videos-width}); - } -} - @media screen and (max-width: 1600px) { .video-bottom .video-info .video-attributes .video-attribute { margin-bottom: 5px; @@ -478,6 +498,37 @@ my-video-comments { } } +@media screen and (max-width: 1100px) { + .video-bottom { + flex-direction: column; + + /deep/ .other-videos { + padding-left: 0 !important; + + /deep/ .video-miniature { + flex-direction: row; + width: auto; + } + } + } +} + +@media screen and (max-width: 900px) { + #video-wrapper { + flex-direction: column; + justify-content: center; + + #videojs-wrapper { + display: flex; + justify-content: center; + } + + .playlist { + @include playlist-below-player; + } + } +} + @media screen and (max-width: 600px) { .video-bottom { margin: 20px 0 0 0; @@ -495,12 +546,8 @@ my-video-comments { } } - /deep/ .other-videos { - padding-left: 0 !important; - - /deep/ .video-miniature { - flex-direction: column; - } + /deep/ .other-videos .video-miniature { + flex-direction: column; } .privacy-concerns { diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts index adb728aba..cedbbf985 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -50,6 +50,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { player: any playerElement: HTMLVideoElement + theaterEnabled = false userRating: UserVideoRateType = null video: VideoDetails = null descriptionLoading = false @@ -572,6 +573,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.zone.runOutsideAngular(async () => { this.player = await PeertubePlayerManager.initialize(mode, options) + this.theaterEnabled = this.player.theaterEnabled + this.player.on('customError', ({ err }: { err: any }) => this.handleError(err)) this.player.on('timeupdate', () => { @@ -589,6 +592,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.zone.run(() => this.navigateToNextPlaylistVideo()) } }) + + this.player.on('theaterChange', (_: any, enabled: boolean) => { + this.zone.run(() => this.theaterEnabled = enabled) + }) }) this.setVideoDescriptionHTML() -- cgit v1.2.3