Skip to content

Commit 52fa40d

Browse files
FiszhFiszh
authored
Visual Refresh and Fixes
EVERYTHING HAS BEEN COPIED FROM ALL DEV COMMITS 1. Fixed mentions not having blank tooltip 2. Added forgotten credits 3. Fixed event.js giving errors on pages without follow list 4. Made sure the code will always load newest emoji data 5. Added context menu to messages and emotes 6. Fixed bits having blank tooltip 7. Changed "Personal Emotes" tooltip to include "7TV" 8. Fixed no title on mobile being no category 9. If there is no title/category on the homepage now it's going to display "No Title/Category" 10. Made scrollbar more visible 11. Fixed an issue that didn't add user paint if their 7TV badge was already added to the cosmetic data 12. Added display ratio to Twitch embed css to prevent black bars 13. Long usernames now do not break follow list 14. Fixed some settings only working on new messages 15. Fixed topbar sometimes overlapping over the site 16. Updated credits with user id PC VISUAL REFRESH 1. Completely changed the site look 2. Channel now has their own CSS file 3. Follow list will no longer display the thumbnail when hovered over 4. Combo should now work way better 5. Readded send button 6. Message label has been changed into border-left instead of an actual HTML element 7. Removed reload button 8. Fixed usercard breaking when localized name had _ in them 9. Added image placeholders provider to the credits 10. Added popups on the top of the site 11. Homepage now has top 4 global Twitch streams 12. Homepage now has a way better way to display login to see the homepage information 13. Tooltips will now not appear if there is a context menu on screen 14. Fixed context menu copy message function copying emojis as the name instead of the actual emojis 15. Follow list now tells you to log in to see the follow list instead of only being blank 16. Added shared chats badge 17. Added a notification if theatre mode gets enabled/disabled 18. Updated popup notification time 19. Context menu is now slightly changed 20. Old files have been moved to the oldFiles folder MOBILE VISUAL REFRESH 1. Every mobile page has been moved into desktop 2. Added word break to settings due to overflow 3. Keybinds no longer appear in mobile UI settings 4. Mobile UI homepage no longer shortens the stream title via js 5. Mobile UI has the name shorter on the topbar 6. Tried fixing up the left and right swipe detection 7. Mobile now should not refresh just because user minimized the browser for even a second
2 parents 8c53ca4 + 86f9650 commit 52fa40d

39 files changed

Lines changed: 4072 additions & 2000 deletions

‎badges/SHAREDCHAT.png‎

29.5 KB
Loading

‎imgs/search_button.png‎

20.5 KB
Loading

‎imgs/send_icon.png‎

6.2 KB
Loading

pages/channel -old.html renamed to oldFiles/pages/channelV1.html

File renamed without changes.

