-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
169 lines (151 loc) · 7.73 KB
/
index.html
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!doctype html>
<html lang="en" data-theme="night">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gallery</title>
<link rel="icon" type="image/png" href="./128.png" />
<link rel="stylesheet" href="./output.css" />
<script type="module" src="./script.js" defer></script>
<script src="./Sortable.min.js"></script>
</head>
<body class="bg-base-100 text-base-content">
<div class="flex flex-col items-center">
<div class="flex w-full flex-wrap" id="gallery"></div>
</div>
<div class="prose m-3 mx-auto rounded-box border-2 border-error p-2 text-error" id="outdated-extension-warning" style="display: none">
<b>Warning:</b> You're using an outdated Chrome extension version "<span id="ext-version"></span>". Please
<a class="link" href="/gallery-ext/#update">update</a> it to the latest version "<span id="gal-version">1.1.2</span>", as some features might
not work properly.
</div>
<div class="navbar focus bg-base-100">
<div class="flex-1">
<a class="btn btn-ghost text-xl" href="/">Gallery</a>
</div>
<div class="flex-none">
<ul class="menu menu-horizontal px-1">
<li><a href="/">Home</a></li>
<li>
<a href="/gallery-ext/" target="_blank" t>Extension</a>
</li>
<li><a href="/~https://github.com/isha-live/gallery/" target="_blank">GitHub</a></li>
</ul>
</div>
</div>
<div class="divider focus mx-auto mt-10 w-[750px]">Controls</div>
<div class="m-auto mt-10 w-[750px] px-1" style="display: none" id="controls">
<div class="focus mb-4 flex items-center gap-1">
<input id="gallery-url" type="text" placeholder="URL" class="input input-xs input-bordered ml-0 flex-1" />
<button id="update-gallery-url" class="btn btn-secondary btn-xs">
<svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path
d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z" />
</svg>
</button>
</div>
<div>
<label class="relative inline-flex cursor-pointer items-center">
<input type="checkbox" id="show-focus" class="show-toggle url-param toggle toggle-secondary m-0" checked />
<span class="text-md ms-3">Show everything</span>
</label>
</div>
<div class="focus">
<label class="relative inline-flex cursor-pointer items-center">
<input type="checkbox" id="audioLevels" class="url-param toggle toggle-secondary m-0" checked />
<span class="text-md ms-3">Draw audio levels</span>
</label>
</div>
<div class="focus">
<label class="relative inline-flex cursor-pointer items-center">
<input type="checkbox" id="noAudioBlink" class="url-param toggle toggle-secondary m-0" disabled />
<span class="text-md ms-3">Blink if no audio for over 5 seconds</span>
</label>
</div>
<div class="focus mb-4">
<label class="relative inline-flex cursor-pointer items-center">
<input type="checkbox" id="mute-rotation" class="url-param toggle toggle-secondary m-0" />
<span class="text-md ms-3">Auto unmute boxes one by one during monitoring</span>
<input type="text" id="rotation-boxes" class="url-param input input-xs input-bordered mx-1 my-0" placeholder="e.g. 1 2 5" />
<input type="text" id="rotation-time" class="url-param input input-xs input-bordered mx-0 my-0 w-12" placeholder="sec" value="60" />
</label>
</div>
<div class="focus">
<label class="relative inline-flex cursor-pointer items-center">
<input type="checkbox" id="autoLive" class="url-param toggle toggle-secondary m-0" checked />
<span class="text-md ms-3">YouTube: automatically switch to LIVE</span>
</label>
</div>
<div class="focus mb-4">
<label class="relative inline-flex cursor-pointer items-center">
<button id="setQuality" class="btn btn-outline btn-secondary btn-xs">Lowest Quality</button>
<span class="text-md ms-3">YouTube: Select the lowest quality (resolution) for all videos</span>
</label>
</div>
</div>
<div class="divider focus mx-auto my-10 w-[750px]">Data Rows</div>
<div id="data-rows" class="focus m-auto w-[750px] px-1"></div>
<div class="focus m-auto w-[750px] px-1">
<button id="add-data-row" class="btn btn-outline btn-secondary btn-xs mt-3">Add</button>
<button id="update-rows" class="btn btn-outline btn-secondary btn-xs mt-3">Update</button>
</div>
<div class="divider focus mx-auto my-10 w-[750px]">Documentation</div>
<div class="prose focus m-auto w-[760px] max-w-[750px] px-1">
<p>Please use the latest Chrome browser and install the extension.</p>
<h3>
Chrome Extension
<span id="installedBadge" class="badge badge-success badge-error badge-lg">Not Installed</span>
</h3>
<p>
Because of the CORS policy, we can't access the videos with JavaScript directly.
<br />
That is why a Chrome Extension is required to enable VU meters, automatic quality adjustment, always staying on LIVE, and other features.
<a class="link" href="/gallery-ext/" target="_blank">Click here to install.</a>
</p>
<h3>Chrome Flags</h3>
Chrome tries to improve the audio inputs (noise reduction, auto gain) by default, which ironically makes the audio worse. So we need to disable
this by going to <a class="link">chrome://flags</a> and selecting "Disabled" for these three flags:
<ol>
<li>Allow WebRTC to adjust the input volume,</li>
<li>WebRTC downmix capture audio method,</li>
<li>Chrome-wide echo cancellation.</li>
</ol>
This is only needed if we are using Screen Share with an audio input. Audio from YT, JW, etc. will work fine without disabling the flags.
<h3>Tips</h3>
<ul>
<li>You can paste a YouTube URL into the value field and it will automatically extract the video ID.</li>
<li>
You can copy several YouTube links with names from a Google Sheet into the URL field in the Control section and it will automatically add
them all.
</li>
</ul>
<h3>Value</h3>
<ul>
<li>
<code>YT, YN (YouTube)</code> For <i>https://youtube.com/watch?v=jfKfPfyJRdk</i> the value will be <b>jfKfPfyJRdkM</b>.
<br />
<b>Note</b>: YN is privacy enhanced youtube, you will join in "incognito" mode.
</li>
<li><code>JW (JW Player)</code> Paste video ID.</li>
<li>
<code>SS (Screen Share)</code>Select the audio input.
<br />
<b>Note:</b> Don't forget to disable the Chrome flags.
</li>
<li><code>FB (Facebook)</code> Paste video ID.</li>
<li>
<code>CU (Custom)</code> Any web link e.g. <i>https://isha-live.github.io/gallery/128.png</i><br />
<b>Note</b>: most links won't work because of CORS restrictions in the browser.
</li>
</ul>
</div>
<footer class="footer footer-center focus mt-10 bg-base-300 p-4 text-base-content">
<aside>
<p>
For any bug / feature requests, please open an issue in our
<a class="link" href="/~https://github.com/isha-live/gallery/" target="_blank">GitHub</a> repo (ʃƪ˶˘ ﻬ ˘˶).
</p>
<p>Check out our <a class="link" href="/">homepage</a> for more streaming tools (=ↀωↀ=).</p>
</aside>
</footer>
</body>
</html>