-
Notifications
You must be signed in to change notification settings - Fork 3
/
popup.html
232 lines (228 loc) · 11.4 KB
/
popup.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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<html>
<head>
<link rel="stylesheet" type="text/css" href="popup.css">
</head>
<body scroll="no">
<header>
<h1>YouTube Video Effects™</h1>
<svg id="moption" version="1.1" viewBox="0 0 38 48" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="20" cy="13" r="3" fill="white" />
<circle cx="20" cy="25" r="3" fill="white" />
<circle cx="20" cy="37" r="3" fill="white" />
<title>Advanced Options</title>
</svg>
</header>
<!-- <h2 style='margin-top:5px;'>Video Effects & Audio Enhancer</h2> -->
<ul id="videoeffect">
<div id="gap">
<li>
<input type="radio" id="filter00" name="filters" value="0" checked><label for="filter00">No Filter</label>
</li>
<li>
<input type="radio" id="filter01" name="filters" value="1"><label for="filter01">Filter 01: Memory</label>
</li>
<li>
<input type="radio" id="filter02" name="filters" value="2"><label for="filter02">Filter 02: MoonLight</label>
</li>
<li>
<input type="radio" id="filter03" name="filters" value="3"><label for="filter03">Filter 03: Ice</label>
</li>
<li>
<input type="radio" id="filter04" name="filters" value="4"><label for="filter04">Filter 04: Blood</label>
</li>
<li>
<input type="radio" id="filter05" name="filters" value="5"><label for="filter05">Filter 05: Sunrise</label>
</li>
<li>
<input type="radio" id="filter06" name="filters" value="6"><label for="filter06">Filter 06: Sadness</label>
</li>
<li>
<input type="radio" id="filter07" name="filters" value="7"><label for="filter07">Filter 07: Brighter</label>
</li>
<li>
<input type="radio" id="filter08" name="filters" value="8"><label for="filter08">Filter 08: Darker</label>
</li>
<li>
<input type="radio" id="filter09" name="filters" value="9"><label for="filter09">Filter 09: Autumn</label>
</li>
<li>
<input type="radio" id="filter10" name="filters" value="10"><label for="filter10">Filter 10: War</label>
</li>
<li>
<input type="radio" id="filter11" name="filters" value="11"><label for="filter11">Filter 11: Love</label>
</li>
<li>
<input type="radio" id="filter12" name="filters" value="12"><label for="filter12">Filter 12: Crystal Ball</label>
</li>
<li>
<input type="radio" id="filter13" name="filters" value="13"><label for="filter13">Filter 13: Chocolate</label>
</li>
<li>
<input type="radio" id="filter14" name="filters" value="14"><label for="filter14">Filter 14: Broken Mirror</label>
</li>
<li>
<input type="radio" id="filter15" name="filters" value="15"><label for="filter15">Filter 15: Focus</label>
</li>
<li>
<input type="radio" id="filter16" name="filters" value="16"><label for="filter16">Filter 16: Old Movie</label>
</li>
<li>
<input type="radio" id="filter17" name="filters" value="17"><label for="filter17">Filter 17: Light Effect</label>
</li>
<li>
<input type="radio" id="filter18" name="filters" value="18"><label for="filter18">Filter 18: Water Drops</label>
</li>
<li>
<input type="radio" id="filter19" name="filters" value="19"><label for="filter19">Filter 19: Neon Light</label>
</li>
<li>
<input type="radio" id="filter20" name="filters" value="20"><label for="filter20">Filter 20: Autumn Curve</label>
</li>
<li>
<input type="radio" id="filter21" name="filters" value="21"><label for="filter21">Filter 21: Ice Curve</label>
</li>
<li>
<input type="radio" id="filter22" name="filters" value="22"><label for="filter22">Filter 22: Rainbow 1</label>
</li>
<li>
<input type="radio" id="filter23" name="filters" value="23"><label for="filter23">Filter 23: Rainbow 2</label>
</li>
<li>
<input type="radio" id="filter24" name="filters" value="24"><label for="filter24">Filter 24: Chaotics</label>
</li>
<li>
<input type="radio" id="filter25" name="filters" value="25"><label for="filter25">Filter 25: Loss of Signal 1</label>
</li>
<li>
<input type="radio" id="filter26" name="filters" value="26"><label for="filter26">Filter 26: Loss of Signal 2</label>
</li>
<li>
<input type="radio" id="filter27" name="filters" value="27"><label for="filter27">Filter 27: Wooden Window</label>
</li>
<li>
<input type="radio" id="filter28" name="filters" value="28"><label for="filter28">Filter 28: Hearts</label>
</li>
<li>
<input type="radio" id="filter29" name="filters" value="29"><label for="filter29">Filter 29: Behind The Fog</label>
</li>
<li>
<input type="radio" id="filter30" name="filters" value="30"><label for="filter30">Filter 30: Festival of Colors</label>
</li>
<li>
<input type="radio" id="filter31" name="filters" value="31"><label for="filter31">Filter 31: Pixels</label>
</li>
<li>
<input type="radio" id="filter32" name="filters" value="32"><label for="filter32">Filter 32: Sepia</label>
</li>
<li>
<input type="radio" id="filter33" name="filters" value="33"><label for="filter33">Filter 33: Grayscale</label>
</li>
<li>
<input type="radio" id="filter34" name="filters" value="34"><label for="filter34">Filter 34: Blur</label>
</li>
<li>
<input type="radio" id="filter35" name="filters" value="35"><label for="filter35">Filter 35: Smooth</label>
</li>
<li>
<input type="radio" id="filter36" name="filters" value="36"><label for="filter36">Filter 36: Gamma</label>
</li>
<li>
<input type="radio" id="filter37" name="filters" value="37"><label for="filter37">Filter 37: Less Saturation 1</label>
</li>
<li>
<input type="radio" id="filter38" name="filters" value="38"><label for="filter38">Filter 38: More Saturation 1</label>
</li>
<li>
<input type="radio" id="filter39" name="filters" value="39"><label for="filter39">Filter 39: Less Saturation 2</label>
</li>
<li>
<input type="radio" id="filter40" name="filters" value="40"><label for="filter40">Filter 40: More Saturation 2</label>
</li>
<li>
<input type="radio" id="filter41" name="filters" value="41"><label for="filter41">Filter 41: Edge Maps 1</label>
</li>
<li>
<input type="radio" id="filter42" name="filters" value="42"><label for="filter42">Filter 42: Edge Maps 2</label>
</li>
<li>
<input type="radio" id="filter43" name="filters" value="43"><label for="filter43">Filter 43: Edge Maps 3</label>
</li>
<li>
<input type="radio" id="filter44" name="filters" value="44"><label for="filter44">Filter 44: Sharpen</label>
</li>
<li>
<input type="radio" id="filter45" name="filters" value="45"><label for="filter45">Filter 45: Emboss</label>
</li>
<li>
<input type="radio" id="filter46" name="filters" value="46"><label for="filter46">Filter 46: Underwater</label>
</li>
<li>
<input type="radio" id="filter47" name="filters" value="47"><label for="filter47">Filter 47: Drawing</label>
</li>
<li>
<input type="radio" id="filter48" name="filters" value="48"><label for="filter48">Filter 48: Contour</label>
</li>
<li>
<input type="radio" id="filter49" name="filters" value="49"><label for="filter49">Filter 49: Shading</label>
</li>
<li>
<input type="radio" id="filter50" name="filters" value="50"><label for="filter50">Filter 50: HUE+</label>
</li>
<li>
<input type="radio" id="filter51" name="filters" value="51"><label for="filter51">Filter 51: HUE+2</label>
</li>
<li>
<input type="radio" id="filter52" name="filters" value="52"><label for="filter52">Filter 52: HUE+3</label>
</li>
<li>
<input type="radio" id="filter53" name="filters" value="53"><label for="filter53">Filter 53: HUE+4</label>
</li>
<li>
<input type="radio" id="filter54" name="filters" value="54"><label for="filter54">Filter 54: HUE+5</label>
</li>
<li>
<input type="radio" id="filter55" name="filters" value="55"><label for="filter55">Filter 55: Contrast</label>
</li>
<li>
<input type="radio" id="filter56" name="filters" value="56"><label for="filter56">Filter 56: Exposure</label>
</li>
<li>
<input type="radio" id="filter57" name="filters" value="57"><label for="filter57">Filter 57: Scanline *</label>
</li>
<li id="mfcontainer">
<input type="radio" id="filter58" name="filters" value="58"><label for="filter58">Filter 58: Mixed Filters</label>
<div id='manualfilter'>
<span title="Press Enter to apply"><label>Contrast (-10—10):</label> <input type='number' name='convalue' id='manual1' min='-10' max='10' value='0'/></span>
<span title="Press Enter to apply"><label>Saturation (-10—10):</label> <input type='number' name='satvalue' id='manual2' min='-10' max='10' value='0'/></span>
<span title="Press Enter to apply"><label>Brightness (-10—10):</label> <input type='number' name='brvalue' id='manual3' min='-10' max='10' value='0'/></span>
<span title="Press Enter to apply"><label>Grayscale (0—10):</label> <input type='number' name='grvalue' id='manual4' min='0' max='10' value='0'/></span>
<span title="Press Enter to apply"><label>Invert (0—10):</label> <input type='number' name='invalue' id='manual5' min='0' max='10' value='0'/></span>
<span title="Press Enter to apply"><label>Sepia (0—10):</label> <input type='number' name='sevalue' id='manual6' min='0' max='10' value='0'/></span>
<span title="Press Enter to apply"><label>HUE (0—10):</label> <input type='number' name='huvalue' id='manual7' min='0' max='10' value='0'/></span>
<span id='spbutton'><input type='button' value='Apply' id='setvalue'></span>
</div>
</li>
</div>
</ul>
<!--<h2>Audio Enhancement</h2>-->
<div id="audioapp">
<div id="app"></div>
<script src="audio/dist/popup.js"></script>
</div>
<article lang='en' id="tip_audio">
<span id='showhidenote' title='Read more'>« Tips » </span>
<p><p class='note' style="border-top:0.5px solid gray;">
» If you enable <span title='Audio Enhancement'>AE</span>, your audio will be shared to extension to apply filters to improve sound quality. You will see this status on Tab. If you don't want to share sound with extension, you just disable it.</p><p class='note'>» In this sharing mode, the fullscreen mode of YouTube will work unperfectly (from Chrome 55 and above), so you need to press <b>F11</b> key to switch to the fullscreen mode. The fullscreen mode will work back normally if you disable <span title='Audio Enhancement'>AE</span>. This is a Chromium bug and we already reported to Chromium team. They will fix this issue soon.</p><p class='note' >» The adblock feature is now removed from this extension, because Google did not allow us to do this.</p><p class='note' style="border-bottom:0.5px solid gray;">» The Picture in Picture feature is activated on Chrome 69+. To use PinP, on YouTube page, when you are watching video, you just press command <strong style="color:orange;">F9</strong>.
</p>
</article>
<footer title="If you need Themes and Dark Themes for YouTube, You can use YouTube Themes Extension">
<label class="caption" style="text-align: right; width:95%;"><a href="https://chrome.google.com/webstore/detail/deljjimclpnhngmikaiiodgggdniaooh" target="_blank">YouTube Themes Extension</label>
</footer>
<style>
label.caption a:link, label.caption a:visited{color:white !important; text-decoration: none !important;}
label.caption a:hover{color: lightgray !important;}
label.caption{padding-top:3px;}
</style>
</body>
<script type="text/javascript" src="popup.js"></script>
</html>