diff --git a/app/assets/images/icons/fontawesome/youtube-brands-solid.svg b/app/assets/images/icons/fontawesome/youtube-brands-solid.svg new file mode 100644 index 000000000..f1b66b8a5 --- /dev/null +++ b/app/assets/images/icons/fontawesome/youtube-brands-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/stylesheets/components/video.css b/app/assets/stylesheets/components/video.css index f38e22c9a..c41009194 100644 --- a/app/assets/stylesheets/components/video.css +++ b/app/assets/stylesheets/components/video.css @@ -17,4 +17,9 @@ .v-bigPlay { opacity: 0.5 !important; } + + .v-openInYouTube.v-controlButton svg { + width: 65%; + fill: var(--vlite-controlsColor); + } } diff --git a/app/javascript/controllers/video_player_controller.js b/app/javascript/controllers/video_player_controller.js index 5f2f716cd..fa89a3f61 100644 --- a/app/javascript/controllers/video_player_controller.js +++ b/app/javascript/controllers/video_player_controller.js @@ -1,6 +1,7 @@ import { Controller } from '@hotwired/stimulus' import Vlitejs from 'vlitejs' import VlitejsYoutube from 'vlitejs/providers/youtube.js' +import youtubeSvg from '../../assets/images/icons/fontawesome/youtube-brands-solid.svg?raw' Vlitejs.registerProvider('youtube', VlitejsYoutube) @@ -31,7 +32,9 @@ export default class extends Controller { if (controlBar) { const volumeButton = player.elements.container.querySelector('.v-volumeButton') const playbackRateSelect = this.createPlaybackRateSelect(this.playbackRateOptions, player) + const openInYouTube = this.createOpenInYoutube() volumeButton.parentNode.insertBefore(playbackRateSelect, volumeButton.nextSibling) + volumeButton.parentNode.insertBefore(openInYouTube, volumeButton.previousSibling) } // for seekTo to work we need to store again the player instance this.player = player @@ -61,4 +64,21 @@ export default class extends Controller { this.player.seekTo(time) } } + + pause () { + this.player.pause() + } + + createOpenInYoutube () { + const videoId = this.playerTarget.dataset.youtubeId + + const anchorTag = document.createElement('a') + anchorTag.className = 'v-openInYouTube v-controlButton' + anchorTag.innerHTML = youtubeSvg + anchorTag.href = `https://www.youtube.com/watch?v=${videoId}` + anchorTag.target = '_blank' + anchorTag.dataset.action = 'click->video-player#pause' + + return anchorTag + } } diff --git a/app/views/talks/_talk.html.erb b/app/views/talks/_talk.html.erb index 8532f7c20..e7feee0e4 100644 --- a/app/views/talks/_talk.html.erb +++ b/app/views/talks/_talk.html.erb @@ -41,6 +41,15 @@
+ <% if talk.video_provider == "youtube" %> + " target="_blank" data-action="click->video-player#pause"> +
+ Play on + <%= fa("youtube-brands", size: :sm, style: :solid) %> +
+
+ <% end %> + <% if signed_in? && !talk.scheduled? %> <%= turbo_frame_tag dom_id(talk, :watched_talk) do %> <% if talk.watched? %>