mirror of
https://github.com/nuttylmao/nutty.gg.git
synced 2026-09-18 19:50:58 -04:00
Add files via upload
This commit is contained in:
nuttylmao
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<head>
|
||||
<title>Configure</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="shortcut icon" href="#" />
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="mainContainer">
|
||||
<div id="connectBox">
|
||||
<img src="logo.png" width="60%">
|
||||
<label>
|
||||
<br><br>
|
||||
<button onclick="RequestToken()">Connect</button>
|
||||
<br><br>
|
||||
<button id="instructionsButton" onclick="OpenInstructions()">Instructions</button>
|
||||
</label>
|
||||
</div>
|
||||
<div id="authorizationBox">
|
||||
<label id="authorizationCode">
|
||||
2305
|
||||
</label>
|
||||
<label id="authorizationComplete">
|
||||
<img src="logo.png" width="60%">
|
||||
<br><br>
|
||||
<span style="font-weight: 500; font-size: 30px;">Authorization complete</span>
|
||||
<br><br>
|
||||
You now owe me money for all of my hard work.
|
||||
</label>
|
||||
<button id="copyURLButton" onclick="CopyToURL()" disabled="true">Awaiting approval</button>
|
||||
<br><br>
|
||||
<button id="donateButton" onclick="OpenDonationPage()" style="display: none;">Donate out of guilt</button>
|
||||
</div>
|
||||
<div id="errorBox">
|
||||
<label style="font-size: 30px; font-weight: 600;">Error <span id="errorCode">69</span></label>
|
||||
<br>
|
||||
<span id="errorMessage">You died lmao. You died lmao. You died lmao. You died lmao. You died lmao. You died lmao.You died lmao. You died lmao.</span>
|
||||
<br><br>
|
||||
|
||||
<button id="closeErrorBox" onclick="CloseErrorBox()">Okay</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
@@ -0,0 +1,110 @@
|
||||
const appId = "nuttys-ytmdesktop-widget";
|
||||
const appName = "nuttys YouTube Music Widget";
|
||||
const appVersion = "1.0.0";
|
||||
const baseURL = "http://nuttylmao.github.io/youtube-music-widget";
|
||||
|
||||
let browserSourceURL = ""
|
||||
|
||||
// Request a four digit authentication code
|
||||
async function RequestCode() {
|
||||
const response = await fetch("http://localhost:9863/api/v1/auth/requestcode", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
"appId": appId,
|
||||
"appName": appName,
|
||||
"appVersion": appVersion
|
||||
}),
|
||||
headers: {
|
||||
"Content-type": "application/json; charset=UTF-8"
|
||||
}
|
||||
})
|
||||
|
||||
const responseData = await response.json();
|
||||
console.debug(responseData);
|
||||
if (responseData.hasOwnProperty("statusCode"))
|
||||
{
|
||||
document.getElementById("errorCode").innerText = responseData.statusCode;
|
||||
document.getElementById("errorMessage").innerText = responseData.message;
|
||||
document.getElementById("errorBox").style.display = 'inline';
|
||||
}
|
||||
else
|
||||
return await responseData;
|
||||
}
|
||||
|
||||
// Wait for the user to accept the code and return them an access token
|
||||
async function RequestToken() {
|
||||
const requestCode = await RequestCode();
|
||||
const authCode = requestCode.code;
|
||||
console.debug(`Auth Code: ${authCode}`);
|
||||
document.getElementById("authorizationCode").innerText = authCode;
|
||||
|
||||
// Show the authorize popup
|
||||
document.getElementById("authorizationBox").style.display = 'inline';
|
||||
|
||||
const response = await fetch("http://localhost:9863/api/v1/auth/request", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
"appId": appId,
|
||||
"code": authCode
|
||||
}),
|
||||
headers: {
|
||||
"Content-type": "application/json; charset=UTF-8"
|
||||
}
|
||||
})
|
||||
|
||||
const responseData = await response.json();
|
||||
if (responseData.hasOwnProperty("statusCode"))
|
||||
{
|
||||
document.getElementById("errorCode").innerText = responseData.statusCode;
|
||||
document.getElementById("errorMessage").innerText = responseData.message;
|
||||
document.getElementById("errorBox").style.display = 'inline';
|
||||
|
||||
// Hide the authorize popup
|
||||
document.getElementById("authorizationBox").style.display = 'none';
|
||||
}
|
||||
else
|
||||
{
|
||||
const token = responseData.token;
|
||||
console.debug(`Token: ${token}`);
|
||||
browserSourceURL = `${baseURL}?token=${token}`;
|
||||
|
||||
// Enable the Copy URL Button
|
||||
document.getElementById("copyURLButton").disabled = false;
|
||||
document.getElementById("copyURLButton").innerText = "Click to copy URL";
|
||||
|
||||
// Show the donation button
|
||||
document.getElementById("authorizationCode").style.display = 'none';
|
||||
|
||||
// Show the donation button and confirmation text
|
||||
document.getElementById("donateButton").style.display = 'block';
|
||||
document.getElementById("authorizationComplete").style.display = 'block';
|
||||
}
|
||||
|
||||
return await responseData;
|
||||
}
|
||||
|
||||
function CopyToURL() {
|
||||
navigator.clipboard.writeText(browserSourceURL);
|
||||
|
||||
document.getElementById("copyURLButton").innerText = "Copied to clipboard";
|
||||
document.getElementById("copyURLButton").style.backgroundColor = "#00dd63"
|
||||
document.getElementById("copyURLButton").style.color = "#ffffff";
|
||||
|
||||
setTimeout(() => {
|
||||
document.getElementById("copyURLButton").innerText = "Click to copy URL";
|
||||
document.getElementById("copyURLButton").style.backgroundColor = "#ffffff";
|
||||
document.getElementById("copyURLButton").style.color = "#181818";
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
function OpenInstructions() {
|
||||
window.open("https://www.notion.so/nuttylmao/YouTube-Music-Widget-18d19969b23780e2bb56d25eed4d154e", '_blank').focus();
|
||||
}
|
||||
|
||||
function OpenDonationPage() {
|
||||
window.open("http://nutty.gg/pages/donate", '_blank').focus();
|
||||
}
|
||||
|
||||
function CloseErrorBox() {
|
||||
document.getElementById("errorBox").style.display = 'none';
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
* {
|
||||
--corner-radius: 10px;
|
||||
--padding: 20px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#mainContainer {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0px;
|
||||
background-color: #282828;
|
||||
}
|
||||
|
||||
#errorBox {
|
||||
background-color: #6d0b0b;
|
||||
border-radius: var(--corner-radius);
|
||||
padding: calc(var(--padding)) calc(var(--padding)*2);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 1));
|
||||
display: none;
|
||||
}
|
||||
|
||||
#connectBox{
|
||||
background-color: #181818;
|
||||
border-radius: var(--corner-radius);
|
||||
padding: calc(var(--padding)*3) calc(var(--padding)*3);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 1));
|
||||
width: 400px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#authorizationBox {
|
||||
background-color: #252525;
|
||||
border-radius: var(--corner-radius);
|
||||
padding: calc(var(--padding)*3) calc(var(--padding)*3);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 1));
|
||||
width: 400px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#authorizationCode {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 80px;
|
||||
font-weight: 700;
|
||||
padding-left: 30px;
|
||||
padding-bottom: 40px;
|
||||
letter-spacing: 30px;
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
#authorizationComplete {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding-bottom: 40px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
opacity: 0.8;
|
||||
border-width: 0;
|
||||
border-radius: var(--corner-radius);
|
||||
padding: calc(var(--padding)/2) var(--padding);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#instructionsButton, #donateButton {
|
||||
background-color: #2e2e2e;
|
||||
}
|
||||
|
||||
#copyURLButton {
|
||||
background-color: #ffffff;
|
||||
color: #181818;
|
||||
width: 100%;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
#copyURLButton:disabled {
|
||||
background-color: #636363;
|
||||
opacity: 0.8;
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
#closeErrorBox {
|
||||
background-color: #ffffff;
|
||||
color: #181818;
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<head>
|
||||
<title>YouTube Music Widget</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="shortcut icon" href="#" />
|
||||
<link rel="stylesheet" href="./style.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="./script.js"></script>
|
||||
@@ -0,0 +1,231 @@
|
||||
///////////////
|
||||
// PARAMETRS //
|
||||
///////////////
|
||||
|
||||
const baseURL = "https://nuttylmao.github.io/youtube-music-widget";
|
||||
const queryString = window.location.search;
|
||||
const urlParams = new URLSearchParams(queryString);
|
||||
|
||||
const token = urlParams.get("token") || "";
|
||||
const visibilityDuration = urlParams.get("duration") || 0;
|
||||
const hideAlbumArt = urlParams.has("hideAlbumArt");
|
||||
|
||||
|
||||
/////////////////
|
||||
// GLOBAL VARS //
|
||||
/////////////////
|
||||
|
||||
let animationSpeed = 0.5;
|
||||
let currentState = 0;
|
||||
|
||||
|
||||
////////////
|
||||
// SOCKET //
|
||||
////////////
|
||||
|
||||
function connectws() {
|
||||
const socket = io("http://localhost:9863/api/v1/realtime", {
|
||||
transports: ['websocket'],
|
||||
auth: {
|
||||
token: token
|
||||
}
|
||||
});
|
||||
|
||||
socket.on("state-update", (state) => {
|
||||
console.debug(state);
|
||||
UpdatePlayer(state);
|
||||
});
|
||||
|
||||
socket.on("playlist-created", (playlist) => {
|
||||
console.debug(playlist);
|
||||
});
|
||||
|
||||
socket.on("playlist-delete", (playlistId) => {
|
||||
console.debug(playlistId);
|
||||
});
|
||||
|
||||
socket.on('connect', function () {
|
||||
SetConnectionStatus(true);
|
||||
});
|
||||
|
||||
socket.on('disconnect', function () {
|
||||
SetConnectionStatus(false);
|
||||
setTimeout(connectws, 5000);
|
||||
});
|
||||
}
|
||||
|
||||
function UpdatePlayer(state) {
|
||||
|
||||
if (state.player.trackState != currentState) {
|
||||
// Set thumbnail
|
||||
const songInfo = state.video;
|
||||
const thumbnail = songInfo.thumbnails[songInfo.thumbnails.length - 1].url;
|
||||
console.debug(thumbnail);
|
||||
UpdateAlbumArt(document.getElementById("albumArt"), thumbnail);
|
||||
UpdateAlbumArt(document.getElementById("backgroundImage"), thumbnail);
|
||||
|
||||
// Set song info
|
||||
console.debug(`Artist: ${songInfo.author}`);
|
||||
console.debug(`Title: ${songInfo.title}`);
|
||||
UpdateTextLabel(document.getElementById("artistLabel"), songInfo.author);
|
||||
UpdateTextLabel(document.getElementById("songLabel"), songInfo.title);
|
||||
|
||||
// Set player visibility
|
||||
switch (state.player.trackState) {
|
||||
case -1:
|
||||
console.debug("Player State: Unknown");
|
||||
SetVisibility(false);
|
||||
break;
|
||||
case 0:
|
||||
console.debug("Player State: Paused");
|
||||
SetVisibility(false);
|
||||
break;
|
||||
case 2:
|
||||
console.debug("Player State: Buffering");
|
||||
SetVisibility(false);
|
||||
break;
|
||||
case 1:
|
||||
console.debug("Player State: Playing");
|
||||
setTimeout(() => {
|
||||
SetVisibility(true);
|
||||
}, animationSpeed * 1000);
|
||||
break;
|
||||
}
|
||||
|
||||
if (visibilityDuration > 0) {
|
||||
setTimeout(() => {
|
||||
SetVisibility(false);
|
||||
}, visibilityDuration * 1000);
|
||||
}
|
||||
|
||||
currentState = state.player.trackState;
|
||||
}
|
||||
|
||||
// Set progressbar
|
||||
const songInfo = state.video;
|
||||
const progress = ((state.player.videoProgress / songInfo.durationSeconds) * 100);
|
||||
const progressTime = ConvertSecondsToMinutesSoThatItLooksBetterOnTheOverlay(state.player.videoProgress);
|
||||
const duration = ConvertSecondsToMinutesSoThatItLooksBetterOnTheOverlay(songInfo.durationSeconds - state.player.videoProgress);
|
||||
console.debug(`Progress: ${progressTime}`);
|
||||
console.debug(`Duration: ${duration}`);
|
||||
document.getElementById("progressBar").style.width = `${progress}%`;
|
||||
document.getElementById("progressTime").innerHTML = progressTime;
|
||||
document.getElementById("duration").innerHTML = `-${duration}`;
|
||||
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
//////////////////////
|
||||
// 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) {
|
||||
mainContainer.style.opacity = 1;
|
||||
mainContainer.style.bottom = "50%";
|
||||
}
|
||||
else {
|
||||
mainContainer.style.opacity = 0;
|
||||
mainContainer.style.bottom = "calc(50% - 20px)";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
///////////////////////////////////
|
||||
// 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!";
|
||||
statusContainer.style.opacity = 1;
|
||||
setTimeout(() => {
|
||||
statusContainer.style.transition = "all 2s ease";
|
||||
statusContainer.style.opacity = 0;
|
||||
}, 10);
|
||||
|
||||
console.log("Connected!");
|
||||
}
|
||||
else {
|
||||
// statusContainer.style.background = "#D12025";
|
||||
// statusContainer.innerText = "Connecting...";
|
||||
// statusContainer.style.opacity = 1;
|
||||
// setTimeout(() => {
|
||||
// statusContainer.style.transition = "all 2s ease";
|
||||
// statusContainer.style.opacity = 0;
|
||||
// }, 10);
|
||||
SetVisibility(false);
|
||||
console.log("Not connected...");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////
|
||||
// RESIZER THING BECAUSE I THINK I KNOW HOW RESPONSIVE DESIGN WORKS EVEN THOUGH I DON'T //
|
||||
//////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
let outer = document.getElementById('mainContainer'),
|
||||
maxWidth = outer.clientWidth+50,
|
||||
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)";
|
||||
}
|
||||
|
||||
if (token == "") {
|
||||
console.log("No token detected...");
|
||||
window.open(`${baseURL}/configure`);
|
||||
}
|
||||
else
|
||||
connectws();
|
||||
@@ -0,0 +1,177 @@
|
||||
* {
|
||||
--corner-radius: 10px;
|
||||
--album-art-size: 100px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
#statusContainer {
|
||||
font-weight: 500;
|
||||
font-size: 30px;
|
||||
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: 500px;
|
||||
bottom: calc(50% - 20px);
|
||||
left: 50%;
|
||||
opacity: 0;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
#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);
|
||||
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: 140%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
#backgroundImageBack {
|
||||
filter: blur(20px);
|
||||
position: absolute;
|
||||
width: 140%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#artistLabel {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#songLabel {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
width: calc(100%);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#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;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
Reference in New Issue
Block a user