diff --git a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.ts b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.ts
index 681f814f6..89a29dad3 100644
--- a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.ts
@@ -1,20 +1,20 @@
-import { Component, Input, OnChanges, OnInit, ViewChild } from '@angular/core'
+import { NgClass, NgIf, NgStyle } from '@angular/common'
+import { Component, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core'
import { RedirectService, ScreenService } from '@app/core'
-import { UserVideoRateType, VideoCaption, VideoPrivacy } from '@peertube/peertube-models'
-import {
- VideoActionsDisplayType,
- VideoActionsDropdownComponent
-} from '../../../../shared/shared-video-miniature/video-actions-dropdown.component'
-import { VideoAddToPlaylistComponent } from '../../../../shared/shared-video-playlist/video-add-to-playlist.component'
-import { GlobalIconComponent } from '../../../../shared/shared-icons/global-icon.component'
-import { NgbTooltip, NgbDropdown, NgbDropdownToggle, NgbDropdownMenu } from '@ng-bootstrap/ng-bootstrap'
-import { NgIf, NgClass, NgStyle } from '@angular/common'
-import { VideoRateComponent } from './video-rate.component'
import { VideoDetails } from '@app/shared/shared-main/video/video-details.model'
import { VideoShareComponent } from '@app/shared/shared-share-modal/video-share.component'
import { SupportModalComponent } from '@app/shared/shared-support-modal/support-modal.component'
import { VideoDownloadComponent } from '@app/shared/shared-video-miniature/download/video-download.component'
import { VideoPlaylist } from '@app/shared/shared-video-playlist/video-playlist.model'
+import { NgbDropdown, NgbDropdownMenu, NgbDropdownToggle, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { UserVideoRateType, VideoCaption, VideoPrivacy } from '@peertube/peertube-models'
+import { GlobalIconComponent } from '../../../../shared/shared-icons/global-icon.component'
+import {
+ VideoActionsDisplayType,
+ VideoActionsDropdownComponent
+} from '../../../../shared/shared-video-miniature/video-actions-dropdown.component'
+import { VideoAddToPlaylistComponent } from '../../../../shared/shared-video-playlist/video-add-to-playlist.component'
+import { VideoRateComponent } from './video-rate.component'
@Component({
selector: 'my-action-buttons',
@@ -38,7 +38,7 @@ import { VideoPlaylist } from '@app/shared/shared-video-playlist/video-playlist.
VideoShareComponent
]
})
-export class ActionButtonsComponent implements OnInit, OnChanges {
+export class ActionButtonsComponent implements OnChanges {
@ViewChild('videoShareModal') videoShareModal: VideoShareComponent
@ViewChild('supportModal') supportModal: SupportModalComponent
@ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
@@ -51,9 +51,14 @@ export class ActionButtonsComponent implements OnInit, OnChanges {
@Input() isUserLoggedIn: boolean
@Input() isUserOwner: boolean
+ @Input() transcriptionWidgetOpened: boolean
+
@Input() currentTime: number
@Input() currentPlaylistPosition: number
+ @Output() showTranscriptionWidget = new EventEmitter()
+ @Output() hideTranscriptionWidget = new EventEmitter()
+
likesBarTooltipText = ''
tooltipSupport = ''
@@ -70,7 +75,10 @@ export class ActionButtonsComponent implements OnInit, OnChanges {
duplicate: true,
mute: true,
liveInfo: true,
- stats: true
+ stats: true,
+ generateTranscription: true,
+ transcriptionWidget: true,
+ transcoding: true
}
userRating: UserVideoRateType
@@ -80,16 +88,20 @@ export class ActionButtonsComponent implements OnInit, OnChanges {
private redirectService: RedirectService
) { }
- ngOnInit () {
- // Hide the tooltips for unlogged users in mobile view, this adds confusion with the popover
- if (this.isUserLoggedIn || !this.screenService.isInMobileView()) {
- this.tooltipSupport = $localize`Open the modal to support the video uploader`
- this.tooltipSaveToPlaylist = $localize`Save to playlist`
- }
- }
-
ngOnChanges () {
this.setVideoLikesBarTooltipText()
+
+ if (this.isUserLoggedIn) {
+ this.videoActionsOptions.download = true
+
+ // Hide the tooltips for unlogged users in mobile view, this adds confusion with the popover
+ if (!this.screenService.isInMobileView()) {
+ this.tooltipSupport = $localize`Open the modal to support the video uploader`
+ this.tooltipSaveToPlaylist = $localize`Save to playlist`
+ }
+ } else {
+ this.videoActionsOptions.download = false
+ }
}
showDownloadModal () {
diff --git a/client/src/app/+videos/+video-watch/shared/index.ts b/client/src/app/+videos/+video-watch/shared/index.ts
index 069f862e2..8dd804951 100644
--- a/client/src/app/+videos/+video-watch/shared/index.ts
+++ b/client/src/app/+videos/+video-watch/shared/index.ts
@@ -2,6 +2,5 @@ export * from './action-buttons'
export * from './comment'
export * from './information'
export * from './metadata'
-export * from './playlist'
export * from './recommendations'
export * from './timestamp-route-transformer.directive'
diff --git a/client/src/app/+videos/+video-watch/shared/player-widgets/player-widget.component.scss b/client/src/app/+videos/+video-watch/shared/player-widgets/player-widget.component.scss
new file mode 100644
index 000000000..13163d4ee
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/player-widgets/player-widget.component.scss
@@ -0,0 +1,37 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+.widget-root {
+ position: relative;
+ min-width: 200px;
+ width: 25vw;
+ max-width: 470px;
+ height: 66vh;
+ background-color: pvar(--mainBackgroundColor);
+ overflow-y: auto;
+ border-bottom: 1px solid $separator-border-color;
+
+ .widget-header {
+ background-color: pvar(--submenuBackgroundColor);
+ padding: 1rem 2rem;
+ }
+
+ .widget-content-padded {
+ padding: 0 2rem;
+ }
+
+ .widget-title {
+ font-size: 18px;
+ font-weight: $font-semibold;
+
+ .pt-badge {
+ @include margin-left(5px);
+ }
+ }
+
+ .widget-content {
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+ }
+}
+
diff --git a/client/src/app/+videos/+video-watch/shared/player-widgets/video-transcription.component.html b/client/src/app/+videos/+video-watch/shared/player-widgets/video-transcription.component.html
new file mode 100644
index 000000000..81f6bf0bd
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/player-widgets/video-transcription.component.html
@@ -0,0 +1,62 @@
+
diff --git a/client/src/app/+videos/+video-watch/shared/player-widgets/video-transcription.component.scss b/client/src/app/+videos/+video-watch/shared/player-widgets/video-transcription.component.scss
new file mode 100644
index 000000000..c3122dc01
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/player-widgets/video-transcription.component.scss
@@ -0,0 +1,26 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+.segment {
+ &.active,
+ &:hover {
+ background: pvar(--mainBackgroundHoverColor);
+ }
+}
+
+input[type=text] {
+ @include peertube-input-text(100%);
+}
+
+.settings-button my-global-icon {
+ width: 18px;
+ height: 18px;
+}
+
+.settings-panel {
+ position: absolute;
+ width: 100%;
+ padding: 0 1.5rem;
+ left: 0;
+ right: 0;
+}
diff --git a/client/src/app/+videos/+video-watch/shared/player-widgets/video-transcription.component.ts b/client/src/app/+videos/+video-watch/shared/player-widgets/video-transcription.component.ts
new file mode 100644
index 000000000..89f211005
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/player-widgets/video-transcription.component.ts
@@ -0,0 +1,241 @@
+import { NgClass, NgFor, NgIf } from '@angular/common'
+import {
+ Component,
+ ElementRef,
+ EventEmitter,
+ HostListener,
+ Input,
+ OnChanges,
+ OnInit,
+ Output,
+ SimpleChanges,
+ ViewChild
+} from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { Notifier } from '@app/core'
+import { durationToString, isInViewport } from '@app/helpers'
+import { SelectOptionsComponent } from '@app/shared/shared-forms/select/select-options.component'
+import { VideoCaptionService } from '@app/shared/shared-main/video-caption/video-caption.service'
+import { NgbCollapse, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { Video, VideoCaption } from '@peertube/peertube-models'
+import { parse } from '@plussub/srt-vtt-parser'
+import debug from 'debug'
+import { debounceTime, distinctUntilChanged, Subject } from 'rxjs'
+import { SelectOptionsItem } from 'src/types'
+import { GlobalIconComponent } from '../../../../shared/shared-icons/global-icon.component'
+
+const debugLogger = debug('peertube:watch:VideoTranscriptionComponent')
+
+type Segment = {
+ start: number
+ startFormatted: string
+
+ end: number
+
+ text: string
+}
+
+@Component({
+ selector: 'my-video-transcription',
+ templateUrl: './video-transcription.component.html',
+ styleUrls: [ './player-widget.component.scss', './video-transcription.component.scss' ],
+ standalone: true,
+ imports: [
+ NgIf,
+ NgClass,
+ NgbTooltip,
+ GlobalIconComponent,
+ NgFor,
+ NgbCollapse,
+ FormsModule,
+ SelectOptionsComponent
+ ]
+})
+export class VideoTranscriptionComponent implements OnInit, OnChanges {
+ @ViewChild('settingsPanel') settingsPanel: ElementRef
+
+ @Input() video: Video
+ @Input() captions: VideoCaption[]
+ @Input() currentTime: number
+
+ // Output the duration clicked
+ @Output() segmentClicked = new EventEmitter
()
+ @Output() closeTranscription = new EventEmitter()
+
+ currentCaption: VideoCaption
+ segments: Segment[] = []
+ activeSegment: Segment
+
+ search = ''
+
+ currentLanguage: string
+ languagesOptions: SelectOptionsItem[] = []
+
+ isSettingsPanelCollapsed: boolean
+ // true when collapsed has been shown (after the transition)
+ settingsPanelShown: boolean
+
+ private segmentsStore: Segment[] = []
+ private searchSubject = new Subject()
+
+ constructor (
+ private notifier: Notifier,
+ private captionService: VideoCaptionService
+ ) {
+ }
+
+ @HostListener('document:click', [ '$event' ])
+ clickout (event: Event) {
+ if (!this.settingsPanelShown) return
+
+ if (!this.settingsPanel?.nativeElement.contains(event.target)) {
+ this.isSettingsPanelCollapsed = true
+ }
+ }
+
+ ngOnInit () {
+ this.searchSubject.asObservable()
+ .pipe(
+ debounceTime(100),
+ distinctUntilChanged()
+ )
+ .subscribe(search => this.filterSegments(search))
+ }
+
+ ngOnChanges (changes: SimpleChanges) {
+ if (changes['video'] || changes['captions']) {
+ this.load()
+ return
+ }
+
+ if (changes['currentTime']) {
+ this.findActiveSegment()
+ }
+ }
+
+ getSegmentClasses (segment: Segment) {
+ return { active: this.activeSegment === segment, ['segment-' + segment.start]: true }
+ }
+
+ updateCurrentCaption () {
+ this.currentCaption = this.captions.find(c => c.language.id === this.currentLanguage)
+
+ this.parseCurrentCaption()
+ }
+
+ private load () {
+ this.search = ''
+
+ this.segmentsStore = []
+ this.segments = []
+
+ this.activeSegment = undefined
+ this.currentCaption = undefined
+
+ this.isSettingsPanelCollapsed = true
+ this.settingsPanelShown = false
+
+ this.languagesOptions = []
+
+ if (!this.video || !this.captions || this.captions.length === 0) return
+
+ this.currentLanguage = this.captions.some(c => c.language.id === this.video.language.id)
+ ? this.video.language.id
+ : this.captions[0].language.id
+
+ this.languagesOptions = this.captions.map(c => ({
+ id: c.language.id,
+ label: c.automaticallyGenerated
+ ? $localize`${c.language.label} (automatically generated)`
+ : c.language.label
+ }))
+
+ this.updateCurrentCaption()
+ }
+
+ private parseCurrentCaption () {
+ this.captionService.getCaptionContent({ captionPath: this.currentCaption.captionPath })
+ .subscribe({
+ next: content => {
+ try {
+ const entries = parse(content).entries
+
+ this.segmentsStore = entries.map(({ from, to, text }) => {
+ const start = Math.ceil(from / 1000)
+ const end = Math.ceil(to / 1000)
+
+ return {
+ start,
+ startFormatted: durationToString(start),
+ end,
+ text
+ }
+ })
+
+ this.segments = this.segmentsStore
+ } catch (err) {
+ this.notifier.error($localize`Cannot load transcript: ${err.message}`)
+ }
+ },
+
+ error: err => this.notifier.error(err.message)
+ })
+ }
+
+ // ---------------------------------------------------------------------------
+
+ onSearchChange (event: Event) {
+ const target = event.target as HTMLInputElement
+
+ this.searchSubject.next(target.value)
+ }
+
+ onSegmentClick (event: Event, segment: Segment) {
+ event.preventDefault()
+
+ this.segmentClicked.emit(segment.start)
+ }
+
+ // ---------------------------------------------------------------------------
+
+ private filterSegments (search: string) {
+ this.search = search
+
+ const searchLowercase = search.toLocaleLowerCase()
+
+ this.segments = this.segmentsStore.filter(s => {
+ return s.text.toLocaleLowerCase().includes(searchLowercase)
+ })
+ }
+
+ private findActiveSegment () {
+ const lastActiveSegment = this.activeSegment
+ this.activeSegment = undefined
+
+ if (isNaN(this.currentTime)) return
+
+ for (let i = this.segmentsStore.length - 1; i >= 0; i--) {
+ const current = this.segmentsStore[i]
+
+ if (current.start < this.currentTime) {
+ this.activeSegment = current
+ break
+ }
+ }
+
+ if (lastActiveSegment !== this.activeSegment) {
+ setTimeout(() => {
+ const element = document.querySelector('.segment-' + this.activeSegment.start)
+ if (!element) return // Can happen with a search
+
+ const container = document.querySelector('.widget-root')
+
+ if (isInViewport(element, container)) return
+
+ container.scrollTop = element.offsetTop
+
+ debugLogger(`Set transcription segment ${this.activeSegment.start} in viewport`)
+ })
+ }
+ }
+}
diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html b/client/src/app/+videos/+video-watch/shared/player-widgets/video-watch-playlist.component.html
similarity index 93%
rename from client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html
rename to client/src/app/+videos/+video-watch/shared/player-widgets/video-watch-playlist.component.html
index c0f45c977..3cbfa33ad 100644
--- a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html
+++ b/client/src/app/+videos/+video-watch/shared/player-widgets/video-watch-playlist.component.html
@@ -1,9 +1,9 @@
-
-
+ >
+
@@ -53,8 +63,11 @@