-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtwitch.html
126 lines (116 loc) · 6.33 KB
/
twitch.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
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-115047347-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-115047347-1');
</script>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Tools/Twitch/twitch.css"/>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<title>MultiTwitch</title>
</head>
<body>
<div id="ct-settings" class="ct-settings collapsed">
<div class="ct-settings-section">
<button id="ct-settings-search">Search</button>
<button id="ct-settings-bhelp">Help</button>
<button id="ct-settings-bpin">Pin</button>
</div>
<div class="ct-settings-section">
<span>Layout</span>
<button id="ct-settings-bhorz">Horizontal</button>
<button id="ct-settings-bvert">Vertical</button>
</div>
<div class="ct-settings-section">
<span>Focus Audio</span>
<button id="ct-settings-bnfoc">No</button>
<button id="ct-settings-byfoc">Yes</button>
</div>
<div class="ct-settings-section">
<span>Focus Quality</span>
<button id="ct-settings-bnqua">No</button>
<button id="ct-settings-b480">480p</button>
<button id="ct-settings-b720">720p</button>
</div>
<div id="ct-settings-playerbuttons" class="ct-settings-section">
<span>Focus Stream</span>
</div>
</div>
<div id="ct-player-container" class="ct-container">
<div class="ct-container-break"></div>
</div>
<div id="help-modal" class="help hidden">
<h1>Help</h1>
<hr/>
<p>The settings menu hides and shows on hover at the top of the screen, or you can use the <strong>Pin</strong> button to toggle leaving it visible</p>
<p>Channel names are parsed from the URL hash, e.g. <strong>#channel1/channel2/channel3/channel4</strong>. A maximum of four streams are supported</p>
<p>Use the Search button to search for streams as an alternative to editing the URL directly. Search/click on a category to load the first 30 streams (by viewer count), click on a stream to add it to the page.</p>
<p>Use the <strong>Horizontal</strong> and <strong>Vertical</strong> buttons to toggle the layout to fit better depending on if you have a wider or taller screen</p>
<p>Setting Focus Audio to <strong>Yes</strong> will cause streams to mute/unmute as the focused stream changes. Isolating a stream will focus the audio regardless of this setting</p>
<p>
Streams are set to Source quality by default
Setting Focus Quality to <strong>480p</strong> or <strong>720p</strong> will cause the focused stream to switch to Source quality, and all others will be set to the chosen quality
Not all streams support all qualities, if the selected quality isn't an option than it won't be changed on that stream
</p>
<p>
<strong>Click</strong> the channel names to switch which stream is focused and given more space in the layout, indicated in green. <br/>
<strong>Click</strong> the already-focused stream to switch to an even layout. <br/>
<strong>CTRL+Click</strong> to isolate the selected stream, maximizing the stream and temporarily hiding the others, indicated in blue. <br/>
<strong>SHIFT+Click</strong> to remove the selected stream from the page. <br/>
Holding <strong>CTRL</strong> anywhere on the page will show an overlay of the stream names, <strong>Click</strong> anywhere on the stream to perform the same function as clicking its button.
</p>
<p><strong>Pin</strong>, <strong>Layout</strong>, <strong>Focus Audio</strong>, and <strong>Focus Quality</strong> settings are saved and loaded with local storage</p>
<br/>
<p>Click the <strong>Help</strong> button again or anywhere in this window to close it.</p>
</div>
<div id="ct-search-panel" class="search hidden">
<div id="ct-search-errors" style="display: none" class="error" data-bind="visible: errorMessage, text: errorMessage"></div>
<div id="ct-search-auth-disconnected" class="auth" data-bind="hidden: accessToken">
<button id="ct-search-bauth" data-bind="click: twitchAuthorize">Authorize with Twitch</button>
</div>
<div id="ct-search-auth-connected" style="display: none" class="auth" data-bind="visible: accessToken">
<span>Connected with Twitch!</span>
<button id="ct-search-bunauth" data-bind="click: twitchUnauthorize">Clear authorization</button>
</div>
<div id="ct-search-controls" style="display: none" class="search-controls" data-bind="visible: accessToken">
<div data-bind="hidden: category" class="search-container">
<input type="text" data-bind="textInput: categoryQuery" placeholder="Search categories" />
<div data-bind="foreach: categoryResults" class="results">
<div class="category" data-bind="click: $parent.category">
<img data-bind="attr: { src: box_art_url }" />
<span data-bind="text: name"></span>
</div>
</div>
</div>
<div data-bind="visible: category" class="search-container">
<div data-bind="with: category" class="category-label-container">
<button data-bind="click: $parent.clearCategory">< Back</button>
<span data-bind="text: name"></span>
</div>
<input type="text" data-bind="textInput: streamQuery" placeholder="Search streams (first 30 only)" />
<div data-bind="foreach: filteredStreamResults" class="results">
<div class="stream" data-bind="click: $parent.addStream">
<img data-bind="attr: { src: iconUrl }" />
<div>
<strong data-bind="text: title"></strong>
<span data-bind="text: name"></span>
<span data-bind="text: viewerCount"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<script src= "https://player.twitch.tv/js/embed/v1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js" integrity="sha512-2AL/VEauKkZqQU9BHgnv48OhXcJPx9vdzxN1JrKDVc4FPU/MEE/BZ6d9l0mP7VmvLsjtYwqiYQpDskK9dG8KBA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="Tools/Twitch/twitch.js"></script>
</body>
</html>