split active videos tile, add duration

tubearchivist/api/src/aggs.py

@@ -34,14 +34,21 @@ class Video(AggBase):
         "aggs": {
             "video_type": {
                 "terms": {"field": "vid_type"},
-                "aggs": {"media_size": {"sum": {"field": "media_size"}}},
+                "aggs": {
+                    "media_size": {"sum": {"field": "media_size"}},
+                    "duration": {"sum": {"field": "player.duration"}},
+                },
             },
             "video_active": {
                 "terms": {"field": "active"},
-                "aggs": {"media_size": {"sum": {"field": "media_size"}}},
+                "aggs": {
+                    "media_size": {"sum": {"field": "media_size"}},
+                    "duration": {"sum": {"field": "player.duration"}},
+                },
             },
             "video_media_size": {"sum": {"field": "media_size"}},
             "video_count": {"value_count": {"field": "youtube_id"}},
+            "duration": {"sum": {"field": "player.duration"}},
         },
     }
 
@@ -49,26 +56,35 @@ class Video(AggBase):
         """process aggregation"""
         aggregations = self.get()
 
+        duration = int(aggregations["duration"]["value"])
         response = {
             "doc_count": aggregations["video_count"]["value"],
             "media_size": int(aggregations["video_media_size"]["value"]),
+            "duration": duration,
+            "duration_str": get_duration_str(duration),
         }
         for bucket in aggregations["video_type"]["buckets"]:
+            duration = int(bucket["duration"].get("value"))
             response.update(
                 {
                     f"type_{bucket['key']}": {
                         "doc_count": bucket.get("doc_count"),
                         "media_size": int(bucket["media_size"].get("value")),
+                        "duration": duration,
+                        "duration_str": get_duration_str(duration),
                     }
                 }
             )
 
         for bucket in aggregations["video_active"]["buckets"]:
+            duration = int(bucket["duration"].get("value"))
             response.update(
                 {
                     f"active_{bucket['key_as_string']}": {
                         "doc_count": bucket.get("doc_count"),
                         "media_size": int(bucket["media_size"].get("value")),
+                        "duration": duration,
+                        "duration_str": get_duration_str(duration),
                     }
                 }
             )

tubearchivist/home/templates/home/settings.html

@@ -6,16 +6,25 @@
 </div>
 <div class="settings-item">
     <h2>Overview</h2>
-    <div id="primaryBox" class="info-box info-box-4">
+    <div id="activeBox" class="info-box info-box-3">
         <p id="loading">Loading...</p>
     </div>
+</div>
+<div class="settings-item">
+    <h2>Video Type</h2>
+    <div id="videoTypeBox" class="info-box info-box-3">
+        <p id="loading">Loading...</p>
+    </div>
+</div>
+<div class="settings-item">
+    <h2>Application</h2>
     <div id="secondaryBox" class="info-box info-box-3">
         <p id="loading">Loading...</p>
     </div>
 </div>
 <div class="settings-item">
     <h2>Watch Progress</h2>
-    <div id="watchBox" class="info-box info-box-3">
+    <div id="watchBox" class="info-box info-box-2">
         <p id="loading">Loading...</p>
     </div>
 </div>

tubearchivist/static/stats.js