‎oldFiles/pages/channelV2.html‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>YAUTC</title>
7+
<link rel="icon" href="imgs/favicon.png" type="image/png">
8+
<link rel="stylesheet" type="text/css" href="styles/styles.css">
9+
<link rel="stylesheet" type="text/css" href="styles/settings.css">
10+
<link rel="stylesheet" type="text/css" href="styles/contextMenu.css">
11+
12+
<style>
13+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
14+
</style>
15+
16+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
17+
<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji" rel="stylesheet">
18+
<link href="https://fonts.googleapis.com/css2?family=Amiri&display=swap" rel="stylesheet">
19+
</head>
20+
21+
<body>
22+
<div id="emote-picker-0">
23+
<div id="header">Emote Picker</div>
24+
<div id="content">This is the window content.</div>
25+
</div>
26+
27+
<div class="debug-window">
28+
<div class="debug-title">Debug Window</div>
29+
<div class="debug-part" id="debug-name"></div>
30+
</div>
31+
32+
<div id="user-card" class="draggable" style="display: none;">
33+
<button class="pin-button">
34+
<img class="pin-icon" src="imgs/pin.png" alt="Pin">
35+
</button>
36+
<div class="header">
37+
<div class="avatar-container">
38+
<img class="user-avatar" draggable="false" (dragstart)="false;" src="imgs/user_avatar.png">
39+
<button class="show-avatar-btn" style="display: none;">Show Twitch</button>
40+
</div>
41+
<div class="user-info">Loading userinfo...</div>
42+
</div>
43+
</div>
44+
45+
<div id="settings"></div>
46+
47+
<div id="frame" style="display: none;">
48+
<div id="tooltip-title" class="text"></div>
49+
<img id="frame-img" src="" alt="Image">
50+
<div id="tooltip-name" class="text"></div>
51+
<div id="tooltip-type" class="text"></div>
52+
<div id="tooltip-creator" class="text"></div>
53+
</div>
54+
55+
<div class="topbar">
56+
<a class="logo_container" href="https://fiszh.github.io/YAUTC/" style="text-decoration: none;">
57+
<img class="site_logo" src="imgs/logo.png" alt="Site Logo">
58+
<span class="site_name">YAUTC</span>
59+
</a>
60+
61+
<a href="https://www.twitch.tv/" class="unaffiliated">
62+
YetAnotherUselessTwitchChat (YAUTC) is not affiliated with Twitch Interactive
63+
</a>
64+
65+
<div class="user_container">
66+
<img class="user_avatar" src="imgs/user_avatar.png">
67+
<div class="dropdown-content" id="dropdown">
68+
<a id="settings-button">Settings</a>
69+
<a id="topbar-button0">DevMode</a>
70+
</div>
71+
</div>
72+
</div>
73+
74+
<div class="site_container">
75+
<div class="follow_list"></div>
76+
77+
<div class="stream_container">
78+
<div id="twitch-embed">Refresh if you don't see the player.</div>
79+
80+
<div class="stream_info">
81+
<img src="imgs/user_avatar.png" alt="Streamer Avatar" class="stream_avatar">
82+
83+
<div class="stream_context">
84+
<div class="stream_username">stream_username</div>
85+
<div class="stream_title">stream_title</div>
86+
<div class="stream_category">stream_category</div>
87+
</div>
88+
89+
<div class="stream_stats">
90+
<img src="imgs/viewers.png">
91+
<div class="stream_viewers">0</div>
92+
<img src="imgs/clock.png">
93+
<div class="stream_time">00:00:00</div>
94+
</div>
95+
</div>
96+
</div>
97+
98+
<div class="chat_container">
99+
<div id="display" class="display">
100+
<div id="ComboDisplay" class="combo-messages"></div>
101+
102+
<div id="ChatDisplay" class="chat-messages"></div>
103+
104+
<div id="EmotePicker" class="emote-picker">
105+
</div>
106+
107+
<div id="Emote_autocompletion"></div>
108+
109+
<div class="chat-reply" style="display: none;" id="chat_information">
110+
<div id="reply_info">replying to: @twitch</div>
111+
<button id="close-button">X</button>
112+
</div>
113+
114+
<div class="chat-pause" id="chat_information">
115+
</div>
116+
117+
<div class="chat-box-display">
118+
<div class="chat-box">
119+
<input type="text" id="chatInput" autocomplete="off" placeholder="Type your message...">
120+
<button id="emoteButton" style="display: none;">
121+
<img src="imgs/EmotePicker.png" alt="EmotePicker">
122+
</button>
123+
124+
<button id="chatOptionsButton">
125+
<img src="imgs/more.png" alt="More_Options">
126+
<div id="dropdownMenu" class="dropdown-menu" style="display: none;">
127+
<ul>
128+
<li>Reload</li>
129+
<li>Reconnect to chat</li>
130+
<li>Reload emotes</li>
131+
<li>Reload subcriber emotes</li>
132+
<li>Reload badges</li>
133+
<li>Toggle theatre mode</li>
134+
<li>Update 7TV cosmetics</li>
135+
</ul>
136+
</div>
137+
</button>
138+
139+
<button id="reloadButton" style="display: none;">
140+
<i class="material-icons">loop</i>
141+
</button>
142+
</div>
143+
</div>
144+
145+
<div class="chat-settings" id="chat_information">
146+
</div>
147+
</div>
148+
</div>
149+
</div>
150+
151+
<script src="src/channel/notLoggedIn.js"></script>
152+
<script src="src/twitchLogin.js"></script>
153+
<script src="src/debug.js"></script>
154+
<script src="src/gql.js"></script>
155+
<script src="src/tmi.js"></script>
156+
<script src="src/settings.js"></script>
157+
<script src="src/channel/SevenTVCosmetics.js"></script>
158+
<script src="src/channel/SevenTVHelperV2.js"></script>
159+
<script src="src/channel/combo.js"></script>
160+
<script src="src/followList.js"></script>
161+
<script src="src/channel/index.js"></script>
162+
<script src="src/events.js"></script>
163+
<script src="src/tooltip.js"></script>
164+
<script src="src/channel/emotepicker.js"></script>
165+
<script src="src/channel/userCard.js"></script>
166+
<script src="src/channel/contextMenu.js"></script>
167+
</body>
168+
169+
</html>

