blob: 11cc9c5e3226556420c9b2b3875ff54418f0506b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
(ns tau.components.player
(:require
[reagent.core :as r]
[reagent.dom :as rdom]
[re-frame.core :as rf]
[reitit.frontend.easy :as rfe]
[tau.events :as events]
["video.js" :as videojs]))
(defn global-player
[]
(let [!player (r/atom nil)
!loop? (r/atom nil)]
(fn []
(let [{:keys [uploader-name uploader-url name stream url service-color]} @(rf/subscribe [:global-stream])
show-global-player? @(rf/subscribe [:show-global-player])]
(when show-global-player?
[:div.sticky.bottom-0.z-50.bg-neutral-900.p-5.absolute.box-border.m-0
{:style {:borderColor service-color :borderTopWidth "2px" :borderStyle "solid"}}
[:div.flex.items-center.justify-between
[:div.flex.flex-wrap.items-center
[:div.flex.flex-col
[:a.text-xs
{:href (rfe/href :tau.router/stream nil {:url url})} name]
[:a.text-xs.text-gray-300
{:href (rfe/href :tau.router/channel nil {:url uploader-url})} uploader-name]]
[:div.px-2.py-0.md:pt-4
[:audio {:src stream :ref #(reset! !player %) :loop @!loop?}]]
[:div.mx-2
[:button.focus:ring-transparent.mx-2
{:on-click (fn [] (swap! !loop? #(not %)))}
[:i.fa-solid.fa-repeat
{:style {:color (when @!loop? service-color)}}]]
[:button.focus:ring-transparent.mx-2
{:on-click #(when-let [player @!player]
(if (.-paused player)
(.play player)
(.pause player)))}
(if @!player
(if (.-paused @!player)
[:i.fa-solid.fa-play]
[:i.fa-solid.fa-pause])
[:i.fa-solid.fa-play])]]]
[:div.px-2
[:i.fa-solid.fa-close.cursor-pointer
{:on-click (fn []
(rf/dispatch [::events/toggle-global-player])
(.pause @!player))}]]]])))))
(defn stream-player
[options url]
(let [!player (atom nil)]
(r/create-class
{:display-name "StreamPlayer"
:component-did-mount
(fn [this]
(reset! !player (videojs (rdom/dom-node this) (clj->js options))))
:component-did-update
(fn [this [_ prev-argv prev-more]]
(when (and @!player (not= prev-more (first (r/children this))))
(.src @!player (apply array (map #(js-obj "type" % "src" (first (r/children this)))
["video/mp4" "video/webm"])))
(.ready @!player #(.play @!player))))
:component-will-unmount
(fn [_]
(when @!player
(.dispose @!player)))
:reagent-render
(fn [options url]
[:video-js.vjs-default-skin.vjs-big-play-centered.bottom-0.object-cover.min-h-full.max-h-full.min-w-full])})))
|
