refactor: refactor watch to single video hook

Author: trueChazza

assets/js/app.js

@@ -49,7 +49,7 @@ channel.join()
 let liveSocket = new LiveSocket("/live", Socket, {
     params: { _csrf_token: csrfToken },
     hooks: {
-        movie: {
+        video: {
             mounted() {
                 const urlParams = new URLSearchParams(window.location.search)
 
@@ -58,38 +58,15 @@ let liveSocket = new LiveSocket("/live", Socket, {
                 }
 
                 window.addEventListener("beforeunload", event => {
-                    this.pushEvent("movie_destroyed", {
+                    this.pushEvent("video_destroyed", {
                         current_time: Math.floor(this.el.currentTime),
                         duration: Math.floor(this.el.duration)
                     })
 
                     delete event["returnValue"]
                 })
 
-                this.pushEvent("movie_played")
-            },
-            destroyed() {
-                window.removeEventListener("beforeunload")
-            }
-        },
-        episode: {
-            mounted() {
-                const urlParams = new URLSearchParams(window.location.search)
-
-                if (urlParams.has("seconds")) {
-                    this.el.currentTime = urlParams.get("seconds")
-                }
-
-                window.addEventListener("beforeunload", event => {
-                    this.pushEvent("episode_destroyed", {
-                        current_time: Math.floor(this.el.currentTime),
-                        duration: Math.floor(this.el.duration)
-                    })
-
-                    delete event["returnValue"]
-                })
-
-                this.pushEvent("episode_played")
+                this.pushEvent("video_played")
             },
             destroyed() {
                 window.removeEventListener("beforeunload")

lib/media_server_web/live/watch_episode_live/show.ex

@@ -30,7 +30,7 @@ defmodule MediaServerWeb.WatchEpisodeLive.Show do
 
   @impl true
   def handle_event(
-        "episode_destroyed",
+        "video_destroyed",
         %{
           "current_time" => current_time,
           "duration" => duration
@@ -50,7 +50,7 @@ defmodule MediaServerWeb.WatchEpisodeLive.Show do
     {:noreply, socket}
   end
 
-  def handle_event("episode_played", _params, socket) do
+  def handle_event("video_played", _params, socket) do
     action = Components.list_actions() |> List.first()
 
     Actions.create_episode(%{

lib/media_server_web/live/watch_episode_live/show.html.heex

@@ -1,4 +1,4 @@
-<video id="video" phx-hook="episode" poster={MediaServerWeb.Repositories.Episodes.get_background(@episode)} controlsList="nodownload" controls autoplay>
+<video id="video" phx-hook="video" poster={MediaServerWeb.Repositories.Episodes.get_background(@episode)} controlsList="nodownload" controls autoplay>
     <source src={Routes.stream_episode_path(@socket, :show, @episode["id"], token: Phoenix.Token.sign(MediaServerWeb.Endpoint, "user auth", @current_user.id))} type="video/mp4">
 
     <%= if MediaServerWeb.Helpers.has_subtitle(MediaServerWeb.Helpers.get_parent_path(@episode["episodeFile"]["path"]), MediaServerWeb.Helpers.get_file_name(@episode["episodeFile"]["relativePath"])) do %>

lib/media_server_web/live/watch_movie_live/show.ex

@@ -30,7 +30,7 @@ defmodule MediaServerWeb.WatchMovieLive.Show do
 
   @impl true
   def handle_event(
-        "movie_destroyed",
+        "video_destroyed",
         %{
           "current_time" => current_time,
           "duration" => duration
@@ -49,7 +49,7 @@ defmodule MediaServerWeb.WatchMovieLive.Show do
     {:noreply, socket}
   end
 
-  def handle_event("movie_played", _params, socket) do
+  def handle_event("video_played", _params, socket) do
     action = Components.list_actions() |> List.first()
 
     Actions.create_movie(%{

lib/media_server_web/live/watch_movie_live/show.html.heex

@@ -1,4 +1,4 @@
-<video id="video" phx-hook="movie" poster={MediaServerWeb.Repositories.Movies.get_background(@movie)} controlsList="nodownload" controls autoplay>
+<video id="video" phx-hook="video" poster={MediaServerWeb.Repositories.Movies.get_background(@movie)} controlsList="nodownload" controls autoplay>
     <source src={Routes.stream_movie_path(@socket, :show, @movie["id"], token: Phoenix.Token.sign(MediaServerWeb.Endpoint, "user auth", @current_user.id))} type="video/mp4">
 
     <%= if MediaServerWeb.Helpers.has_subtitle(@movie["folderName"], @movie["movieFile"]["relativePath"]) do %>

test/media_server_web/live/watch_episode_live_test.exs

@@ -30,7 +30,7 @@ defmodule MediaServerWeb.WatchEpisodeLiveTest do
 
       {:ok, view, _html} = live(conn, Routes.watch_episode_show_path(conn, :show, episode["id"]))
 
-      render_hook(view, :episode_played)
+      render_hook(view, :video_played)
 
       assert Enum.count(Actions.list_episode_actions()) === 1
     end
@@ -47,7 +47,7 @@ defmodule MediaServerWeb.WatchEpisodeLiveTest do
 
       {:ok, view, _html} = live(conn, Routes.watch_episode_show_path(conn, :show, episode["id"]))
 
-      render_hook(view, :episode_destroyed, %{
+      render_hook(view, :video_destroyed, %{
         episode_id: episode["id"],
         serie_id: episode["seriesId"],
         current_time: 39,
@@ -70,7 +70,7 @@ defmodule MediaServerWeb.WatchEpisodeLiveTest do
 
       {:ok, view, _html} = live(conn, Routes.watch_episode_show_path(conn, :show, episode["id"]))
 
-      render_hook(view, :episode_destroyed, %{
+      render_hook(view, :video_destroyed, %{
         episode_id: episode["id"],
         serie_id: episode["seriesId"],
         current_time: 90,

test/media_server_web/live/watch_movie_live_test.exs

@@ -27,7 +27,7 @@ defmodule MediaServerWeb.WatchMovieLiveTest do
 
       {:ok, view, _html} = live(conn, Routes.watch_movie_show_path(conn, :show, movie["id"]))
 
-      render_hook(view, :movie_played)
+      render_hook(view, :video_played)
 
       assert Enum.count(ActionsFixtures.get_movie_played()) === 1
     end
@@ -42,7 +42,7 @@ defmodule MediaServerWeb.WatchMovieLiveTest do
 
       {:ok, view, _html} = live(conn, Routes.watch_movie_show_path(conn, :show, movie["id"]))
 
-      render_hook(view, :movie_destroyed, %{
+      render_hook(view, :video_destroyed, %{
         current_time: 89,
         duration: 100
       })
@@ -60,7 +60,7 @@ defmodule MediaServerWeb.WatchMovieLiveTest do
 
       {:ok, view, _html} = live(conn, Routes.watch_movie_show_path(conn, :show, movie["id"]))
 
-      render_hook(view, :movie_destroyed, %{
+      render_hook(view, :video_destroyed, %{
         current_time: 90,
         duration: 100
       })