Smartcraft-Media-Tech/nutty-tools
1
0
Fork 0
mirror of https://github.com/nuttylmao/nutty.gg.git synced 2026-09-18 19:50:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
nuttylmao
2025-03-23 22:04:07 +11:00
committed by GitHub
parent f133722899
commit 6c53d973f7
97 changed files with 15625 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apple-music-widget-compact/index.html
+47
View File
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="#" />
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/metropolis.min.css" />
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"
integrity="sha384-2huaZvOR9iDzHqslqwpR87isEmrfxqyWOF7hr7BY6KG0+hVKLoEXMPUJw3ynWuhO"
crossorigin="anonymous"></script>
</head>
<body>
<div id="statusContainer">Connecting...</div>
<div id="mainContainer">
<!-- <div id="albumArtBox">
<img id="albumArt"
src="https://static.wikia.nocookie.net/dreamcatcherwiki/images/d/dc/Dystopia_Lose_Myself_Digital_Cover.jpg"></img>
<img id="albumArtBack"
src="https://cdns-images.dzcdn.net/images/cover/762f7ef8a0c20e91304a3fae47449ccd/1900x1900-000000-80-0-0.jpg"></img>
</div> -->
<div id="songInfoBox">
<div id="songInfo">
<div id="IAmRunningOutOfNamesForTheseBoxes">
<div id="songLabel">Can't get you out of my mind</div>
<div id="artistLabel">Dreamcatcher</div>
<!-- <div id="times">
<div id="progressTime">2:29</div>
<div id="duration">3:43</div>
</div>
<div id="progressBg">
<div id="progressBar"></div>
</div> -->
</div>
</div>
<div id="backgroundArt">
<img id="backgroundImage"
src="https://static.wikia.nocookie.net/dreamcatcherwiki/images/d/dc/Dystopia_Lose_Myself_Digital_Cover.jpg"></img>
<img id="backgroundImageBack"
src="https://cdns-images.dzcdn.net/images/cover/762f7ef8a0c20e91304a3fae47449ccd/1900x1900-000000-80-0-0.jpg"></img>
</div>
</div>
</div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src="./script.js"></script>
apple-music-widget-compact/script.js
+230
View File
@@ -0,0 +1,230 @@
///////////////
// PARAMETRS //
///////////////
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const visibilityDuration = urlParams.get("duration") || 0;
// const hideAlbumArt = urlParams.has("hideAlbumArt");
/////////////////
// GLOBAL VARS //
/////////////////
let animationSpeed = 0.5;
//////////////////////
// WEBSOCKET SERVER //
//////////////////////
// This is the main function that connects to the Streamer.bot websocket server
function connectws() {
if ("WebSocket" in window) {
//const ws = new WebSocket("ws://" + sbServerAddress + ":" + sbServerPort + "/");
const CiderApp = io("http://localhost:10767/", {
transports: ['websocket']
});
CiderApp.on("disconnect", (event) => {
SetConnectionStatus(false);
setTimeout(connectws, 5000);
});
CiderApp.on("connect", (event) => {
SetConnectionStatus(true);
});
// Set up websocket artwork/information handling
CiderApp.on("API:Playback", ({ data, type }) => {
switch (type) {
// Song changes
case ("playbackStatus.nowPlayingItemDidChange"):
UpdateSongInfo(data);
break;
// Progress bar moves
case ("playbackStatus.playbackTimeDidChange"):
UpdateProgressBar(data);
break;
// Pause/unpause
case ("playbackStatus.playbackStateDidChange"):
UpdatePlaybackState(data);
break;
}
});
}
}
////////////////////////
// NOW PLAYING WIDGET //
////////////////////////
function UpdateSongInfo(data) {
// Set the user's info
let albumArtUrl = data.artwork.url;
albumArtUrl = albumArtUrl.replace("{w}", data.artwork.width);
albumArtUrl = albumArtUrl.replace("{h}", data.artwork.height);
// UpdateAlbumArt(document.getElementById("albumArt"), albumArtUrl);
UpdateAlbumArt(document.getElementById("backgroundImage"), albumArtUrl);
setTimeout(() => {
UpdateTextLabel(document.getElementById("songLabel"), data.name);
UpdateTextLabel(document.getElementById("artistLabel"), data.artistName);
}, animationSpeed * 500);
setTimeout(() => {
// document.getElementById("albumArtBack").src = albumArtUrl;
document.getElementById("backgroundImageBack").src = albumArtUrl;
}, 2 * animationSpeed * 500);
if (visibilityDuration > 0) {
setTimeout(() => {
SetVisibility(false);
}, visibilityDuration * 1000);
}
}
function UpdateTextLabel(div, text) {
if (div.innerHTML != text) {
div.setAttribute("class", "text-fade");
setTimeout(() => {
div.innerHTML = text;
div.setAttribute("class", ".text-show");
}, animationSpeed * 250);
}
}
function UpdateAlbumArt(div, imgsrc) {
if (div.src != imgsrc) {
div.setAttribute("class", "text-fade");
setTimeout(() => {
div.src = imgsrc;
div.setAttribute("class", "text-show");
}, animationSpeed * 500);
}
}
function UpdateProgressBar(data) {
const progress = ((data.currentPlaybackTime / data.currentPlaybackDuration) * 100);
const progressTime = ConvertSecondsToMinutesSoThatItLooksBetterOnTheOverlay(data.currentPlaybackTime);
const duration = ConvertSecondsToMinutesSoThatItLooksBetterOnTheOverlay(data.currentPlaybackTimeRemaining);
// document.getElementById("progressBar").style.width = `${progress}%`;
// document.getElementById("progressTime").innerHTML = progressTime;
// document.getElementById("duration").innerHTML = `-${duration}`;
document.getElementById("backgroundImage").style.clipPath = `inset(0 ${100 - progress}% 0 0)`;
}
function UpdatePlaybackState(data) {
console.log(data);
switch (data.state) {
case ("paused"):
case ("stopped"):
SetVisibility(false);
break;
case ("playing"):
UpdateSongInfo(data.attributes);
setTimeout(() => {
SetVisibility(true);
}, animationSpeed * 500);
break;
}
}
//////////////////////
// HELPER FUNCTIONS //
//////////////////////
function ConvertSecondsToMinutesSoThatItLooksBetterOnTheOverlay(time) {
const minutes = Math.floor(time / 60);
const seconds = Math.trunc(time - minutes * 60);
return `${minutes}:${('0' + seconds).slice(-2)}`;
}
function SetVisibility(isVisible) {
widgetVisibility = isVisible;
const mainContainer = document.getElementById("mainContainer");
if (isVisible) {
var tl = new TimelineMax();
tl
.to(mainContainer, animationSpeed, { bottom: "50%", ease: Power1.easeInOut }, 'label')
.to(mainContainer, animationSpeed, { opacity: 1, ease: Power1.easeInOut }, 'label')
}
else {
var tl = new TimelineMax();
tl
.to(mainContainer, animationSpeed, { bottom: "45%", ease: Power1.easeInOut }, 'label')
.to(mainContainer, animationSpeed, { opacity: 0, ease: Power1.easeInOut }, 'label')
}
}
///////////////////////////////////
// STREAMER.BOT WEBSOCKET STATUS //
///////////////////////////////////
// This function sets the visibility of the Streamer.bot status label on the overlay
function SetConnectionStatus(connected) {
let statusContainer = document.getElementById("statusContainer");
if (connected) {
statusContainer.style.background = "#2FB774";
statusContainer.innerText = "Connected!";
var tl = new TimelineMax();
tl
.to(statusContainer, 2, { opacity: 0, ease: Linear.easeNone });
console.log("Connected to Cider!");
}
else {
// statusContainer.style.background = "#D12025";
// statusContainer.innerText = "Connecting...";
// statusContainer.style.opacity = 1;
console.log("Not connected to Cider...");
}
}
//////////////////////////////////////////////////////////////////////////////////////////
// RESIZER THING BECAUSE I THINK I KNOW HOW RESPONSIVE DESIGN WORKS EVEN THOUGH I DON'T //
//////////////////////////////////////////////////////////////////////////////////////////
let outer = document.getElementById('mainContainer'),
maxWidth = outer.clientWidth+100,
maxHeight = outer.clientHeight;
window.addEventListener("resize", resize);
resize();
function resize() {
const scale = window.innerWidth / maxWidth;
outer.style.transform = 'translate(-50%, 50%) scale(' + scale + ')';
}
/////////////////////////////////////////////////////////////////////
// IF THE USER PUT IN THE HIDEALBUMART PARAMATER, THEN YOU SHOULD //
// HIDE THE ALBUM ART, BECAUSE THAT'S WHAT IT'S SUPPOSED TO DO //
/////////////////////////////////////////////////////////////////////
// if (hideAlbumArt)
// {
// document.getElementById("albumArtBox").style.display = "none";
// document.getElementById("songInfoBox").style.width = "calc(100% - 20px)";
// }
connectws();
apple-music-widget-compact/style.css
+181
View File
@@ -0,0 +1,181 @@
* {
--corner-radius: 25px;
--album-art-size: 50px;
}
#statusContainer {
font-family: 'Metropolis';
font-style: italic;
font-weight: bold;
font-size: 30px;
width: 400px;
max-width: fit-content;
text-align: center;
background-color: #D12025;
color: white;
padding: 10px;
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
}
#mainContainer {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
display: flex;
position: absolute;
height: var(--album-art-size);
margin: 20px;
filter: drop-shadow(15px 15px 7px rgba(0, 0, 0, 1));
width: 100%;
max-width: 400px;
bottom: 45%;
left: 50%;
opacity: 0;
}
#albumArtBox {
background: rgba(0, 0, 0, 0.5);
position: relative;
border-radius: var(--corner-radius);
overflow: hidden;
margin: 0px 8px 0px 0px;
object-fit: cover;
width: var(--album-art-size);
}
#albumArtBox img {
width: 100%;
height: 100%;
object-fit: cover;
}
#songInfoBox {
position: relative;
color: white;
/* width: calc(100% - 125px); */
width: calc(100%);
display: flex;
flex-direction: column;
flex: 0 1 auto;
justify-content: center;
z-index: 1;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
overflow: hidden;
z-index: 4;
}
#songInfo {
background: rgba(0, 0, 0, 0.5);
opacity: 0.9;
position: relative;
border-radius: var(--corner-radius);
padding: 0px 20px;
height: 100%;
overflow: hidden;
}
#IAmRunningOutOfNamesForTheseBoxes {
position: absolute;
width: calc(100% - 40px);
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#backgroundArt {
position: absolute;
height: 100%;
width: 100%;
border-radius: var(--corner-radius);
overflow: hidden;
z-index: -1;
opacity: 0.9;
}
#backgroundImage {
filter: blur(20px);
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
transition: all 2s ease;
}
#backgroundImageBack {
filter: blur(20px);
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: -1;
}
#artistLabel {
font-size: 18px;
font-weight: 400;
line-height: 1;
white-space: nowrap;
transition: all 0.5s ease;
text-align: center;
}
#songLabel {
font-weight: bold;
font-size: 20px;
width: calc(100%);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: all 0.5s ease;
text-align: center;
}
/* #progressBg {
margin-top: 15px;
width: 100%;
height: auto;
border-radius: 5px;
background-color: #1F1F1F;
} */
/* #progressBar {
border-radius: 5px;
height: 5px;
width: 20%;
background-color: #ffffff;
margin: 10px 0px;
} */
/* #times {
position: relative;
height: 16px;
font-size: 16px;
font-weight: 700;
line-height: 2.2;
} */
/* #progressTime {
position: absolute;
} */
/* #duration {
position: absolute;
width: 100%;
text-align: right;
} */
.text-show {
opacity: 1;
transition: all 0.25s ease;
}
.text-fade {
opacity: 0;
transition: all 0.25s ease;
}