From 5d4c0aa9612ec8d23aedacbc8b082c5b5dbb277e Mon Sep 17 00:00:00 2001
From: trueChazza <cgnetwork.nz@gmail.com>
Date: Wed, 2 Mar 2022 14:44:23 +1300
Subject: [PATCH] feat: add minutes remaining on continue watching component

---
 .../components/watch_component.html.heex                 | 9 +++++++--
 lib/media_server_web/live/home_live/index.html.heex      | 2 ++
 lib/media_server_web/live/watches_live/index.html.heex   | 2 ++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/lib/media_server_web/components/watch_component.html.heex b/lib/media_server_web/components/watch_component.html.heex
index a9a4305b..6c6632bc 100644
--- a/lib/media_server_web/components/watch_component.html.heex
+++ b/lib/media_server_web/components/watch_component.html.heex
@@ -7,8 +7,13 @@
         <%= live_redirect to: @link, class: "hover:text-slate-800 hover:underline" do %>
             <%= @title %>
         <% end %>
-        <div class="w-full bg-slate-200 h-1 mt-4">
-            <div class="bg-red-300 h-1" style={"width: #{ @percentage_complete }%"}></div>
+        <div class="w-full flex mt-2">
+            <div class="flex-none text-xs text-slate-500">
+                <%= @minutes_remaining %> min left
+            </div>
+            <div class="flex-1 w-full bg-slate-200 h-1 mt-2 ml-2">
+                <div class="bg-red-300 h-1" style={"width: #{ @percentage_complete }%"}></div>
+            </div>
         </div>
       </div>
       <div class="flex-shrink-0 pr-2">
diff --git a/lib/media_server_web/live/home_live/index.html.heex b/lib/media_server_web/live/home_live/index.html.heex
index c96f7b76..5cd42e09 100644
--- a/lib/media_server_web/live/home_live/index.html.heex
+++ b/lib/media_server_web/live/home_live/index.html.heex
@@ -49,6 +49,7 @@
                          id_item: item.id,
                          image_url: item.image_url,
                          title: item.title,
+                         minutes_remaining: floor((item.duration - item.current_time) / 60),
                          percentage_complete: (item.current_time / item.duration) * 100,
                          link: Routes.watch_movie_show_path(@socket, :show, item.movie_id, seconds: item.current_time),
                          event: "delete_movie",
@@ -64,6 +65,7 @@
                          id_item: item.id,
                          image_url: item.image_url,
                          title: item.title,
+                         minutes_remaining: floor((item.duration - item.current_time) / 60),
                          percentage_complete: (item.current_time / item.duration) * 100,
                          link: Routes.watch_episode_show_path(@socket, :show, item.episode_id, seconds: item.current_time),
                          event: "delete_episode",
diff --git a/lib/media_server_web/live/watches_live/index.html.heex b/lib/media_server_web/live/watches_live/index.html.heex
index f2cb1b48..3fa3a89b 100644
--- a/lib/media_server_web/live/watches_live/index.html.heex
+++ b/lib/media_server_web/live/watches_live/index.html.heex
@@ -15,6 +15,7 @@
                  id_item: item.id,
                  image_url: item.image_url,
                  title: item.title,
+                 minutes_remaining: floor((item.duration - item.current_time) / 60),
                  percentage_complete: (item.current_time / item.duration) * 100,
                  link: Routes.watch_movie_show_path(@socket, :show, item.movie_id, seconds: item.current_time),
                  event: "delete_movie",
@@ -30,6 +31,7 @@
                  id_item: item.id,
                  image_url: item.image_url,
                  title: item.title,
+                 minutes_remaining: floor((item.duration - item.current_time) / 60),
                  percentage_complete: (item.current_time / item.duration) * 100,
                  link: Routes.watch_episode_show_path(@socket, :show, item.episode_id, seconds: item.current_time),
                  event: "delete_episode",