-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (128 loc) · 7.11 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
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-162125265-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-162125265-1');
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Search for and watch your favorite Twitch and YouTube live streamers all in one place, no logins required.">
<meta name="keywords" content="Twitch,YouTube,StreamE,live stream">
<title>StreamE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Sen&display=swap" rel="stylesheet">
<link rel="icon" href="./assets/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" media="screen" href="./styles/main.css">
<link rel="stylesheet" type="text/css" media="screen" href="./styles/streame.css">
<link rel="stylesheet" type="text/css" media="screen" href="./styles/search.css">
<link rel="stylesheet" type="text/css" media="screen" href="./styles/following.css">
<link rel="stylesheet" type="text/css" media="screen" href="./styles/shadow-inset.css">
<script src="./scripts/lz-string.min.js"></script>
<script src="./scripts/utils.js"></script>
</head>
<body>
<div id="container">
<div id="navbar">
<div>
<div onclick="resetPage()"><img src="./assets/streame.png"></div>
</div>
</div>
<div id="search">
<div id="openCloseFollowing" class="openClose" onclick="toggleViews(true)">
<ion-icon id="closeFollowingArrow" name="arrow-back-circle-outline" size="large"></ion-icon>
<ion-icon id="openFollowingArrow" name="arrow-forward-circle-outline" size="large" style="display: none"></ion-icon>
</div>
<div id="searchContainer">
<div class="searchBox">
<input type="search" id="searchbox" onkeyup="debouncedSearch()">
<span id="clearSearch" onclick="externalClearSearchResults()">x</span>
</div>
<div class="searchBox">
<div id="searchResults" style="display: none"></div>
</div>
</div>
<div id="openCloseChat" class="openClose" onclick="toggleViews(false, true)">
<ion-icon id="openChatBox" name="chatbox-ellipses-outline" size="large"></ion-icon>
<ion-icon id="closeChatBox" name="chatbox-outline" size="large" style="display: none"></ion-icon>
</div>
</div>
<div id="following">
<div id="followingList"></div>
<div id="clearContainer">
<button id="clearButton" onclick="clearFollowingHash()">Clear<ion-icon name="trash-outline"></ion-icon></button>
</div>
</div>
<div id="chat">
<span id="youtubeChatWarning">YouTube does not support embedding live chat into websites. Chat will open in a new window.</span>
<iframe id="chat_embed"
src=""
height="100%"
width="100%">
</iframe>
</div>
<div id="titleContent">
<h2 id="titleContentHeader"></h2>
</div>
<div id="subTitleContent">
<h4 id="subTitleContentHeader"></h4>
</div>
<div class="shadow-inset-center" id="mainContent">
<div id="textContent">
<p>
StreamE is an easy way to watch your favorite live streamers across streaming platforms like Twitch and YouTube.
Use the search bar at the top of the page to search for streamers you like, click the plus sign next to their name to follow them for watching later, and click their name to pull up their channel.
</p>
<h3>Frequently Asked Questions</h3>
<ul>
<li><h4>What are the plus (+) and minus (-) signs next to a streamer's name when searching and on the left side bar?</h4>
<ul>
<li>
The plus (+) sign adds a streamer to your following list, which is the left side bar. The minus (-) sign removes a streamer for your following list.
</li>
</ul>
</li>
<li><h4>What is my following list?</h4>
<ul>
<li>
The left side bar on the page (or below the search box on mobile view) is your following list. This is the list of streamers you're following on StreamE and is stored in your browser privately.
Your following list also appears in the URL encoded as a hash after the pound (#) sign. These URLs/hashes are shareable with friends and other people, for easy sharing of entire following lists of streamers.
Please note, this following list has no effect or relation to your personal account followings on Twitch or YouTube.
</li>
</ul>
</li>
<li><h4>What is the nasty, long string in the URL?</h4>
<ul>
<li>
As mentioned in the above question, that is your personal list of streamers you're following encoded as a hash. You can bookmark/save the URL/hash for easy access later from another PC, or for sharing your
list of favorite streamers with your friends.
</li>
</ul>
</li>
<li><h4>YouTube search results/online indicator is not working. What's wrong?</h4>
<ul>
<li>
YouTube, unfortunately, has a rather low API rate-limit per day and we're subject to hit that rate-limit at times depending on site traffic. YouTube does take requests for increases in rate limits, and we do plan to
apply for an increase if we continue to hit their API rate limit often.
</li>
</ul>
</li>
</ul>
</div>
<div id="videoContent"></div>
</div>
<div id="footer">
<div id="footerContent">
<h4>StreamE.tv © <span id="copyDate">2020</span> - <a href="#" onclick="resetPage(); return false;">FAQ</a> - <a href="https://twitter.com/rickjerrity" target="_blank">@rickjerrity</a></h4>
</div>
</div>
</div>
<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
<script src= "https://player.twitch.tv/js/embed/v1.js"></script>
<script src="./scripts/streamE.js"></script>
</body>
</html>