feat: add minutes remaining on continue watching component

midarrlabs · Mar 2, 2022 · 5d4c0aa · 5d4c0aa
1 parent 45f30dc
commit 5d4c0aa
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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",