             (center-text "No videos left to watch.")
 
             :else
-            (dom/div nil
-              (dom/div #js {:className video-chooser}
-                (main-view-link #:ui{:label     "Latest Uploads"
-                                     :main-view ::main-view.latest
-                                     :component this})
-                (main-view-link #:ui{:label     "Channels"
-                                     :main-view ::main-view.channels
-                                     :component this}))
-              (case main-view
-                ::main-view.latest (mapv queued-video queue)
-                ::main-view.channels (mapv category-group list)))))))))
+            [(dom/div #js {:className video-chooser :key "view-selector"}
+               (main-view-link #:ui{:label     "Latest Uploads"
+                                    :main-view ::main-view.latest
+                                    :component this})
+               (main-view-link #:ui{:label     "Channels"
+                                    :main-view ::main-view.channels
+                                    :component this}))
+             (dom/div #js {:className remaining-bar :key "remaining"}
+               (->> queue
+                    (remove ::video/watched?)
+                    (map (comp duration->seconds ::video/duration ::video/content-details))
+                    (reduce +)
+                    (seconds->duration))
+               " left to watch")
+             (dom/div #js {:key "view" :className (cs Root "view-area")}
+               (case main-view
+                 ::main-view.latest (mapv queued-video queue)
+                 ::main-view.channels (mapv category-group list)))]))))))
 
 (css/upsert-css "ygq" Root)
+
+(comment
+  )

                                 :padding       "5px"
                                 :align-items   "baseline"}]

                    [:.action-title {:font-weight "bold"
                                     :font-size   "27px"
                                     :margin-left "10px"}]

(s/fdef duration-str
        :args (s/cat :duration ::duration)
        :ret (s/and string? #(re-find #"^(\d{2}:)?\d{2}:\d{2}$" %)))

(defn duration->seconds [duration]
  (if-let [[h m s] (some->> (re-find #"(?:(\d+)H)?(?:(\d+)M)(?:(\d+)S)?$" duration)
                            next)]
    (let [h (js/parseInt (or h 0))
          m (js/parseInt (or m 0))
          s (js/parseInt (or s 0))]
      (+ (* h 3600) (* m 60) s))
    0))

(defn seconds->duration [seconds]
  (let [h     (js/Math.floor (/ seconds 3600))
        m     (mod (js/Math.floor (/ seconds 60)) 60)
        parts (cond-> []
                (> h 0) (conj (str h " hours"))
                (> m 0) (conj (str m " minutes")))]
    (str/join " and " parts)))

(om/defui ^:once QueuedVideo
  static uc/InitialAppState