‎oldFiles/pages/homepageV1.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Yet Another Useless Twitch Chat</title>
7+
<link rel="stylesheet" type="text/css" href="styles/styles.css">
8+
<link rel="stylesheet" type="text/css" href="styles/homepage.css">
9+
<link rel="stylesheet" type="text/css" href="styles/settings.css">
10+
<link rel="icon" href="imgs/favicon.png" type="image/png">
11+
12+
<style>
13+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
14+
</style>
15+
</head>
16+
<body>
17+
18+
<div class="topbar">
19+
<a class="logo_container" href="https://fiszh.github.io/YAUTC/" style="text-decoration: none;">
20+
<img class="site_logo" src="imgs/logo.png" alt="Site Logo">
21+
<span class="site_name">YAUTC</span>
22+
</a>
23+
24+
<div id="search_bar">
25+
<input type="text" placeholder="SEARCH...">
26+
<button>
27+
<img src="imgs/search_button.png" alt="search">
28+
</button>
29+
</div>
30+
31+
<div class="user_container">
32+
<img class="user_avatar" src="imgs/user_avatar.png">
33+
<div class="dropdown-content" id="dropdown">
34+
<a id="settings-button">Settings</a>
35+
<a id="topbar-button0">DevMode</a>
36+
</div>
37+
</div>
38+
</div>
39+
40+
<div id="settings"></div>
41+
42+
<div class="site_container">
43+
<div id="channelTab">
44+
</div>
45+
</div>
46+
47+
<script src="src/twitchLogin.js"></script>
48+
<script src="src/settings.js"></script>
49+
<script src="src/events.js"></script>
50+
<script src="src/homepage/homepage.js"></script>
51+
</body>
52+
</html>

pages/mobile/channel.html renamed to oldFiles/pages/mobile/channel.html

File renamed without changes.

pages/mobile/homepage.html renamed to oldFiles/pages/mobile/homepage.html

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<!DOCTYPE html>
2+
23
<head>
34
<meta charset="UTF-8">
45
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,11 +8,12 @@
78
<link rel="stylesheet" type="text/css" href="styles/mobile/styles.css">
89
<link rel="stylesheet" type="text/css" href="styles/mobile/homepage.css">
910
<link rel="icon" href="imgs/favicon.png" type="image/png">
10-
11+
1112
<style>
1213
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
1314
</style>
1415
</head>
16+
1517
<body>
1618
<div class="topbar">
1719
<a class="logo_container" href="https://fiszh.github.io/YAUTC/" style="text-decoration: none;">
@@ -28,13 +30,17 @@
2830
</div>
2931
</div>
3032

33+
<h2 id="login_info">LOGIN TO SEE THE HOMEPAGE</h2>
34+
3135
<div id="settings"></div>
3236

