diff --git a/Makefile b/Makefile
index cf8e856a68d7f982be0c3be273366f01aec1d1b1..ffeea842f4373b4b7300c3fc9799dbdde878134e 100644
--- a/Makefile
+++ b/Makefile
@@ -71,7 +71,7 @@ install:
pip install --user ffpb
stream:
- vlc --no-dbus -vv --sout-keep --sout '#transcode{vcodec=theo,venc=theora{quality=9},acodec=vorb,channels=2}:gather:std{access=http{mime=video/ogg},mux=ogg,dst=:8888/}' --sout-all --loop
+ vlc --no-dbus -vv --sout-keep --sout '#transcode{vcodec=theo,venc=theora{quality=9},acodec=vorb,channels=2}:gather:std{access=http{mime=video/ogg},mux=ogg,dst=:8888/stream}' --sout-all --loop
cleanup:
@echo "Cleaning up outdir"
@rm -rfv "${OUT_DIR}"
diff --git a/assets/dist/back.js b/assets/dist/back.js
new file mode 100644
index 0000000000000000000000000000000000000000..2ac3e1dcbe1d8e6af9ef01bd6b8be56e118c3157
--- /dev/null
+++ b/assets/dist/back.js
@@ -0,0 +1,111 @@
+let resizeReset = function() {
+ w = canvasBody.width = window.innerWidth;
+ h = canvasBody.height = window.innerHeight;
+}
+
+const opts = {
+ particleColor: "rgb(200,200,200)",
+ lineColor: "rgb(200,200,200)",
+ particleAmount: 30,
+ defaultSpeed: 1,
+ variantSpeed: 1,
+ defaultRadius: 2,
+ variantRadius: 2,
+ linkRadius: 200,
+};
+
+window.addEventListener("resize", function(){
+ deBouncer();
+});
+
+let deBouncer = function() {
+ clearTimeout(tid);
+ tid = setTimeout(function() {
+ resizeReset();
+ }, delay);
+};
+
+let checkDistance = function(x1, y1, x2, y2){
+ return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+};
+
+let linkPoints = function(point1, hubs){
+ for (let i = 0; i < hubs.length; i++) {
+ let distance = checkDistance(point1.x, point1.y, hubs[i].x, hubs[i].y);
+ let opacity = 1 - distance / opts.linkRadius;
+ if (opacity > 0) {
+ drawArea.lineWidth = 0.5;
+ drawArea.strokeStyle = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${opacity})`;
+ drawArea.beginPath();
+ drawArea.moveTo(point1.x, point1.y);
+ drawArea.lineTo(hubs[i].x, hubs[i].y);
+ drawArea.closePath();
+ drawArea.stroke();
+ }
+ }
+}
+
+Particle = function(xPos, yPos){
+ this.x = Math.random() * w;
+ this.y = Math.random() * h;
+ this.speed = opts.defaultSpeed + Math.random() * opts.variantSpeed;
+ this.directionAngle = Math.floor(Math.random() * 360);
+ this.color = opts.particleColor;
+ this.radius = opts.defaultRadius + Math.random() * opts. variantRadius;
+ this.vector = {
+ x: Math.cos(this.directionAngle) * this.speed,
+ y: Math.sin(this.directionAngle) * this.speed
+ };
+ this.update = function(){
+ this.border();
+ this.x += this.vector.x;
+ this.y += this.vector.y;
+ };
+ this.border = function(){
+ if (this.x >= w || this.x <= 0) {
+ this.vector.x *= -1;
+ }
+ if (this.y >= h || this.y <= 0) {
+ this.vector.y *= -1;
+ }
+ if (this.x > w) this.x = w;
+ if (this.y > h) this.y = h;
+ if (this.x < 0) this.x = 0;
+ if (this.y < 0) this.y = 0;
+ };
+ this.draw = function(){
+ drawArea.beginPath();
+ drawArea.arc(this.x, this.y, this.radius, 0, Math.PI*2);
+ drawArea.closePath();
+ drawArea.fillStyle = this.color;
+ drawArea.fill();
+ };
+};
+
+function setup(){
+ particles = [];
+ resizeReset();
+ for (let i = 0; i < opts.particleAmount; i++){
+ particles.push( new Particle() );
+ }
+ window.requestAnimationFrame(loop);
+}
+
+function loop(){
+ window.requestAnimationFrame(loop);
+ drawArea.clearRect(0,0,w,h);
+ for (let i = 0; i < particles.length; i++){
+ particles[i].update();
+ particles[i].draw();
+ }
+ for (let i = 0; i < particles.length; i++){
+ linkPoints(particles[i], particles);
+ }
+}
+
+const canvasBody = document.getElementById("canvas"),
+drawArea = canvasBody.getContext("2d");
+let delay = 200, tid,
+rgb = opts.lineColor.match(/\d+/g);
+resizeReset();
+setup();
diff --git a/assets/dist/index.html b/assets/dist/index.html
index 1a4aae9181d9fa7a48f5b53d8d76e26dbce7f928..2fb45d6d849da9231f8a620c85055d5b30dcf1f2 100644
--- a/assets/dist/index.html
+++ b/assets/dist/index.html
@@ -4,11 +4,17 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>s3rius radio</title>
+ <link rel="icon" type="image/png" href="scull.png"/>
+ <link rel="stylesheet" href="style.css">
</head>
<body>
- <video id="video" controls src="/stream" height="598" width="782" type="video/ogg; codecs=theora" autoplay="autoplay">
- Your user agent does not support the HTML5 Video element.
- </video>
+ <canvas id="canvas"></canvas>
+ <div id="cont">
+ <video id="video" controls src="/stream" height="720" width="1280" type="video/ogg; codecs=theora" autoplay="autoplay">
+ Your user agent does not support the HTML5 Video element.
+ </video>
+ </div>
</body>
+ <script src="back.js"></script>
</html>
diff --git a/assets/dist/scull.png b/assets/dist/scull.png
new file mode 100644
index 0000000000000000000000000000000000000000..e6ffd2ddea328626463978184897947387eba1ab
Binary files /dev/null and b/assets/dist/scull.png differ
diff --git a/assets/dist/style.css b/assets/dist/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..c2c28bcbdb9d52f0559c5f9d5ad12bc9f336f67f
--- /dev/null
+++ b/assets/dist/style.css
@@ -0,0 +1,26 @@
+body {
+ background: #222;
+ margin: 0rem;
+ min-height: 100vh;
+ font-family: Futura, sans-serif;
+}
+#canvas, #cont {
+ position: absolute;
+ display: block;
+ top: 0;
+ left: 0;
+ z-index: -1;
+}
+#cont {
+ opacity: 0.9;
+ min-height: 100vh;
+ width: 100vw;
+ z-index: 1;
+ color: #fff;
+ text-transform: uppercase;
+ font-size: 8vmin;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+}
diff --git a/assets/scripts/install.sh b/assets/scripts/install.sh
index 17fc70a2287e0d795db413c22ccec27fbc977f4e..450ff930555b884a1d452c2593f5630496ea6652 100644
--- a/assets/scripts/install.sh
+++ b/assets/scripts/install.sh
@@ -1,4 +1,5 @@
HELPER_NAME="s3stream_helper"
+docker run --rm -v memes_nginx_shared:/shared/ --name "${HELPER_NAME}" alpine rm -rfv /shared/s3rius_stream
docker run -v memes_nginx_shared:/shared/ --name "${HELPER_NAME}" alpine true
docker cp ./assets/dist "${HELPER_NAME}:/shared/s3rius_stream"
docker rm "$(docker stop "${HELPER_NAME}")"
diff --git a/assets/utils/nginx.conf b/assets/utils/nginx.conf
index 975dcf74d96a0d47b52a9496fec4a8323243d3a5..e1976fee3194a42032a9b4cebe557c3fc2b46841 100644
--- a/assets/utils/nginx.conf
+++ b/assets/utils/nginx.conf
@@ -13,6 +13,7 @@ server{
include /var/nginx/common/server.conf;
client_max_body_size 100m;
+ root /shared/s3rius_stream;
access_log /var/log/nginx/s3rius.ddns.net_access.log combined;
error_log /var/log/nginx/s3rius.ddns.net_error.log;
@@ -30,12 +31,18 @@ server{
proxy_pass http://anime_stream/;
}
- location / {
+ location /stream {
resolver 127.0.0.11 valid=30s;
proxy_http_version 1.1;
proxy_set_header Connection "";
default_type video/webm;
proxy_pass http://radio_stream/;
}
-
+
+ location / {
+ include /var/nginx/common/common_location.conf;
+ index index.html;
+ try_files $uri$args $uri$args/ /index.html;
+ }
+
}