Skip to content

Commit

Permalink
404 and image quality
Browse files Browse the repository at this point in the history 
1. avatars now are 600x600 instead of 300x300
2. 404 no longer hosts channel page
3. channel page path has been changed from /channel_name to #/channel_name

everything before this update has been backed up in case of errors
  • Loading branch information
@Fiszh
Fiszh committed Nov 1, 2024
1 parent b029597 commit f098b08
Show file tree
Hide file tree
Showing 13 changed files with 660 additions and 440 deletions.
130 changes: 11 additions & 119 deletions 404.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,133 +3,25 @@

<head>
<meta charset="UTF-8">
<title>YAUTC</title>
<script>
var input = window.location.pathname.split('/');
var chnl = input[input.length - 1];

if (!chnl) {
chnl = "uni1g";
}

document.title = chnl + " - YAUTC";
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="imgs/favicon.png" type="image/png">
<link rel="stylesheet" type="text/css" href="styles/followList.css">
<link rel="stylesheet" type="text/css" href="styles/styles.css">
<link rel="stylesheet" type="text/css" href="styles/settings.css">
<title>Loading</title>
<link rel="stylesheet" type="text/css" href="styles/404.css">

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
</style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji" rel="stylesheet">
<!-- Include Twemoji -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/twemoji.min.js" crossorigin="anonymous"></script>
</head>

<body>
<div id="topbar">
<div id="topbar-content">
<a href="https://fiszh.github.io/YAUTC/">
<img src="imgs/favicon.png" alt="Logo" class="logo">
</a>
</div>
<div class="unaffiliated">YetAnotherUselessTwitchChat (YAUTC) is not affiliated with Twitch Interactive</div>

<div class="user_container">
<img class="user_avatar" src="imgs/user_avatar.png">
<div class="dropdown-content" id="dropdown">
<a id="settings-button">Settings</a>
<a id="topbar-button0">DevMode</a>
</div>
</div>
<div class="content">
<img src="https://cdn.7tv.app/emote/01G18VSZHG0000B31NY2K6DADK/4x.avif" alt="404_image">
<br>
<div class="information">(404) <br> Well, looks like we don't know this one.</div>
</div>

<div id="settings"></div>

<div id="frame">
<div id="tooltip-title" class="text"></div>
<img id="frame-img" src="" alt="Image">
<div id="tooltip-name" class="text"></div>
<div id="tooltip-type" class="text"></div>
<div id="tooltip-creator" class="text"></div>
</div>

<div class="container">
<div class="followList">
<div id="followed">

</div>
</div>
<div class="embed">
<div id="twitch-embed"></div>
<script src="https://player.twitch.tv/js/embed/v1.js"></script>
<script type="text/javascript">
try {
var input = window.location.pathname.split('/');
var chnl = input[input.length - 1];

if (!chnl) {
chnl = "uni1g";
}

new Twitch.Player("twitch-embed", {
width: "100%",
height: "100%",
channel: chnl,
muted: false,
quality: "1080p60",
theme: "dark",
layout: "video",
parent: "fiszh.github.io",
});
} catch (error) {
console.error(error);
}
</script>
<div class="stream-info">
<div class="stream-title">stream-title</div>
<div class="stream-viewers">0</div>
</div>
<div class="stream-info">
<div class="stream-category">stream-category</div>
<div class="stream-time">00:00:00</div>
</div>
</div>
<div id="chat" class="chat">
<div id="display" class="display">
<div id="ComboDisplay" class="combo-messages"></div>

<div id="ChatDisplay" class="chat-messages"></div>

<div id="EmotePicker" class="emote-picker">
</div>

<div class="chat-pause">
</div>

<div class="chat-box-display">
<div class="chat-box">
<input type="text" id="chatInput" placeholder="Type your message...">
<button id="reloadButton">
<i class="material-icons">loop</i>
</button>
</div>
</div>
</div>
</div>
</div>

<script src="src/gql.js"></script>
<script src="src/tmi.js"></script>
<script src="src/twitchLogin.js"></script>
<script src="src/settings.js"></script>
<script src="src/SevenTVHelper.js"></script>
<script src="src/combo.js"></script>
<script src="src/followList.js"></script>
<script src="src/index.js"></script>
<script src="src/events.js"></script>
<script src="src/tooltip.js"></script>
<script src="src/landingPage.js"></script>
<script src="src/404/index.js"></script>
</body>

</html>
</html>
42 changes: 5 additions & 37 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,51 +3,19 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yet Another Useless Twitch Chat</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
<link rel="stylesheet" type="text/css" href="styles/homepage.css">
<link rel="stylesheet" type="text/css" href="styles/settings.css">
<link rel="icon" href="imgs/favicon.png" type="image/png">
<title>Loading</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css">

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
</style>

<style>
#content {
text-align: center;
font-size: 24px;
margin: auto;
}
</style>
</head>
<body>
<div id="topbar">
<div id="topbar-content">
<a href="https://fiszh.github.io/YAUTC/">
<img src="imgs/favicon.png" alt="Logo" class="logo">
</a>

</div>
<div class="unaffiliated">YetAnotherUselessTwitchChat (YAUTC) is not affiliated with Twitch Interactive</div>

