Skip to content

Commit

Permalink
Updates
Browse files Browse the repository at this point in the history 
- Dramatically faster song load times
- Fixed video queue drag
- New 404 page
- Plugins can now request js files from other sources (starting with 'http(s)') in clientJS
- Package updates
  • Loading branch information
@Jantje19
Jantje19 committed Aug 29, 2019
1 parent 4643888 commit a770c4f
Show file tree
Hide file tree
Showing 16 changed files with 791 additions and 670 deletions.
169 changes: 23 additions & 146 deletions WebInterface/404.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,164 +2,41 @@
<html>
<head>

<title>Error 404</title>
<title>MusicStream - 404</title>

<style type="text/css">
body {
margin: 0;
overflow: hidden;
font-family: 'Arial', sans-serif;
}

main {
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
position: absolute;

display: flex;
align-items: center;
justify-content: center;
}

main > div {
width: 40vw;
height: auto;
padding: 5% 10%;
text-align: center;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.5);
}

main #stopBtnContainer {
top: 10px;
left: 15%;
width: 70%;
padding: 0;
display: none;
position: absolute;
}

main #stopBtnContainer button {
width: 100%;
height: 100%;
border: none;
padding: 5% 10%;
cursor: pointer;
background-color: transparent;
}
</style>

<script type="text/javascript" src="https://jantje19.github.io/SideProjects/Canvas/canvas.js"></script>
<script type="text/javascript">
let bgCol;
const particles = [];
const colors = ['#69D2E7', '#A7DBD8', '#F38630', '#FA6900', '#FF4E50', '#F9D423'];

// Audio
const audio = new Audio('http://www.orangefreesounds.com/wp-content/uploads/2016/10/Elevator-music.mp3');
audio.loop = true;
audio.play();

function setup() {
bgCol = Global.Color.random().opacity(.5).toString();

canvas = new Canvas(document.getElementsByTagName('canvas')[0], 'auto', 'auto');
canvas.background(bgCol);

// For audio
setTimeout(() => {
document.getElementById('stopBtnContainer').style.display = 'block';

document.getElementById('stopBtn').addEventListener('click', evt => {
audio.pause();
evt.target.parentElement.style.display = 'none';
});
}, (audio.duration * 2 - 100) * 1000);

// For plugins
try {
loaded();
} catch (err) {}
* {
font-family: 'Segoe UI', 'San Francisco', 'Lucida Grande', 'Ubuntu', 'Arial', sans-serif;
}

function draw() {
canvas.background(bgCol);

if (frameCount % 100 == 0) {
let range = canvas.width / 5;
let spot = pickRandomSpotIn2DSpace(range, range, canvas.width - range, canvas.height - range);

for (let i = 0; i < 100; i++) {
particles.push(new Particle(spot.x, spot.y, colors[Math.floor(Math.random() * colors.length)], Math.random() * 300));
}
}

for (let i = 0; i < particles.length; i++) {
const object = particles[i];

if (object.life <= 0) {
particles.splice(i, 0);
continue;
}

object.update();
object.show();
}
}

function generateBgCol() {
bgCol = Global.Color.random().opacity(.5).toString();
return bgCol;
body {
top: 0;
left: 0;
margin: 0;
width: 100%;
height: 100%;
display: flex;
position: absolute;
align-items: center;
justify-content: center;
background-color: #16a085;
}

function pickRandomSpotIn2DSpace(startX, startY, endX, endY) {
return {
x: Math.randomBetween(startX, endX),
y: Math.randomBetween(startY, endY)
}
main {
padding: 20px 40px;
background-color: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

class Particle {
constructor(x, y, color, life) {
this.r = 5;
this.life = life;
this.color = color;
this.pos = new Vector(x, y);
this.vel = Global.Vector.random2D().mult(Math.random() * 5);
}

update() {
this.life--;
this.pos.add(this.vel);
}

show() {
canvas.circle(this.pos.x, this.pos.y, this.r, this.color, true);
}
}
</script>
</style>

</head>
<body>

<canvas></canvas>

<main>
<div>
<h1>Error 404. Page not found.</h1>
<p>
This page doesn't exist (yet) or has been moved...
<br>
Please enjoy the elevator music and fireworks to pass the time.
</p>
</div>

<div id="stopBtnContainer">
<button id="stopBtn">Ahh. Please let it stop.</button>
</div>
<h1>Error 404.<br>Page not found.</h1>
<p>
This page doesn't exist (yet) or has been moved...
</p>
</main>

</body>
Expand Down
52 changes: 42 additions & 10 deletions WebInterface/Audio/createPlaylist.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,13 @@
else if (response.status !== 200) reject('Looks like there was a problem. Status Code: ' + response.status);
else {
response.json().then(json => {
if (json.error) reject(json.info);
else resolve(json.audio);
if (json.error)
reject(json.info);
else
resolve(json.audio);
});
}
}).catch(err => reject(err));
}).catch(reject);
});
}