@@ -8,20 +8,25 @@ function primaryStats() {
   let apiVideoEndpoint = '/api/stats/video/';
   let responseData = apiRequest(apiVideoEndpoint, 'GET');
 
-  let primaryBox = document.getElementById('primaryBox');
+  let activeBox = document.getElementById('activeBox');
-  clearLoading(primaryBox);
+  clearLoading(activeBox);
 
   let totalTile = buildTotalVideoTile(responseData);
-  primaryBox.appendChild(totalTile);
+  activeBox.appendChild(totalTile);
+  let activeTile = buildActiveVideoTile(responseData);
+  activeBox.appendChild(activeTile);
+  let inActiveTile = buildInActiveVideoTile(responseData);
+  activeBox.appendChild(inActiveTile);
+
+  let videoTypeBox = document.getElementById('videoTypeBox');
+  clearLoading(videoTypeBox);
 
   let videosTypeTile = buildVideosTypeTile(responseData);
-  primaryBox.appendChild(videosTypeTile);
+  videoTypeBox.appendChild(videosTypeTile);
-
   let shortsTypeTile = buildShortsTypeTile(responseData);
-  primaryBox.appendChild(shortsTypeTile);
+  videoTypeBox.appendChild(shortsTypeTile);
-
   let streamsTypeTile = buildStreamsTypeTile(responseData);
-  primaryBox.appendChild(streamsTypeTile);
+  videoTypeBox.appendChild(streamsTypeTile);
 }
 
 function secondaryStats() {
@@ -49,6 +54,7 @@ function buildTotalVideoTile(responseData) {
   const content = {
     Items: `${totalCount}`,
     'Media Size': `${totalSize}`,
+    Duration: responseData.duration_str,
   };
   const tile = buildTile('All: ');
   const table = buildTileContenTable(content, 2);
@@ -56,12 +62,41 @@ function buildTotalVideoTile(responseData) {
   return tile;
 }
 
+function buildActiveVideoTile(responseData) {
+  const activeCount = responseData.active_true.doc_count || 0;
+  const activeSize = humanFileSize(responseData.active_true.media_size) || 0;
+  const content = {
+    Items: `${activeCount}`,
+    'Media Size': `${activeSize}`,
+    Duration: responseData.active_true.duration_str,
+  };
+  const tile = buildTile('Active: ');
+  const table = buildTileContenTable(content, 2);
+  tile.appendChild(table);
+  return tile;
+}
+
+function buildInActiveVideoTile(responseData) {
+  const inActiveCount = responseData.active_false.doc_count || 0;
+  const inActiveSize = humanFileSize(responseData.active_false.media_size) || 0;
+  const content = {
+    Items: `${inActiveCount}`,
+    'Media Size': `${inActiveSize}`,
+    Duration: responseData.active_false.duration_str,
+  };
+  const tile = buildTile('Inactive: ');
+  const table = buildTileContenTable(content, 2);
+  tile.appendChild(table);
+  return tile;
+}
+
 function buildVideosTypeTile(responseData) {
   const videosCount = responseData.type_videos.doc_count || 0;
   const videosSize = humanFileSize(responseData.type_videos.media_size || 0);
   const content = {
     Items: `${videosCount}`,
     'Media Size': `${videosSize}`,
+    Duration: responseData.type_videos.duration_str,
   };
   const tile = buildTile('Regular Videos: ');
   const table = buildTileContenTable(content, 2);
@@ -75,6 +110,7 @@ function buildShortsTypeTile(responseData) {
   const content = {
     Items: `${shortsCount}`,
     'Media Size': `${shortsSize}`,
+    Duration: responseData.type_shorts.duration_str,
   };
   const tile = buildTile('Shorts: ');
   const table = buildTileContenTable(content, 2);
@@ -88,6 +124,7 @@ function buildStreamsTypeTile(responseData) {
   const content = {
     Items: `${streamsCount}`,
     'Media Size': `${streamsSize}`,
+    Duration: responseData.type_streams.duration_str,
   };
   const tile = buildTile('Streams: ');
   const table = buildTileContenTable(content, 2);
@@ -150,16 +187,11 @@ function watchStats() {
   let watchBox = document.getElementById('watchBox');
   clearLoading(watchBox);
 
-  const { total, watched, unwatched } = responseData;
+  let watchedTile = buildWatchTile('watched', responseData.watched);
+  watchBox.appendChild(watchedTile);
 
-  let firstCard = buildWatchTile('total', total);
+  let unwatchedTile = buildWatchTile('unwatched', responseData.unwatched);
-  watchBox.appendChild(firstCard);
+  watchBox.appendChild(unwatchedTile);
-
-  let secondCard = buildWatchTile('watched', watched);
-  watchBox.appendChild(secondCard);
-
-  let thirdCard = buildWatchTile('unwatched', unwatched);
-  watchBox.appendChild(thirdCard);
 }
 
 function buildWatchTile(title, watchDetail) {
@@ -180,7 +212,7 @@ function buildWatchTile(title, watchDetail) {
   const content = {
     Videos: items,
     Seconds: duration,
-    Playback: duration_str,
+    Duration: duration_str,
   };
 
   const table = buildTileContenTable(content, 3);