<div class="user_container">
<img class="user_avatar" src="imgs/user_avatar.png">
<div class="dropdown-content" id="dropdown">
<a id="settings-button">Settings</a>
<a id="topbar-button0">DevMode</a>
</div>
</div>
<div>
Loading...
</div>

<div id="settings"></div>

<div id="channelTab">
</div>

<script src="src/twitchLogin.js"></script>
<script src="src/settings.js"></script>
<script src="src/events.js"></script>
<script src="src/homepage.js"></script>
<script src="src/landingPage.js"></script>
</body>
</html>
103 changes: 103 additions & 0 deletions pages/channel.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>YAUTC</title>
<link rel="icon" href="imgs/favicon.png" type="image/png">
<link rel="stylesheet" type="text/css" href="styles/followList.css">
<link rel="stylesheet" type="text/css" href="styles/styles.css">
<link rel="stylesheet" type="text/css" href="styles/settings.css">
<script src="https://player.twitch.tv/js/embed/v1.js"></script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
</style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji" rel="stylesheet">
<!-- Include Twemoji -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/twemoji.min.js" crossorigin="anonymous"></script>
</head>

<body>
<div id="topbar">
<div id="topbar-content">
<a href="https://fiszh.github.io/YAUTC/">
<img src="imgs/favicon.png" alt="Logo" class="logo">
</a>
</div>
<div class="unaffiliated">YetAnotherUselessTwitchChat (YAUTC) is not affiliated with Twitch Interactive</div>

<div class="user_container">
<img class="user_avatar" src="imgs/user_avatar.png">
<div class="dropdown-content" id="dropdown">
<a id="settings-button">Settings</a>
<a id="topbar-button0">DevMode</a>
</div>
</div>
</div>

<div id="settings"></div>

<div id="frame">
<div id="tooltip-title" class="text"></div>
<img id="frame-img" src="" alt="Image">
<div id="tooltip-name" class="text"></div>
<div id="tooltip-type" class="text"></div>
<div id="tooltip-creator" class="text"></div>
</div>

<div class="container">
<div class="followList">
<div id="followed">

</div>
</div>
<div class="embed">
<div id="twitch-embed"></div>
<div class="stream-info">
<div class="stream-title">stream-title</div>
<div class="stream-viewers">0</div>
</div>
<div class="stream-info">
<div class="stream-category">stream-category</div>
<div class="stream-time">00:00:00</div>
</div>
</div>
<div id="chat" class="chat">
<div id="display" class="display">
<div id="ComboDisplay" class="combo-messages"></div>

<div id="ChatDisplay" class="chat-messages"></div>

<div id="EmotePicker" class="emote-picker">
</div>

<div class="chat-pause">
</div>

<div class="chat-box-display">
<div class="chat-box">
<input type="text" id="chatInput" placeholder="Type your message...">
<button id="reloadButton">
<i class="material-icons">loop</i>
</button>
</div>
</div>
</div>
</div>
</div>

<script src="src/gql.js"></script>
<script src="src/tmi.js"></script>
<script src="src/twitchLogin.js"></script>
<script src="src/settings.js"></script>
<script src="src/channel/SevenTVHelper.js"></script>
<script src="src/channel/combo.js"></script>
<script src="src/followList.js"></script>
<script src="src/channel/index.js"></script>
<script src="src/events.js"></script>
<script src="src/tooltip.js"></script>
</body>

</html>
45 changes: 45 additions & 0 deletions pages/homepage.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yet Another Useless Twitch Chat</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
<link rel="stylesheet" type="text/css" href="styles/homepage.css">
<link rel="stylesheet" type="text/css" href="styles/settings.css">
<link rel="icon" href="imgs/favicon.png" type="image/png">

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
</style>
</head>
<body>
<div id="topbar">
<div id="topbar-content">
<a href="https://fiszh.github.io/YAUTC/">
<img src="imgs/favicon.png" alt="Logo" class="logo">
</a>

</div>
<div class="unaffiliated">YetAnotherUselessTwitchChat (YAUTC) is not affiliated with Twitch Interactive</div>

<div class="user_container">
<img class="user_avatar" src="imgs/user_avatar.png">
<div class="dropdown-content" id="dropdown">
<a id="settings-button">Settings</a>
<a id="topbar-button0">DevMode</a>
</div>
</div>
</div>

<div id="settings"></div>

<div id="channelTab">
</div>

<script src="src/twitchLogin.js"></script>
<script src="src/settings.js"></script>
<script src="src/events.js"></script>
<script src="src/homepage/homepage.js"></script>
</body>
</html>
5 changes: 5 additions & 0 deletions pages/sites.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"/YAUTC/": "pages/homepage.html",
"*": "pages/channel.html",
"404": "404.html"
}
13 changes: 13 additions & 0 deletions src/404/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
const path = document.location.pathname

console.log(path)
console.log(path !== '/YAUTC/')
console.log(!path.endsWith('/'))

if (path !== '/YAUTC/' && !path.endsWith('/')) {
const infoElements = document.getElementsByClassName('information');
console.log(infoElements)
if (infoElements.length > 0) {
infoElements[0].innerHTML = "(404) <br> Recently, the format was changed from /channel_name to #/channel_name";
}
}
Loading

0 comments on commit f098b08

Please sign in to comment.