Add "Play on YouTube" functionality (#467)

* feat: added open in YouTube functionality

* chore: replace fixed px size

* feat: pause video when openInYouTube is clicked

* refactor: rename svgIconContainer to videoPlayerIcon for clarity

* feat: added external YouTube play button for talks with YouTube videos

* feat: pause video when external YouTube play button is clicked

* refactor: add eventlistener through JS and move shared code in a function

* refactor: simplify video container selection by using playerTarget

* feat: replace eventlisterns with StimulusJS method

* chore: revert changes and use <a> with href only

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);
+  }
 }

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
+  }
 }

app/views/talks/_talk.html.erb

@@ -41,6 +41,15 @@
         </div>
 
         <div class="flex gap-1">
+          <% if talk.video_provider == "youtube" %>
+            <a class="tooltip tooltip-top v-playOnYoutubeButton" data-tip="Watch on YouTube" href="<%= "https://www.youtube.com/watch?v=#{talk.video_id}" %>" target="_blank" data-action="click->video-player#pause">
+              <div class="flex gap-2 items-center rounded-full border bg-gray-100 hover:bg-gray-200/50 border-gray-200 font-regular px-3 py-1 text-sm cursor-pointer">
+                <span class="text-nowrap">Play on</span>
+                <%= fa("youtube-brands", size: :sm, style: :solid) %>
+              </div>
+            </a>
+          <% end %>
+
           <% if signed_in? && !talk.scheduled? %>
             <%= turbo_frame_tag dom_id(talk, :watched_talk) do %>
               <% if talk.watched? %>