3337
<div class="site_container">
34-
<div id="channelTab">
35-
</div>
38+
<section id="followed_streams">
39+
<h2>FOLLOWED STREAMERS</h2>
40+
<section id="followed_streams_display"></section>
41+
</section>
3642
</div>
37-
43+
3844
<script src="src/twitchLogin.js"></script>
3945
<script src="src/settings.js"></script>
4046
<script src="src/events.js"></script>

styles/followList.css renamed to oldFiles/styles/followListV1.css

File renamed without changes.

‎oldFiles/styles/homepageV1.css‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
#channelTab {
2+
width: 100%;
3+
height: 100%;
4+
overflow-x: hidden;
5+
overflow-y: auto;
6+
display: grid;
7+
column-gap: 10px;
8+
row-gap: 20px;
9+
grid-template-columns: repeat(3, 1fr);
10+
grid-auto-rows: minmax(360px, 150px);
11+
}
12+
13+
#channelInfo {
14+
position: relative;
15+
outline-color: #ff0000;
16+
outline-width: 0px;
17+
outline-style: solid;
18+
width: 100%;
19+
height: 100%;
20+
background-color: rgba(255, 255, 255, 0);
21+
box-sizing: border-box;
22+
border-radius: 6px;
23+
overflow: hidden;
24+
transition: transform 0.3s ease, box-shadow 0.3s ease;
25+
}
26+
27+
#channelInfo a {
28+
width: 100%;
29+
height: 100%;
30+
display: flex;
31+
flex-direction: column;
32+
color: white;
33+
text-decoration: none;
34+
position: relative;
35+
}
36+
37+
#channelInfo img {
38+
position: absolute;
39+
top: 0;
40+
left: 0;
41+
width: 100%;
42+
height: 100%;
43+
object-fit: cover;
44+
z-index: 1;
45+
}
46+
47+
#streamInfo {
48+
z-index: 2;
49+
width: 100%;
50+
max-height: 35%;
51+
background-color: rgba(0, 0, 0, 0.5);
52+
backdrop-filter: blur(3px);
53+
overflow: hidden;
54+
display: flex;
55+
flex-direction: column;
56+
align-items: flex-start;
57+
position: absolute;
58+
bottom: 0;
59+
left: 0;
60+
}
61+
62+
#streamInfo .name,
63+
#streamInfo .title,
64+
#streamInfo .category {
65+
width: 100%;
66+
text-align: left;
67+
flex: 1;
68+
display: flex;
69+
justify-content: flex-start;
70+
font-size: auto;
71+
margin: 5px 0;
72+
}
73+
74+
#channelInfo .viewers {
75+
z-index: 3;
76+
position: absolute;
77+
top: 2%;
78+
right: 2%;
79+
font-size: auto;
80+
text-align: right;
81+
color: white;
82+
background-color: rgba(0, 0, 0, 0.5);
83+
border-radius: 5px;
84+
padding: 5px;
85+
}
86+
87+
#channelInfo:hover {
88+
transform: scale(1.003) translateY(-1px);
89+
box-shadow: 0 15px 25px rgba(255, 255, 255, 0.03);
90+
}
91+
92+
/* search bar */
93+
94+
#search_bar {
95+
background-color: #1c1c1c;
96+
height: 3.5dvh;
97+
display: flex;
98+
width: 20dvw;
99+
border-radius: 10px;
100+
gap: 0.3em;
101+
padding: 0.3em 0.3em 0.3em 0.3em;
102+
}
103+
104+
#search_bar button {
105+
background-color: #282828;
106+
height: 100%;
107+
aspect-ratio: 1 / 1;
108+
border-radius: 5px;
109+
border: none;
110+
padding: 0;
111+
}
112+
113+
#search_bar img {
114+
object-fit: contain;
115+
height: 80%;
116+
aspect-ratio: 1 / 1;
117+
}
118+
119+
#search_bar input {
120+
background-color: #282828;
121+
border-radius: 5px;
122+
width: 100%;
123+
border: none;
124+
outline: none;
125+
padding: 0 0.5em;
126+
font-weight: bold;
127+
color: white;
128+
}

0 commit comments

Comments
 (0)