Expand All @@ -65,24 +67,42 @@

function updateInterface() {
const playlistElem = document.getElementById('playlist');
const containerElem = playlistElem.cloneNode();

playlistElem.innerHTML = '';
playlist.forEach((object, key) => {
playlistElem.innerHTML += `<button title="${object}" class="listElem ${key}" onclick="handlePlaylist('${key}')">${object}</button><hr>`;
const buttonElem = document.createElement('button');

buttonElem.addEventListener('click', evt => handlePlaylist(key));
buttonElem.classList.add('listItem', key);
buttonElem.innerText = object;
buttonElem.title = object;

containerElem.appendChild(buttonElem);
});
playlistElem.replaceWith(containerElem);
}

function load() {
let songs;

getData().then(json => {
const songsElem = document.getElementById('songs');
const containerElem = songsElem.cloneNode();

songs = json.songs;
songsElem.innerHTML = '';
json.songs.forEach((object, key) => {
songsElem.innerHTML += `<button title="${object}" class="song ${key}" onclick="songClick('${object.replace(/\'/g, "\\\'")}')">${object}</button><hr>`;
const buttonElem = document.createElement('button');

buttonElem.addEventListener('click', evt => songClick(object));
buttonElem.classList.add('song', key);
buttonElem.innerText = object;
buttonElem.title = object;

containerElem.appendChild(buttonElem);
});
songsElem.replaceWith(containerElem);
}).catch(err => console.error(err));

document.getElementById('fab').addEventListener('click', evt => {
Expand Down Expand Up @@ -127,21 +147,30 @@
});

document.getElementById('searchInp').addEventListener('keyup', evt => {
const string = evt.target.value;
const songArr = searchArr(string, songs);
const songArr = searchArr(evt.target.value, songs);
const songsElem = document.getElementById('songs');
const containerElem = songsElem.cloneNode();

songsElem.innerHTML = '';
songArr.forEach((object, key) => {
songsElem.innerHTML += `<button title="${object}" class="song ${key}" onclick="songClick('${object.replace(/\'/g, "\\\'")}')">${object}</button><hr>`;
const buttonElem = document.createElement('button');

buttonElem.addEventListener('click', evt => songClick(object));
buttonElem.classList.add('song', key);
buttonElem.innerText = object;
buttonElem.title = object;

containerElem.appendChild(buttonElem);
});
songsElem.replaceWith(containerElem);

function searchArr(query, array) {
const outp = [];

for (let i = 0; i < array.length; i++) {
const item = array[i];
if (item.toString().toLowerCase().indexOf(query.toString().toLowerCase()) > -1) outp.push(item);
if (item.toString().toLowerCase().indexOf(query.toString().toLowerCase()) > -1)
outp.push(item);
}

return outp;
Expand All @@ -154,7 +183,10 @@
}

function addWholeSongsToQueue() {
playlist = Array.from(document.getElementById('songs').querySelectorAll('button')).map(val => {return val.innerText});
playlist = Array.from(document.getElementById('songs').querySelectorAll('button')).map(val => {
return val.innerText
});

updateInterface();
}

Expand Down
Loading

0 comments on commit a770c4f

Please sign in to comment.