New default font

Changed Raleway to Inter, which is font used by Twitch. Also ttf to woff2 which is more performant format. + few more optimizations & readability fixes.

assets/song.css

@@ -6,63 +6,74 @@ body {
 }
 
 @font-face {
-    font-family: impact-regular, sans-serif;
-    src: url(./fonts/impact.ttf);
-    font-display: swap;
+    font-family: Impact;
+    src: url(./fonts/impact.woff2);
+    font-display: fallback;
 }
 
 @font-face {
-    font-family: raleway-bold, sans-serif;
-    src: url(./fonts/Raleway-Bold.ttf);
-    font-display: swap;
+    font-family: Inter;
+    src: url(./fonts/Inter_18pt-ExtraBold.woff2);
+    font-weight: bold;
+    font-display: fallback;
 }
 
 @keyframes scrollContainer {
-    0% {
-        transform: translateX(100%);
+    from {
+        transform: translateX(110vw);
     }
-    100% {
-        transform: translateX(-100%);
+    to {
+        transform: translateX(-110vw);
     }
 }
 
 @keyframes shadowAnimation {
-    0% {
+    from {
         box-shadow: inset 0 0 6px 0 var(--bgShadowColor);
     }
-    100% {
-        box-shadow: inset 0 0 12px .2rem var(--bgShadowColor);
+    to {
+        box-shadow: inset 0 0 12px 0.2rem var(--bgShadowColor);
     }
 }
 
 .container {
     position: relative;
     width: 100%;
     height: 2rem;
-    margin: 0.25rem 0;
+    margin: .25rem 0;
     overflow: hidden;
+    contain: layout size;
 }
 
 .scrollText {
     position: absolute;
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
     white-space: nowrap;
-    font: var(--text-size, 1.3rem) 'impact-regular', sans-serif;
+    font: var(--text-size, 1.3rem) Impact, sans-serif;
     color: transparent;
-    background: linear-gradient(var(--gradient-start), var(--gradient-end));
     -webkit-background-clip: text;
     background-clip: text;
-    padding: 0.125rem 0.2rem;
-    will-change: transform;
-    animation: scrollContainer var(--animation-time, 25s) linear infinite;
+    background-image: linear-gradient(var(--gradient-start), var(--gradient-end));
+    padding: .125rem .2rem;
+    line-height: 2rem;
+    vertical-align: middle;
+    animation: scrollContainer var(--animation-time, 30s) linear infinite;
+    transform: translateY(0);
+}
+
+.song-title,
+.nickname {
+    contain: style layout;
 }
 
 .song-title {
-    font-family: 'raleway-bold', sans-serif;
+    font-family: Inter, sans-serif;
     transition: color 1.5s ease;
 }
 
 .nickname {
-    font-family: 'raleway-bold', sans-serif;
+    font-family: Inter, sans-serif;
     transition: color 0.3s ease;
 }

assets/song.js

@@ -4,15 +4,15 @@ let enableCleanTitle;
 let maxAllowedTitleLength;
 
 document.addEventListener('DOMContentLoaded', function () {
-    const scrollTextElement = document.querySelector('.scrollText');
     currentlyPlayingElement = document.createElement('span');
-    requestedByElement = document.createElement('span');
-
     currentlyPlayingElement.classList.add('song-title');
+
+    requestedByElement = document.createElement('span');
     requestedByElement.classList.add('nickname');
 
     const songPrefix = document.createTextNode(`${settingsJson.labels.songPrefix} `);
-    const requestedByPrefix = document.createTextNode(` ${settingsJson.labels.requestedByPrefix} `);
+    const requestedByPrefix = document.createTextNode(`\t${settingsJson.labels.requestedByPrefix} `);
+    const scrollTextElement = document.querySelector('.scrollText');
 
     scrollTextElement.append(songPrefix, currentlyPlayingElement, requestedByPrefix, requestedByElement);
 
@@ -33,13 +33,13 @@ function cleanTitle(title) {
     title = title.replace(/\bfeat\.?\b/gi, 'ft.')
         .replace(/\bproduced by\b|\bproduced\.\b/gi, 'prod.')
         .replace(/\s*[\[(][^()\[\]]*(Official|Lyric|Music|Video|Audio)[^()\[\]]*[\])]\s*/gi, '');
+
     return shortTitleLength(title).trim();
 }
 
 function applySettings(settings) {
     const { settings: appSettings } = settings;
     const colors = theme.colors;
-
     const rootStyle = document.documentElement.style;
 
     rootStyle.setProperty('--text-size', appSettings.textSize);
@@ -51,9 +51,7 @@ function applySettings(settings) {
     requestedByElement.style.color = colors.nickname;
 
     if (appSettings.enableBackgroundShadow) {
-        const bgShadowColor = colors.backgroundShadow;
-        rootStyle.setProperty('--bgShadowColor', bgShadowColor);
-
+        rootStyle.setProperty('--bgShadowColor', colors.backgroundShadow);
         document.querySelector('.container').style.animation = 'shadowAnimation 1.5s alternate infinite';
     }
 
@@ -91,13 +89,14 @@ async function loadSettings() {
 
 async function updateCurrentSong() {
     try {
-        const response = await fetch('./current_song.txt');
+        const nightbotCurrentSongPath = './current_song.txt';
+        const response = await fetch(nightbotCurrentSongPath);
         if (!response.ok) {
             throw new Error(response.statusText);
         } 
 
         const currentSong = await response.text();
-        const regex = /(.+?) - Requested by: ([^\s]+)/;
+        const regex = /(.+?)\s+- Requested by: ([^\s]+)/;
         const match = currentSong.match(regex);
 
         if (match && match[2]) {

song.html

@@ -7,9 +7,8 @@
     <script src="./assets/song.js" defer></script>
 </head>
 <body>
-<div class="container">
-    <span class="scrollText">
-    </span>
-</div>
+    <div class="container">
+        <span class="scrollText"></span>
+    </div>
 </body>
 </html>

song_settings.js

@@ -6,7 +6,7 @@ const settingsJson = {
   "settings": {
     "theme": "Regular", // (Blood, Camo, Halloween, Pink, Regular or Winter) Default: Regular. # Theme to use.
     "textSize": "1.3rem", // *(px/rem) Default: 1.3rem. # Text size.
-    "scrollSpeed": 26, // Default: 26. # How fast text scrolling in seconds.
+    "scrollSpeed": 30, // Default: 30. # How fast text scrolling in seconds.
     "maxTitleLength": 85, // Default: 85. # Max title length to avoid overflow. (Longer gets truncated).
     "enableCleanTitle": true, // (true/false) Default: true. # Removes (Official music video) etc from song title.
     "enableBackgroundShadow": false, // (true/false) Default: false. # Enables shadow background for text.