From b31576146259cb044c522a2bc9f6e9c79f103173 Mon Sep 17 00:00:00 2001
From: Abdullah Al Mamun Fahim <aamfahim@myseneca.ca>
Date: Sun, 1 Dec 2024 20:37:36 -0500
Subject: [PATCH] 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
---
 .../fontawesome/youtube-brands-solid.svg      |  1 +
 app/assets/stylesheets/components/video.css   |  5 +++++
 .../controllers/video_player_controller.js    | 20 +++++++++++++++++++
 app/views/talks/_talk.html.erb                |  9 +++++++++
 4 files changed, 35 insertions(+)
 create mode 100644 app/assets/images/icons/fontawesome/youtube-brands-solid.svg

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 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg>
\ 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 @@
         </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? %>