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

adrienpoly · Dec 2, 2024 · ccdb1fa · ccdb1fa
1 parent 978b37d
commit ccdb1fa
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 18 deletions.
diff --git a/app/javascript/controllers/video_player_controller.js b/app/javascript/controllers/video_player_controller.js
@@ -32,7 +32,7 @@ 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.createYouTubeIcon()
+      const openInYouTube = this.createOpenInYoutube()
       volumeButton.parentNode.insertBefore(playbackRateSelect, volumeButton.nextSibling)
       volumeButton.parentNode.insertBefore(openInYouTube, volumeButton.previousSibling)
     }
@@ -65,23 +65,20 @@ export default class extends Controller {
     }
   }
 
-  playOnYoutube()
-  {
-    const videoId = this.playerTarget.dataset.youtubeId
-    window.open(`https://www.youtube.com/watch?v=${videoId}`, '_blank')
+  pause () {
     this.player.pause()
   }
 
-  createYouTubeIcon () {
-    const wrappedAnchorElement = document.createElement('a')
-    wrappedAnchorElement.dataset.action = "click->video-player#playOnYoutube"
-
-    const button = document.createElement('button')
-    button.innerHTML = youtubeSvg
-    button.className = 'v-openInYouTube v-controlButton'
-
-    wrappedAnchorElement.appendChild(button)
-    
-    return wrappedAnchorElement
+  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
@@ -42,12 +42,12 @@
 
         <div class="flex gap-1">
           <% if talk.video_provider == "youtube" %>
-            <div class="tooltip tooltip-top v-playOnYoutubeButton" data-tip="Watch on YouTube" data-action="click->video-player#playOnYoutube">
+            <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>
-            </div>
+            </a>
           <% end %>
 
           <% if signed_in? && !talk.scheduled? %>