From 2f4c784a92ac50cacef07f4925e284b4041422f4 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 12 Jun 2019 12:40:24 +0200 Subject: [PATCH] Add params to share modal --- client/src/app/search/search.component.html | 2 +- client/src/app/search/search.component.scss | 12 -- client/src/app/search/search.module.ts | 5 +- client/src/app/shared/shared.module.ts | 11 +- .../modal/video-share.component.html | 190 ++++++++++++++---- .../modal/video-share.component.scss | 68 ++++++- .../modal/video-share.component.ts | 91 ++++++++- .../+video-watch/video-watch.component.html | 2 +- .../+video-watch/video-watch.component.ts | 5 +- .../assets/player/peertube-player-manager.ts | 2 +- client/src/assets/player/utils.ts | 51 ++++- .../peertube-link-button.ts | 2 +- client/src/sass/application.scss | 118 +---------- client/src/sass/bootstrap.scss | 138 +++++++++++++ client/src/sass/include/_mixins.scss | 18 +- 15 files changed, 505 insertions(+), 210 deletions(-) create mode 100644 client/src/sass/bootstrap.scss diff --git a/client/src/app/search/search.component.html b/client/src/app/search/search.component.html index 0a9f78cb2..055f64cc8 100644 --- a/client/src/app/search/search.component.html +++ b/client/src/app/search/search.component.html @@ -20,7 +20,7 @@ -
+
diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss index 4e3ce1c96..3343a276d 100644 --- a/client/src/app/search/search.component.scss +++ b/client/src/app/search/search.component.scss @@ -35,18 +35,6 @@ } } } - - .results-filter { - // Animation when we show/hide the filters - transition: max-height 0.3s; - display: block !important; - overflow: hidden !important; - max-height: 0; - - &.show { - max-height: 1500px; - } - } } .entry { diff --git a/client/src/app/search/search.module.ts b/client/src/app/search/search.module.ts index 0411fbe24..8b791621e 100644 --- a/client/src/app/search/search.module.ts +++ b/client/src/app/search/search.module.ts @@ -4,14 +4,11 @@ import { SearchComponent } from '@app/search/search.component' import { SearchService } from '@app/search/search.service' import { SearchRoutingModule } from '@app/search/search-routing.module' import { SearchFiltersComponent } from '@app/search/search-filters.component' -import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap' @NgModule({ imports: [ SearchRoutingModule, - SharedModule, - - NgbCollapseModule + SharedModule ], declarations: [ diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index 1d49c7bc8..eb57a2fff 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -53,7 +53,14 @@ import { VideoCaptionService } from '@app/shared/video-caption' import { PeertubeCheckboxComponent } from '@app/shared/forms/peertube-checkbox.component' import { VideoImportService } from '@app/shared/video-import/video-import.service' import { ActionDropdownComponent } from '@app/shared/buttons/action-dropdown.component' -import { NgbDropdownModule, NgbModalModule, NgbPopoverModule, NgbTabsetModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap' +import { + NgbCollapseModule, + NgbDropdownModule, + NgbModalModule, + NgbPopoverModule, + NgbTabsetModule, + NgbTooltipModule +} from '@ng-bootstrap/ng-bootstrap' import { RemoteSubscribeComponent, SubscribeButtonComponent, UserSubscriptionService } from '@app/shared/user-subscription' import { InstanceFeaturesTableComponent } from '@app/shared/instance/instance-features-table.component' import { OverviewService } from '@app/shared/overview' @@ -100,6 +107,7 @@ import { FollowService } from '@app/shared/instance/follow.service' NgbPopoverModule, NgbTabsetModule, NgbTooltipModule, + NgbCollapseModule, ClipboardModule, @@ -170,6 +178,7 @@ import { FollowService } from '@app/shared/instance/follow.service' NgbPopoverModule, NgbTabsetModule, NgbTooltipModule, + NgbCollapseModule, ClipboardModule, diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.html b/client/src/app/videos/+video-watch/modal/video-share.component.html index 955b2b80c..82e59d04d 100644 --- a/client/src/app/videos/+video-watch/modal/video-share.component.html +++ b/client/src/app/videos/+video-watch/modal/video-share.component.html @@ -5,53 +5,167 @@
+ -
- + + - - -
+
+
+ +
+ +
+
+
-
- -
- -
- + + + + + +
+ +
+ + + + + +
+
+ +
+ +
+
+ +
+ The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites). +
+
+ + + + + +
+
+
+ + + + +
+ +
+ + +
+ +
-
-
- - -
+
-
- -
- -
- -
+ + + + + More customization + + + + + + + + Less customization + +
-
-
- The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites). +
+
+
+ + + + +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
+ +
+ +
+ +
+ +
+ +
+ +
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.scss b/client/src/app/videos/+video-watch/modal/video-share.component.scss index 472a45920..c48abf9e0 100644 --- a/client/src/app/videos/+video-watch/modal/video-share.component.scss +++ b/client/src/app/videos/+video-watch/modal/video-share.component.scss @@ -1,5 +1,9 @@ -@import '~bootstrap/scss/functions'; -@import '~bootstrap/scss/variables'; +@import '_mixins'; +@import '_variables'; + +.peertube-select-container { + @include peertube-select-container(200px); +} .action-button-cancel { margin-right: 0 !important; @@ -9,13 +13,65 @@ text-align: center; } -.start-at { +.tab-content { + margin-top: 30px; display: flex; justify-content: center; - margin-top: 10px; align-items: center; + flex-direction: column; +} - my-timestamp-input { - margin-left: 10px; +.alert { + margin-top: 20px; +} + +input.readonly { + font-size: 15px; +} + +.filters { + margin-top: 30px; + padding-top: 30px; + border-top: 1px solid $separator-border-color; + + .advanced-filters-button { + display: flex; + justify-content: center; + align-items: center; + margin-top: 30px; + font-size: 16px; + font-weight: $font-semibold; + cursor: pointer; + + .glyphicon { + margin-right: 5px; + } + } + + .form-group { + margin-bottom: 0; + height: 34px; + display: flex; + align-items: center; + } + + .video-caption-block { + display: flex; + align-items: center; + + .peertube-select-container { + margin-left: 10px; + } + } + + .start-at, + .stop-at { + width: 300px; + display: flex; + align-items: center; + + my-timestamp-input { + margin-left: 10px; + } } } diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.ts b/client/src/app/videos/+video-watch/modal/video-share.component.ts index 6565d7f88..eaaf6b902 100644 --- a/client/src/app/videos/+video-watch/modal/video-share.component.ts +++ b/client/src/app/videos/+video-watch/modal/video-share.component.ts @@ -3,8 +3,26 @@ import { Notifier } from '@app/core' import { VideoDetails } from '../../../shared/video/video-details.model' import { buildVideoEmbed, buildVideoLink } from '../../../../assets/player/utils' import { I18n } from '@ngx-translate/i18n-polyfill' -import { NgbModal } from '@ng-bootstrap/ng-bootstrap' -import { durationToString } from '@app/shared/misc/utils' +import { NgbModal, NgbTabChangeEvent } from '@ng-bootstrap/ng-bootstrap' +import { VideoCaption } from '@shared/models' + +type Customizations = { + startAtCheckbox: boolean + startAt: number + + stopAtCheckbox: boolean + stopAt: number + + subtitleCheckbox: boolean + subtitle: string + + loop: boolean + autoplay: boolean + muted: boolean + title: boolean + warningTitle: boolean + controls: boolean +} @Component({ selector: 'my-video-share', @@ -15,9 +33,13 @@ export class VideoShareComponent { @ViewChild('modal') modal: ElementRef @Input() video: VideoDetails = null + @Input() videoCaptions: VideoCaption[] = [] - currentVideoTimestamp: number - startAtCheckbox = false + activeId: 'url' | 'qrcode' | 'embed' + customizations: Customizations + isAdvancedCustomizationCollapsed = true + + private currentVideoTimestamp: number constructor ( private modalService: NgbModal, @@ -26,19 +48,47 @@ export class VideoShareComponent { ) { } show (currentVideoTimestamp?: number) { - this.currentVideoTimestamp = currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0 + this.currentVideoTimestamp = currentVideoTimestamp + + let subtitle: string + if (this.videoCaptions.length !== 0) { + subtitle = this.videoCaptions[0].language.id + } + + this.customizations = { + startAtCheckbox: false, + startAt: currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0, + + stopAtCheckbox: false, + stopAt: this.video.duration, + + subtitleCheckbox: false, + subtitle, + + loop: false, + autoplay: false, + muted: false, + + // Embed options + title: true, + warningTitle: true, + controls: true + } this.modalService.open(this.modal) } getVideoIframeCode () { - const embedUrl = buildVideoLink(this.getVideoTimestampIfEnabled(), this.video.embedUrl) + const options = this.getOptions(this.video.embedUrl) + const embedUrl = buildVideoLink(options) return buildVideoEmbed(embedUrl) } getVideoUrl () { - return buildVideoLink(this.getVideoTimestampIfEnabled()) + const options = this.getOptions() + + return buildVideoLink(options) } notSecure () { @@ -49,9 +99,30 @@ export class VideoShareComponent { this.notifier.success(this.i18n('Copied')) } - private getVideoTimestampIfEnabled () { - if (this.startAtCheckbox === true) return this.currentVideoTimestamp + onTabChange (event: NgbTabChangeEvent) { + this.activeId = event.nextId as any + } - return undefined + isInEmbedTab () { + return this.activeId === 'embed' + } + + private getOptions (baseUrl?: string) { + return { + baseUrl, + + startTime: this.customizations.startAtCheckbox ? this.customizations.startAt : undefined, + stopTime: this.customizations.stopAtCheckbox ? this.customizations.stopAt : undefined, + + subtitle: this.customizations.subtitleCheckbox ? this.customizations.subtitle : undefined, + + loop: this.customizations.loop, + autoplay: this.customizations.autoplay, + muted: this.customizations.muted, + + title: this.customizations.title, + warningTitle: this.customizations.warningTitle, + controls: this.customizations.controls + } } } 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 2e39b9c6b..6a02f630a 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -219,5 +219,5 @@ - + 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 29c472a42..3f1a98f89 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -50,9 +50,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy { playerElement: HTMLVideoElement theaterEnabled = false userRating: UserVideoRateType = null - video: VideoDetails = null descriptionLoading = false + video: VideoDetails = null + videoCaptions: VideoCaption[] = [] + playlist: VideoPlaylist = null completeDescriptionShown = false @@ -339,6 +341,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { urlOptions: CustomizationOptions & { playerMode: PlayerMode } ) { this.video = video + this.videoCaptions = videoCaptions // Re init attributes this.descriptionLoading = false diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts index 8f6237326..083c621d2 100644 --- a/client/src/assets/player/peertube-player-manager.ts +++ b/client/src/assets/player/peertube-player-manager.ts @@ -446,7 +446,7 @@ export class PeertubePlayerManager { label: player.localize('Copy the video URL at the current time'), listener: function () { const player = this as videojs.Player - copyToClipboard(buildVideoLink(player.currentTime())) + copyToClipboard(buildVideoLink({ startTime: player.currentTime() })) } }, { diff --git a/client/src/assets/player/utils.ts b/client/src/assets/player/utils.ts index 366689962..777abb568 100644 --- a/client/src/assets/player/utils.ts +++ b/client/src/assets/player/utils.ts @@ -27,18 +27,55 @@ function isMobile () { return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) } -function buildVideoLink (time?: number, url?: string) { - if (!url) url = window.location.origin + window.location.pathname.replace('/embed/', '/watch/') +function buildVideoLink (options: { + baseUrl?: string, - if (time) { - const timeInt = Math.floor(time) + startTime?: number, + stopTime?: number, - const params = new URLSearchParams(window.location.search) - params.set('start', secondsToTime(timeInt)) + subtitle?: string, - return url + '?' + params.toString() + loop?: boolean, + autoplay?: boolean, + muted?: boolean, + + // Embed options + title?: boolean, + warningTitle?: boolean, + controls?: boolean +} = {}) { + const { baseUrl } = options + + const url = baseUrl + ? baseUrl + : window.location.origin + window.location.pathname.replace('/embed/', '/watch/') + + const params = new URLSearchParams(window.location.search) + + if (options.startTime) { + const startTimeInt = Math.floor(options.startTime) + params.set('start', secondsToTime(startTimeInt)) } + if (options.stopTime) { + const stopTimeInt = Math.floor(options.stopTime) + params.set('stop', secondsToTime(stopTimeInt)) + } + + if (options.subtitle) params.set('subtitle', options.subtitle) + + if (options.loop === true) params.set('loop', '1') + if (options.autoplay === true) params.set('autoplay', '1') + if (options.muted === true) params.set('muted', '1') + if (options.title === false) params.set('title', '0') + if (options.warningTitle === false) params.set('warningTitle', '0') + if (options.controls === false) params.set('controls', '0') + + let hasParams = false + params.forEach(() => hasParams = true) + + if (hasParams) return url + '?' + params.toString() + return url } diff --git a/client/src/assets/player/videojs-components/peertube-link-button.ts b/client/src/assets/player/videojs-components/peertube-link-button.ts index fed8ea33e..4d0ea37f5 100644 --- a/client/src/assets/player/videojs-components/peertube-link-button.ts +++ b/client/src/assets/player/videojs-components/peertube-link-button.ts @@ -16,7 +16,7 @@ class PeerTubeLinkButton extends Button { } updateHref () { - this.el().setAttribute('href', buildVideoLink(this.player().currentTime())) + this.el().setAttribute('href', buildVideoLink({ startTime: this.player().currentTime() })) } handleClick () { diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index d84766240..c64a8ebf8 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -12,6 +12,7 @@ $assets-path: '../assets/'; @import './player/index'; @import './loading-bar'; +@import './bootstrap'; @import './primeng-custom'; [hidden] { @@ -181,128 +182,11 @@ label { font-weight: bold; } -// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d -.glyphicon-refresh-animate { - animation: spin .7s infinite linear; -} - @keyframes spin { from { transform: scale(1) rotate(0deg);} to { transform: scale(1) rotate(360deg);} } -// Bootstrap customizations -.dropdown-menu { - border-radius: 3px; - box-shadow: 0 3px 6px; - font-size: 15px; - - .dropdown-item { - padding: 3px 15px; - - &:active { - color: #000 !important; - } - } - - button { - @include disable-default-a-behaviour; - } - - a { - @include disable-default-a-behaviour; - color: #000 !important; - } -} - -.modal { - .modal-content { - background-color: var(--mainBackgroundColor); - } - - .modal-header { - border-bottom: none; - margin-bottom: 5px; - - .modal-title { - font-size: 20px; - font-weight: $font-semibold; - } - - my-global-icon { - @include icon(24px); - - position: relative; - top: 3px; - float: right; - - margin: 0; - padding: 0; - opacity: 1; - } - } - - .inputs { - margin-bottom: 0; - text-align: right; - - .action-button-cancel { - @include peertube-button; - @include grey-button; - - display: inline-block; - margin-right: 10px; - } - - .action-button-submit { - @include peertube-button; - @include orange-button; - } - } -} - -// Nav customizations -.nav .nav-link { - display: flex !important; - align-items: center; - height: 30px !important; - padding: 10px 15px !important; -} - -.nav.nav-pills { - font-size: 16px !important; - - .nav-link.active { - font-weight: $font-semibold !important; - } - - a { - @include disable-default-a-behaviour; - - color: var(--mainForegroundColor); - } -} - -ngb-tabset.bootstrap { - - .nav-link { - &, & a { - @include disable-default-a-behaviour; - - color: var(--mainForegroundColor) !important; - } - } - - .nav-pills .nav-link.active { - color: #000 !important; - } -} - -.nav-tabs .nav-link.active { - background-color: var(--mainBackgroundColor) !important; - border-bottom: none; -} - .orange-button { @include peertube-button; @include orange-button; diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss new file mode 100644 index 000000000..12e73278a --- /dev/null +++ b/client/src/sass/bootstrap.scss @@ -0,0 +1,138 @@ +$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; +@import '_bootstrap'; + +@import '_variables'; +@import '_mixins'; + +// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d +.glyphicon-refresh-animate { + animation: spin .7s infinite linear; +} + +@keyframes spin { + from { transform: scale(1) rotate(0deg);} + to { transform: scale(1) rotate(360deg);} +} + +.dropdown-menu { + border-radius: 3px; + box-shadow: 0 3px 6px; + font-size: 15px; + + .dropdown-item { + padding: 3px 15px; + + &:active { + color: #000 !important; + } + } + + button { + @include disable-default-a-behaviour; + } + + a { + @include disable-default-a-behaviour; + color: #000 !important; + } +} + +.modal { + .modal-content { + background-color: var(--mainBackgroundColor); + } + + .modal-header { + border-bottom: none; + margin-bottom: 5px; + + .modal-title { + font-size: 20px; + font-weight: $font-semibold; + } + + my-global-icon { + @include icon(24px); + + position: relative; + top: 3px; + float: right; + + margin: 0; + padding: 0; + opacity: 1; + } + } + + .inputs { + margin-bottom: 0; + text-align: right; + + .action-button-cancel { + @include peertube-button; + @include grey-button; + + display: inline-block; + margin-right: 10px; + } + + .action-button-submit { + @include peertube-button; + @include orange-button; + } + } +} + +// Nav customizations +.nav .nav-link { + display: flex !important; + align-items: center; + height: 30px !important; + padding: 10px 15px !important; +} + +.nav.nav-pills { + font-size: 16px !important; + + .nav-link.active { + font-weight: $font-semibold !important; + } + + a { + @include disable-default-a-behaviour; + + color: var(--mainForegroundColor); + } +} + +ngb-tabset.bootstrap { + + .nav-link { + &, & a { + @include disable-default-a-behaviour; + + color: var(--mainForegroundColor) !important; + } + } + + .nav-pills .nav-link.active { + color: #000 !important; + } +} + +.nav-tabs .nav-link.active { + background-color: var(--mainBackgroundColor) !important; + border-bottom: none; +} + +.collapse-transition { + // Animation when we show/hide the filters + transition: max-height 0.3s; + display: block !important; + overflow: hidden !important; + max-height: 0; + + &.show { + max-height: 1500px; + } +} diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index d4a2269a1..f608e9299 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -235,6 +235,14 @@ position: relative; font-size: 15px; + &.disabled { + background-color: #E5E5E5; + + select { + cursor: default; + } + } + @media screen and (max-width: $width) { width: 100%; } @@ -282,16 +290,6 @@ } } -@mixin peertube-select-disabled-container ($width) { - @include peertube-select-container($width); - - background-color: #E5E5E5; - - select { - cursor: default; - } -} - // Thanks: https://codepen.io/triss90/pen/XNEdRe/ @mixin peertube-radio-container { input[type="radio"] {