queued-video.cljs

(om/defui ^:once QueuedVideo
  static uc/InitialAppState
  (initial-state [_ title] {::video/id    (random-uuid)
                            ::video/title title})

  static om/IQuery
  (query [_] [::video/id
              ::video/watched?
              {::video/snippet
               [::video/title
                ::video/channel-id
                ::video/channel-title
                ::video/published-at
                {::video/thumbnails
                 [{::thumbnail/default
                   [::thumbnail/url]}]}]}
              {::video/content-details
               [::video/duration]}])

  static om/Ident
  (ident [_ props] [::video/by-id (::video/id props)])

  Object
  (componentDidMount [this]
    (when-not (-> this om/props ::video/snippet)
      (df/load this (om/get-ident this) QueuedVideo
        {:parallel true})))

  (render [this]
    (let [{::video/keys [id snippet content-details watched?]} (om/props this)
          {::video/keys [title channel-id channel-title thumbnails published-at]} snippet
          {::video/keys [duration]} content-details]
      (dom/div #js {:className (cond-> "video--row"
                                 watched? (str " video--row--watched"))}
        (dom/div #js {:className "video--thumbnail--container"}
          (dom/img #js {:src       (get-in thumbnails [::thumbnail/default ::thumbnail/url])
                        :className "video--thumbnail"})
          (dom/div #js {:className "video--duration"} (duration-str (str duration))))
        (dom/div #js {:className "flex-column"}
          (dom/div #js {:className "video--title"}
            (dom/a #js {:href    "#"
                        :title   title
                        :onClick (pd #(om/transact! this `[(video/navigate {::video/id ~id})
                                                           (video/mark-watched {::video/id ~id})
                                                           (window/close)]))}
              title))
          (dom/div #js {:className "video--channel-title"}
            (dom/a #js {:href "#"
                        :onClick (pd #(om/transact! this `[(channel/navigate {::channel/id ~channel-id})
                                                           (window/close)]))}
              channel-title))
          (dom/div #js {:className "video--channel-published-at"} (-> (js/moment published-at) .fromNow))

          (dom/div #js {:className "flex-space"})
          (dom/div #js {:className "video--actions"}
            (if-not watched?
              (dom/a #js {:className "video--action"
                          :href      "#"
                          :onClick   (pd #(om/transact! this `[(video/mark-watched {::video/id ~id})]))}
                (icon "ok"))
              (dom/a #js {:className "video--action"
                          :href      "#"
                          :onClick   (pd #(om/transact! this `[(video/mark-unwatched {::video/id ~id})]))}
                (icon "repeat")))))))))