-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
912 lines (818 loc) · 32.6 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
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
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
<!DOCTYPE html>
<head>
<script>
const { ipcRenderer } = require('electron');
window.jQuery = window.$ = require('jquery');
const axios = require('axios')
</script>
<script>
(function() {
var htmlElement = document.documentElement;
if (navigator.platform.match(/(Mac|MacIntel)/i)) {
htmlElement.className = 'mac';
} else if (navigator.platform.match(/(Windows|Win32|Win64)/i)) {
htmlElement.className = 'windows';
} else if (navigator.platform.match(/(Linux)/i)) {
htmlElement.className = 'linux';
}
document.addEventListener('click', function(event) {
var target = event.target;
if (target.getAttribute && target.getAttribute('data-action') === 'switch-os') {
event.preventDefault();
htmlElement.className = target.getAttribute('data-os')
}
})
})();
</script>
<script>
// Database Update Check
(function($){
$(document).ready(function() {
var version = localStorage.getItem('version');
if(version == '1.6.1'){
console.log("Update Ready")
} else {
console.log('Latest update is not ready.')
window.location.href = "./src/pages/update.html";
}
});
})(jQuery);
</script>
<link rel="stylesheet" href="./src/css/titlebar.css">
<script>
// Out Of Box Experience
(function($){
$(document).ready(function() {
var consent = localStorage.getItem('setup');
if(consent != 'true'){
$('#cookie').fadeIn();
confetti.start()
}
$('#cookie-ok').click(function(event){
$('#cookie').fadeOut();
confetti.stop()
window.location.replace("./src/pages/setup.html");
});
});
})(jQuery);
</script>
</script>
<script src="./lib/confetti.min.js"></script>
<link rel="icon" href="snailfm.png">
<script src="./src/js/YoutubeJS/video.js"></script>
<link href="./src/js/YoutubeJS/video-js.css" rel="stylesheet">
<script src="./src/js/YoutubeJS/Youtube.js"></script>
<link rel="stylesheet" href="https://cdn.snaildos.com/w3.css">
<link rel="stylesheet" href="https://cdn.snaildos.com/bootstrap.min.css">
<script src="https://cdn.snaildos.com/bootstrap.min.js"></script>
<title>StreamBop</title>
<style>
html, body {
user-select: none;
width: 100%;
height:100%;
position: relative;
}
.center { margin: 0 auto; width: 400px; }
h1 {
color: black;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.inline {
display: inline-block;
text-align: center !important;
float: left;
margin-right: 4%; width: 46%;
}
.range {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
border: 2px solid black;
padding: 10px;
border-radius: 25px;
margin-top: 10px;
transform: translate(-50%, -50%);
}
.sidebar {
height: 100%;
width: 250px !important;
max-width: 250px;
color: black;
overflow-x: hidden;
background: transparent;
color: black;
float: left;
}
.sidebarcont {
position: relative;
width: 249px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0 auto;
background: transparent;
color: black;
}
body {
background-size: 400% 400%;
box-sizing: border-box;
overflow: hidden;
font-family: sans-serif;
text-align: center;
background: transparent;
color: rgba(255, 255, 255, 0.5);
margin: auto;
}
.container {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
.content {
background-color: #000000;
height: 90%;
margin-left: 250px !important;
margin:0px auto;
z-index: 2;
padding: 0px 10px;
margin-left: 15%;
margin-right: 2%;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
#notification {
position: fixed;
bottom: 20px;
left: 20px;
width: 200px;
padding: 20px;
border-radius: 5px;
background-color: grey;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
#containermixer{
margin: 0;
width: 300px;
padding-top: 10px;
margin-left: auto;
margin-right: auto;
}
.hidden {
display: none;
}
.sysvolume{
width: 150px;
height: 170px;
float: left;
}
.streamvolume{
width: 150px;
height: 170px;
float: right;
}
input.vertical {
writing-mode: bt-lr;
}
.video-stream html5-main-video {
display: none;
}
.hiddentext {
text-indent: -9999px;
}
.settings {
position: absolute;
bottom: 36px;
right: 20px;
font-size: 18px;
}
.set {
z-index: -1
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #000000;
display: block;
transition: 0.3s;
}
[type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
[type=radio] + img {
cursor: pointer;
}
[type=radio]:checked + img {
outline: 5px solid rgb(25, 0, 255);
}
.sidenav a:hover {
color: #f1f1f1;
}
.white {
color: rgb(255, 255, 255);
}
.custom {
z-index: 0;
}
.customred {
color: #9E1049;
background: #9E1049;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 20px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.nowplay {
font-size: 25px;
}
.sus {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
overflow: auto;
background: #000000;
}
.black {
color: black;
}
#cookie{
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
.fga {
margin: auto;
margin: 10px;
}
hr.dashed {
border-top: 3px dashed #bbb;
}
.content {
margin-top: 35px;
}
.sidebar {
background-color: grey;
opacity: 0.4 !important;
border-radius: 10px;
}
hr.dotted {
border-top: 3px dotted #bbb;
}
p,h1,h2,h3,h4,h5,h6,b {
color: white;
}
hr.solid {
border-top: 3px solid #bbb;
}
hr.rounded {
border-top: 8px solid #bbb;
border-radius: 5px;
}
button {
color: black;
}
</style>
<script>
const Store = require('electron-store');
const config = new Store();
config.set('on', false)
config.set("setupan", false);
</script>
<video
id="vid1"
class="hidden"
width="0" height="0"
data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=PfK213zXvvU"}] }'
>
</video>
<script>
async function init() {
axios.get('http://api.snaildos.com/radio').then((value) => {
config.set('url', value.data.url)
var url = config.get("url")
player.src({ type: 'video/youtube', src: url });
player.load()
player.play()
$("#4").show()
})};
init()
</script>
<script>
videojs("vid1", {
controlBar: {
fullscreenToggle: false
}
});
var player = videojs('vid1');
function arel() {
document.getElementById('id01').style.display='block'
}
</script>
<script>
var contvar = 3
function strtcont() {
var timeleft = 10;
var downloadTimer = setInterval(function(){
if(timeleft <= 0){
clearInterval(downloadTimer);
contvar.innerHTML = "Loaded!";
} else {
contvar.innerHTML = timeleft + " load time remaining...";
}
timeleft -= 1;
}, 1000);
}
</script>
<script>
$(document).ready(function() {
setTimeout(function(){
$('.nt4').hide()
$('.custom').slideToggle(2)
$('.nt3').hide()
$('.isstrm').slideToggle(100)
$('.button').slideToggle(100)
ipcRenderer.send('strm.hide')
ipcRenderer.send('strm.reload')
config.set('setupan', false)
$('#set').slideUp(1)
$('.button').slideToggle(100)
settingsload()
}, 1500);
setTimeout(function(){
$('.streaming').slideUp(100)
},800);
setTimeout(function(){
$('.sus').slideToggle(2000)
},800);
});
</script>
<script>
const loudness = require('mwl-loudness')
function streaming() {
$('.1').hide()
$('.welcome').slideToggle(1000)
$('.streaming').slideDown(1000)
}
function reload() {
location.reload();
}
function startstream() {
console.log("Prepare")
ipcRenderer.send('strm');
$('.nt3').show()
$('.streaming').slideUp(100)
$('.isstrm').slideToggle(1000)
}
function strmstart32() {
ipcRenderer.send('strm.start');
player.play()
$('.nt3').hide()
$('.nt4').show()
strtcont()
}
function strmstop32() {
ipcRenderer.send('strm.stop');
player.pause()
$('.nt3').show()
$('.nt4').hide()
clearInterval(downloadTimer);
}
function updateTextInput(val) {
document.getElementById('textInput').value=val;
player.volume(val / 100)
}
function UpdateSystemvolume(val) {
var volset = false
document.getElementById('systemvol').value=val;
loudness.setVolume(val)
var volset = true
}
function setup34() {
player.pause()
$('.nt3').hide()
$('.set').show()
$('.nt4').hide()
$('.isstrm').slideUp(4)
ipcRenderer.send('strm.setup');
$('.set').show()
$('.set').slideDown(1)
}
// Music Caching System
setInterval(()=>{
axios.get('http://api.snaildos.com/radio').then((value) => {
np3 = value.data.playing
name = value.data.playing
})
console.log(name)
config.set('song', name)
}, 4000);
function storenam() {
var username = $('#name').val();
config.set("name", username);
$("#cookie-ok").click()
return false;
}
function costume() {
console.log("Customizer init...")
$('.streaming').fadeOut(1)
$('.custom').fadeIn(1)
}
function savetheme() {
if (document.getElementById('fire').checked) {
document.getElementById("disp").innerHTML = "Fire theme set.";
config.set("theme", "fire")
console.log("Saved.")
} else if (document.getElementById('blue').checked) {
document.getElementById("disp").innerHTML = "Blue theme set.";
config.set("theme", "blue")
console.log("Saved.")
} else if(document.getElementById('yellow').checked) {
document.getElementById("disp").innerHTML = "Yellow theme set.";
config.set("theme", "yellow")
console.log("Saved.")
} else {
document.getElementById("disp").innerHTML = "Can't save, none selected!";
console.log("Saved.")
}
}
</script>
</head>
<body>
<header data-for-os="windows" id="titlebar" class="titlebar" style="z-index: 400 !important;">
<div id="window-controls">
<div onclick="ipcRenderer.send('minimize')" class="button" id="min-button"><img class="icon" srcset="./icons/titlebar/min-w-10.png 1x, ./icons/titlebar/min-w-12.png 1.25x, ./icons/titlebar/min-w-15.png 1.5x, ./icons/titlebar/min-w-15.png 1.75x, ./icons/titlebar/min-w-20.png 2x, ./icons/titlebar/min-w-20.png 2.25x, ./icons/titlebar/min-w-24.png 2.5x, ./icons/titlebar/min-w-30.png 3x, ./icons/titlebar/min-w-30.png 3.5x" draggable="false" /></div>
<div onclick="ipcRenderer.send('close')" class="button" id="close-button"><img class="icon" srcset="./icons/titlebar/close-w-10.png 1x, ./icons/titlebar/close-w-12.png 1.25x, ./icons/titlebar/close-w-15.png 1.5x, ./icons/titlebar/close-w-15.png 1.75x, ./icons/titlebar/close-w-20.png 2x, ./icons/titlebar/close-w-20.png 2.25x, ./icons/titlebar/close-w-24.png 2.5x, ./icons/titlebar/close-w-30.png 3x, ./icons/titlebar/close-w-30.png 3.5x" draggable="false" /></div>
</div>
</header>
<div id="sus" class="sus"><h1>Loading...</h1></div>
<div class="sidebar">
<div class="sidebarcont">
<div class="welcome">
<h2 class="w3-center textglos white">What are we doing today?</h2>
<div>
<button class="w3-center w3-button customred w3-round-xlarge 1" onclick="streaming()"><h1 class="white">Streaming</h1></button>
<button class="w3-center w3-button customred w3-round-xlarge 1 hidden"><h1 class="white">Coming Soon...</h1></button>
</div>
</div>
<div class="streaming">
<button class="w3-center w3-button customred w3-round-xlarge 2" onclick="startstream()"><h3>Start Music</h3></button>
<br>
<br>
<button class="w3-center w3-button customred w3-round-xlarge 2" onclick="costume()"><h3>Customize</h3></button>
</div>
<div class="isstrm">
<button class="w3-center w3-button customred w3-round-xlarge nt3" onclick="strmstart32()"><h3>Start</h3></button>
<br>
<br>
<button class="w3-center w3-button customred w3-round-xlarge nt3" onclick="reload()"><h3>Main Menu!</h3></button>
<br>
<button class="w3-center w3-button customred w3-round-xlarge nt4" onclick="strmstop32()"><h3>Stop</h3></button>
<br>
<button class="w3-center w3-button customred w3-round-xlarge nt3" onclick="setup34()"><h3>Setup</h3></button>
</div>
</div>
</div>
<div class="content">
<h1 class="hidden">h</h1>
<div id="cookie">
<div id="cookie-wrapper">
<div id="cookie-content" class="h1">Welcome to StreamBop!</div>
<p></p>
<br>
<h1>Enter your channel username below</h1>
<p></p>
<h2>
<h>Press enter when complete.</h>
<br>
<p></p>
</p><form class="" onsubmit="storenam(); return false;">
<input class="name" style="background-color: rgb(41, 41, 41);" id="name" name="name" type="name" maxlength="16" id="email" required="true" placeholder="" />
</form>
</h2>
<button class="hidden" id="cookie-ok">Complete!</button>
</div>
</div>
<button type="button" class="settings w3-round-xxlarge w3-button w3-white" onclick="arel()" data-target="#myModal">Settings</button>
<div class="welcome">
<svg width="328" height="63" viewBox="0 0 328 63" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-top: 30px;">
<path d="M28.75 34.8438C28.75 38.8646 27.2916 42 24.375 44.25C21.4583 46.5 17.5 47.625 12.5 47.625C7.08335 47.625 2.91667 46.9271 0 45.5312V40.4062C1.875 41.1979 3.91667 41.8229 6.125 42.2812C8.33335 42.7396 10.5209 42.9688 12.6875 42.9688C16.2292 42.9688 18.8959 42.3021 20.6875 40.9688C22.4792 39.6146 23.375 37.7396 23.375 35.3438C23.375 33.7604 23.052 32.4688 22.4062 31.4688C21.7812 30.4479 20.7188 29.5104 19.2188 28.6562C17.7395 27.8021 15.4792 26.8333 12.4375 25.75C8.18745 24.2292 5.14583 22.4271 3.3125 20.3438C1.5 18.2604 0.59375 15.5417 0.59375 12.1875C0.59375 8.6667 1.91667 5.8646 4.5625 3.7812C7.20835 1.6979 10.7084 0.6562 15.0625 0.6562C19.6042 0.6562 23.7812 1.4896 27.5938 3.1562L25.9375 7.7812C22.1667 6.1979 18.5 5.4062 14.9375 5.4062C12.1251 5.4062 9.92705 6.0104 8.34375 7.2188C6.76045 8.4271 5.96875 10.1042 5.96875 12.25C5.96875 13.8333 6.26042 15.1354 6.84375 16.1562C7.42705 17.1562 8.40625 18.0833 9.78125 18.9375C11.177 19.7708 13.302 20.6979 16.1562 21.7188C20.948 23.4271 24.2395 25.2604 26.0312 27.2188C27.8438 29.1771 28.75 31.7188 28.75 34.8438ZM48.375 43.3438C49.2916 43.3438 50.1771 43.2812 51.0312 43.1562C51.8854 43.0104 52.5625 42.8646 53.0625 42.7188V46.6875C52.5 46.9583 51.6666 47.1771 50.5625 47.3438C49.4791 47.5312 48.5 47.625 47.625 47.625C41 47.625 37.6875 44.1354 37.6875 37.1562V16.7812H32.7812V14.2812L37.6875 12.125L39.875 4.8125H42.875V12.75H52.8125V16.7812H42.875V36.9375C42.875 39 43.3646 40.5833 44.3438 41.6875C45.3229 42.7917 46.6666 43.3438 48.375 43.3438ZM75.5624 12.125C77.0833 12.125 78.448 12.25 79.6562 12.5L78.9374 17.3125C77.5208 17 76.2708 16.8438 75.1874 16.8438C72.4166 16.8438 70.0416 17.9688 68.0624 20.2188C66.1041 22.4688 65.1251 25.2708 65.1251 28.625V47H59.9375V12.75H64.2188L64.8124 19.0938H65.0624C66.3333 16.8646 67.8645 15.1458 69.6562 13.9375C71.448 12.7292 73.4166 12.125 75.5624 12.125ZM100.531 47.625C95.4688 47.625 91.4688 46.0833 88.5312 43C85.6145 39.9167 84.1562 35.6354 84.1562 30.1562C84.1562 24.6354 85.5105 20.25 88.2188 17C90.948 13.75 94.6041 12.125 99.1872 12.125C103.479 12.125 106.875 13.5417 109.375 16.375C111.875 19.1875 113.125 22.9062 113.125 27.5312V30.8125H89.5312C89.6355 34.8333 90.6458 37.8854 92.5624 39.9688C94.5 42.0521 97.2182 43.0938 100.718 43.0938C104.406 43.0938 108.052 42.3229 111.656 40.7812V45.4062C109.823 46.1979 108.083 46.7604 106.437 47.0938C104.812 47.4479 102.844 47.625 100.531 47.625ZM99.1253 16.4688C96.3751 16.4688 94.177 17.3646 92.5312 19.1562C90.9062 20.9479 89.948 23.4271 89.6562 26.5938H107.562C107.562 23.3229 106.833 20.8229 105.375 19.0938C103.916 17.3438 101.833 16.4688 99.1253 16.4688ZM143.062 47L142.031 42.125H141.781C140.073 44.2708 138.364 45.7292 136.656 46.5C134.968 47.25 132.854 47.625 130.312 47.625C126.916 47.625 124.25 46.75 122.312 45C120.396 43.25 119.437 40.7604 119.437 37.5312C119.437 30.6146 124.968 26.9896 136.031 26.6562L141.844 26.4688V24.3438C141.844 21.6562 141.26 19.6771 140.094 18.4062C138.948 17.1146 137.104 16.4688 134.562 16.4688C131.708 16.4688 128.479 17.3438 124.875 19.0938L123.281 15.125C124.968 14.2083 126.812 13.4896 128.812 12.9688C130.833 12.4479 132.854 12.1875 134.875 12.1875C138.958 12.1875 141.979 13.0938 143.937 14.9062C145.916 16.7188 146.906 19.625 146.906 23.625V47H143.062ZM131.344 43.3438C134.573 43.3438 137.104 42.4583 138.937 40.6875C140.791 38.9167 141.718 36.4375 141.718 33.25V30.1562L136.531 30.375C132.406 30.5208 129.427 31.1667 127.594 32.3125C125.781 33.4375 124.875 35.1979 124.875 37.5938C124.875 39.4688 125.437 40.8958 126.562 41.875C127.708 42.8542 129.302 43.3438 131.344 43.3438ZM201.281 47V24.7188C201.281 21.9896 200.698 19.9479 199.531 18.5938C198.364 17.2188 196.552 16.5312 194.094 16.5312C190.864 16.5312 188.479 17.4583 186.937 19.3125C185.396 21.1667 184.625 24.0208 184.625 27.875V47H179.437V24.7188C179.437 21.9896 178.854 19.9479 177.687 18.5938C176.521 17.2188 174.698 16.5312 172.218 16.5312C168.968 16.5312 166.583 17.5104 165.062 19.4688C163.562 21.4062 162.812 24.5938 162.812 29.0312V47H157.625V12.75H161.844L162.687 17.4375H162.937C163.916 15.7708 165.291 14.4688 167.062 13.5312C168.854 12.5938 170.854 12.125 173.062 12.125C178.416 12.125 181.916 14.0625 183.562 17.9375H183.812C184.833 16.1458 186.312 14.7292 188.25 13.6875C190.187 12.6458 192.396 12.125 194.875 12.125C198.75 12.125 201.646 13.125 203.562 15.125C205.5 17.1042 206.468 20.2812 206.468 24.6562V47H201.281ZM217.968 1.3125H230.875C236.937 1.3125 241.323 2.2188 244.031 4.0312C246.739 5.8438 248.094 8.7083 248.094 12.625C248.094 15.3333 247.333 17.5729 245.812 19.3438C244.312 21.0938 242.114 22.2292 239.218 22.75V23.0625C246.156 24.25 249.625 27.8958 249.625 34C249.625 38.0833 248.239 41.2708 245.468 43.5625C242.718 45.8542 238.864 47 233.906 47H217.968V1.3125ZM223.281 20.875H232.031C235.781 20.875 238.479 20.2917 240.125 19.125C241.771 17.9375 242.594 15.9479 242.594 13.1562C242.594 10.5938 241.677 8.75 239.844 7.625C238.01 6.4792 235.094 5.9062 231.094 5.9062H223.281V20.875ZM223.281 25.375V42.4688H232.812C236.5 42.4688 239.271 41.7604 241.125 40.3438C243 38.9062 243.937 36.6667 243.937 33.625C243.937 30.7917 242.979 28.7083 241.062 27.375C239.166 26.0417 236.271 25.375 232.375 25.375H223.281ZM288.25 29.8438C288.25 35.4271 286.844 39.7917 284.031 42.9375C281.218 46.0625 277.333 47.625 272.375 47.625C269.312 47.625 266.594 46.9062 264.218 45.4688C261.844 44.0312 260.01 41.9688 258.718 39.2812C257.427 36.5938 256.781 33.4479 256.781 29.8438C256.781 24.2604 258.177 19.9167 260.968 16.8125C263.76 13.6875 267.635 12.125 272.594 12.125C277.385 12.125 281.187 13.7188 284 16.9062C286.833 20.0938 288.25 24.4062 288.25 29.8438ZM262.156 29.8438C262.156 34.2188 263.031 37.5521 264.781 39.8438C266.531 42.1354 269.104 43.2812 272.5 43.2812C275.896 43.2812 278.468 42.1458 280.218 39.875C281.989 37.5833 282.875 34.2396 282.875 29.8438C282.875 25.4896 281.989 22.1875 280.218 19.9375C278.468 17.6667 275.875 16.5312 272.437 16.5312C269.041 16.5312 266.479 17.6458 264.75 19.875C263.021 22.1042 262.156 25.4271 262.156 29.8438ZM313.312 47.625C311.083 47.625 309.041 47.2188 307.187 46.4062C305.354 45.5729 303.812 44.3021 302.562 42.5938H302.187C302.437 44.5938 302.562 46.4896 302.562 48.2812V62.375H297.375V12.75H301.594L302.312 17.4375H302.562C303.896 15.5625 305.448 14.2083 307.218 13.375C308.989 12.5417 311.021 12.125 313.312 12.125C317.854 12.125 321.354 13.6771 323.812 16.7812C326.291 19.8854 327.531 24.2396 327.531 29.8438C327.531 35.4688 326.271 39.8438 323.75 42.9688C321.25 46.0729 317.771 47.625 313.312 47.625ZM312.562 16.5312C309.062 16.5312 306.531 17.5 304.968 19.4375C303.406 21.375 302.604 24.4583 302.562 28.6875V29.8438C302.562 34.6562 303.364 38.1042 304.968 40.1875C306.573 42.25 309.146 43.2812 312.687 43.2812C315.646 43.2812 317.958 42.0833 319.625 39.6875C321.312 37.2917 322.156 33.9896 322.156 29.7812C322.156 25.5104 321.312 22.2396 319.625 19.9688C317.958 17.6771 315.604 16.5312 312.562 16.5312Z" fill="url(#paint0_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="-3.59375" y1="66" x2="331.406" y2="66" gradientUnits="userSpaceOnUse">
<stop stop-color="#AD00FF"/>
<stop offset="1" stop-color="#00FFC2"/>
</linearGradient>
</defs>
</svg>
<h4>Powered by <b>SnailDOS</b> team</h4>
<p id="version"></p>
</div>
<div id="streaming" class="streaming">
<h1>Welcome to the streaming panel!</h1>
</div>
<Script>
// toggle always on
function toggle(button) {
if (button.value == "OFF") {
button.value = "OFF";
alert("Enabled Always on!")
config.set("alwayson", true)
document.getElementById("alwaysonid").innerHTML = "Always ON is currently ON.";
} else {
button.value = "ON";
alert("Disabled Always on!")
config.set("alwayson", false)
document.getElementById("alwaysonid").innerHTML = "Always ON is currently off.";
}
}
</Script>
<div id="custom" class="custom w3-center" style="text-align: center;-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none; transform: scale(0.87);-webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none; transform: scale(0.87);transform-origin: 0% 0% 0px;z-index: 0;"
unselectable="on"
onselectstart="return false;">
<h1 class="w3-center">Welcome to the customizer!</h1>
<hr class="rounded">
<centered>
<label>
<input type="radio" name="test" value="Fire" id="fire">
<img src="./src/ui/1.png" width="120" height="100" class="fga">
</label>
<label>
<input type="radio" name="test" value="Blue" id="blue">
<img src="./src/ui/2.png" width="120" height="100" class="fga">
</label>
<label>
<input type="radio" name="test" value="Yellow" id="yellow">
<img src="./src/ui/3.png" width="120" height="100" class="fga">
</label>
<div id="disp" style="color:yellow; font-size: 18px; font-weight: bold;"> Please select what theme you want!</div>
<button class="w3-button w3-white w3-round-xlarge" onclick="savetheme()">Save Theme</button>
<p>
<hr class="rounded">
<h1 class="w3-center">Always ON</h1>
<p class="w3-center">Always on disables all animation and shows the current song playing at ALL times...</p>
<form action="">
<input class="w3-button w3-white w3-round-xlarge" type="button" id="3" value="ON" style="color:blue"
onclick="toggle(this);">
</form>
<div id="alwaysonid" style="color:yellow; font-size: 18px; font-weight: bold;">Settings cant be read.</div>
<hr class="rounded">
<h1 class="w3-center">Orientation</h1>
<form action="">
<input class="w3-button w3-white w3-round-xlarge" type="button" id="143" value="Left" style="color:blue"
onclick="toggleori(this);">
</form>
<div id="orid" style="color:yellow; font-size: 18px; font-weight: bold;">Settings cant be read.</div>
</p></p>
<h1 class="hidden hide">h</h1>
<hr class="rounded">
<button class="w3-center w3-white w3-button w3-round-xlarge" onclick="location.reload()">Exit Customization!</button>
</centered>
<script>
// Toggle Orientation
function toggleori(button) {
if (button.value == "Right") {
button.value = "Right";
config.set("ori", "Right")
document.getElementById("orid").innerHTML
= "Orientation set to Right";
$("#143").prop('value', 'Left');
alert("Orientation is set to Right.")
} else {
button.value = "Left";
config.set("ori", "left")
document.getElementById("orid").innerHTML
= "Orientation is set to Left.";
$("#143").prop('value', 'Right');
alert("Orientation is set to Left.")
}
}
</script>
<script>
// Initial Settings Load
function settingsload() {
if (config.get("theme") == "fire") {
$("#fire").prop("checked", true);
document.getElementById("disp").innerHTML = "Fire theme currently set.";
}
if (config.get("theme") == "blue") {
$("#blue").prop("checked", true);
document.getElementById("disp").innerHTML = "Blue theme currently set.";
}
if (config.get("theme") == "yellow") {
$("#yellow").prop("checked", true);
document.getElementById("disp").innerHTML = "Yellow theme currently set.";
}
if (config.get("alwayson") == "on") {
$("#3").prop('value', 'OFF');
document.getElementById("alwaysonid").innerHTML = "Always ON is currently on.";
} else {
document.getElementById("alwaysonid").innerHTML = "Always ON is currently off.";
}
if (config.get("ori") == "Right") {
$("#143").prop('value', 'Left');
document.getElementById("orid").innerHTML = "Orientation is on Right.";
} else {
document.getElementById("orid").innerHTML = "Orientation is on Left.";
}
}
</script>
</div>
<div id="set" class="set">
<h1>Welcome!</h1>
<p></p>
<p class="white">
Let's setup StreamBop,
First, create a window capture in OBS, and select "StreamBop Viewer!"
After doing that, you will want to press filters, Color key, then select magenta and adjust the similarity to your preference.
Once complete, apply the changes, and move the StreamBop window, into the sides or corners of the screen. When complete, press done.
The setup can be viewed anytime you want.
</p>
<button class="w3-button w3-white w3-round-xlarge" onclick="reload()">Done</button>
</p>
<p>
<button class="w3-center w3-button customred w3-roundxlarge nt3" onclick="strmstart32()"><h3>Start</h3></button>
</button>
</div>
<div id="isstrm" class="isstrm">
<h1>Welcome to the streaming panel!</h1>
<p>
Welcome to the streaming panel.
Please create a application monitor in your software and select "Stream Bop Visualizer!"
Once created, add a filter for "green screen"
Once done, press "start" here.
</p>
<h1 class="hidden">h</h1>
<p id='nowPlaying' class="w3-center nowplay">Fetching data...</p>
<script>
setInterval(()=>{
document.getElementById('nowPlaying').innerText = config.get('song') || 'Nothing'
},5000);
</script>
<h1 class="hidden">h</h1>
<p></p>
<h1 class="hidden">h</h1>
<b>Software takes 10 seconds to load...
ETA startup time:</b>
<h2><div id="countdown"></div></h2>
<script>
var volset = true
var contvar = document.getElementById("countdown")
async function changeVolumeToCurrent() {
if (volset == true) {
var vol = await loudness.getVolume()
document.getElementById("sysvolbar").value = vol;
document.getElementById("systemvol").value = vol;
}
}
</script>
<p></p>
<h3 class="w3-center">Mixer</h3>
<div class="w3-center mixer" id="containermixer">
<div class="w3-center streamvolume">
<input class="vertical" type="range" name="rangeInput" class="fader" min="0" max="100" oninput="updateTextInput(this.value);" id="volu23"></input>
<input type="text" id="textInput" style="font-size:10px;" class="w3-black mixerdialogue w3-round-xlarge" value="Drag Slider!" readonly unselectable="on" onselectstart="return false;" onmousedown="return false;"></input>
<b>(%) Music Volume</b>
<p>
</div>
<div class="w3-center sysvolume">
<input class="vertical" type="range" name="rangeInput" class="fader" min="1" max="100" oninput="UpdateSystemvolume(this.value);" id="sysvolbar"></input>
<input type="text" style="font-size:10px;" id="systemvol" class="w3-black mixerdialogue w3-round-xlarge" value="Drag Slider!" readonly unselectable="on" onselectstart="return false;" onmousedown="return false;"></input>
<b>(%) System Volume!</b>
</div>
</div>
</div>
</div>
<script>
// Mixer Presets
// Refresher
setInterval(changeVolumeToCurrent, 3000);
// Original Mixer Preset
changeVolumeToCurrent()
player.volume(1)
document.getElementById('volu23').value="100"
document.getElementById('textInput').value=100;
</script>
<div id="notification" class="hidden">
<p id="message"></p>
<button id="close-button" onClick="closeNotification()">
Close
</button>
<button id="restart-button" onClick="restartApp()" class="hidden">
Restart
</button>
</div>
<script>
const version = document.getElementById('version');
const notification = document.getElementById('notification');
const message = document.getElementById('message');
const restartButton = document.getElementById('restart-button');
ipcRenderer.send('app_version');
ipcRenderer.on('app_version', (event, arg) => {
ipcRenderer.removeAllListeners('app_version');
version.innerText = 'Version ' + arg.version;
});
ipcRenderer.on('update_available', () => {
ipcRenderer.removeAllListeners('update_available');
message.innerText = 'A new update is available. Downloading now...';
notification.classList.remove('hidden');
});
ipcRenderer.on('update_downloaded', () => {
ipcRenderer.removeAllListeners('update_downloaded');
message.innerText = 'Update Downloaded. It will be installed on restart. Restart now?';
restartButton.classList.remove('hidden');
notification.classList.remove('hidden');
});
function closeNotification() {
notification.classList.add('hidden');
}
function restartApp() {
ipcRenderer.send('restart_app');
}
</script>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="myaccount.html">My Account</a>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
$('#myNav').modal('show');
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
$('#myNav').modal('hide');
}
</script>
<div id="id01" class="w3-modal w3-round">
<div class="w3-modal-content w3-round" style="background-color: rgb(70, 70, 70);">
<div class="w3-container w3-round" style="background-color: rgb(70, 70, 70);">
<button type="button" style="color: rgb(255, 115, 0);" class="close" onclick="document.getElementById('id01').style.display='none'">×</button>
<h4 class="modal-title"><h2>StreamBop Settings</h2></h4>
</div>
<div class="modal-body w3-round" style="background-color: rgb(70, 70, 70);">
<h4>Please click what settings you want to change.</h4>
<h4>If you don't want to change StreamBop settings, press the "More Settings" to change Account settings, encoder settings, and more.</h4>
<span class="hiddentext" style="font-size:20px;cursor:pointer;color:red;display:none;" onclick="openNav()">☰ More settings</span>
<button onclick="window.location.reload();" class="w3-btn w3-black w3-round">Reload</button>
<p></p>
<a style="font-size:20px;cursor:pointer;color:red" href="./src/pages/reset.html">☰ Reset StreamBop</a>
</div>
</div>
</div>
</div>
<h1 class="hiddentext">
hi
</h1>
</div>
</body>
</html>