From 91e7c75377273bebd188904c124f0bca87d97b26 Mon Sep 17 00:00:00 2001
From: Ritesh Kumar <ritesh@emerald.pink>
Date: Sat, 6 Jan 2024 23:10:53 -0500
Subject: [PATCH] Add examples of playr's videoStats APIs

Got a bunch of video stats that gets spit out onhover of a button.
---
 assets/js/hooks/youtube_player.js          | 17 +++++++++++++++--
 lib/vyasa_web/components/youtube_player.ex |  9 +++++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/assets/js/hooks/youtube_player.js b/assets/js/hooks/youtube_player.js
index a6b5f63b..8547c26a 100644
--- a/assets/js/hooks/youtube_player.js
+++ b/assets/js/hooks/youtube_player.js
@@ -76,7 +76,7 @@ export const TriggerYouTubeFunction = {
     }
     const {functionName, eventName} = this.el.dataset
     const callback = callbacks[functionName]
-    const getOptions = () => ({...this.el.dataset, player: window.youtubePlayer})
+    const getOptions = () => ({hook: this,...this.el.dataset, player: window.youtubePlayer})
     this.el.addEventListener(eventName, () => callback(getOptions()))
   }
 }
@@ -97,6 +97,19 @@ const callbacks = {
     } = options;
     console.log(`Loading video with id ${videoId} at t=${startSeconds}s`)
     player.loadVideoById({videoId, startSeconds})
+  },
+  getAllStats: function(options)  { // this is a custom function
+    const {
+      hook,
+      player,
+    } = options;
+    const stats = {
+      duration: player.getDuration(),
+      videoUrl: player.getVideoUrl(),
+      currentTime: player.getCurrentTime(),
+    }
+    console.log(">>> Retrieved stats:", stats)
+    hook.pushEventTo("#statsHover", "reportVideoStatus", stats)
   }
 }
 
@@ -110,7 +123,7 @@ const isYouTubeFnCallable = (dataset) => {
     console.warn("Need to provide both valid function name and event name");
     return false
   }
-  const supportedEvents = ["click"]
+  const supportedEvents = ["click", "mouseover"]
   if (!supportedEvents.includes(eventName)) {
     console.warn(`${eventName} is not a supported event. Supported events include ${supportedEvents}.`);
     return false
diff --git a/lib/vyasa_web/components/youtube_player.ex b/lib/vyasa_web/components/youtube_player.ex
index 2df67025..7826a631 100644
--- a/lib/vyasa_web/components/youtube_player.ex
+++ b/lib/vyasa_web/components/youtube_player.ex
@@ -1,6 +1,7 @@
 defmodule VyasaWeb.YouTubePlayer do
     use VyasaWeb, :live_component
 
+    @impl true
     def render(assigns) do
       ~H"""
       <div>
@@ -18,6 +19,7 @@ defmodule VyasaWeb.YouTubePlayer do
           Load New Video @ Start
         </.button>
         <br/>
+        <.button id="statsHover" phx-hook={"TriggerYouTubeFunction"} data-event-name={"mouseover"} data-function-name={"getAllStats"}> Hover to get stats </.button>
         <br/>
         <div
           crossorigin="anonymous"
@@ -27,4 +29,11 @@ defmodule VyasaWeb.YouTubePlayer do
       </div>
       """
     end
+
+  @impl true
+  def handle_event("reportVideoStatus", payload, socket) do
+    IO.inspect(payload)
+    {:noreply, socket}
+  end
+
  end