Some Improves

5 years ago · 0afbb5f439
parent 1c4c1b7a45
commit 0afbb5f439
9 changed files with 232 additions and 67 deletions
--- a/css/soc_link.css
+++ b/css/soc_link.css
@ -0,0 +1,39 @@
+@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
+.social a {
+  text-align: center;
+  width:  2.3em;
+  height: 2.3em;
+  float: left;
+  background: #000;
+  border: 0.1em solid #ccc;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);
+  border-radius: 2em;
+  margin: 0 1em 1em 0;
+  padding:        0.6em;
+  padding-top:    0.6em;
+  padding-right:  0.6em;
+  padding-bottom: 0.6em;
+  padding-left:   0.6em;
+  color: #fff;
+  font-size: 0.8vw;
+}
+/* .github a:hover {background: #191919; color: #fff;}
+.youtube a:hover {background: #c4302b; color: #fff;}
+.google-pluse a:hover {background: #DD4B39; color: #fff;}
+.twitter a:hover {background: #00acee; color: #fff;}
+.instagram a:hover {background: #3f729b; color: #fff;}
+.facebook a:hover {background: #3b5998; color: #fff;}
+.skype a:hover {background: #00aff0; color: #fff;}
+.vk a:hover {background: #5d84ae; color: #fff;}
+.odnoklassniki a:hover {background: #f93; color: #fff;}
+.pinterest a:hover {background: #c8232c; color: #fff;}
+.linkedin a:hover {background: #0e76a8; color: #fff;}
+.telegram a:hover {background: #249bd7; color: #fff;}
+.tumblr a:hover {background: #34526f; color: #fff;}
+.windows a:hover {background: #125acd; color: #fff;}
+.whatsapp a:hover {background: #50b154; color: #fff;}
+.weibo a:hover {background: #d52b2b; color: #fff;}
+.dropbox a:hover {background: #1087dd; color: #fff;} */
+
+.telegram a:hover {background: #fff; color: #000;}
+.lastfm a:hover {background: #fff; color: #000;}
--- a/css/style.css
+++ b/css/style.css
@ -3,36 +3,42 @@ body {
 }

 .parent {
-  width: 100%;
+  width:  100%;
  height: 100%;
  position: fixed;
  top: 0;
  background: url(/pic/bg.jpg) no-repeat center center / cover;
  left: 0;
  display: flex;
-  align-items: center;
-  align-content: center;
-  justify-content: left;
-  overflow: auto;
+  flex-direction: row;
 }

-#RadioBox{
-  width: 450px;
+#RadioBox {
+  width:  25%;
  height: 100%;
  background-color: rgba(60, 60, 60, 0.9);
-  /* border-radius: 10px; */
  padding: 0 5px;
  color: #fff;
 }

-.tagBOX{
-  width: 410px;
-  height: 150px;
+#spec {
+  width:  75%;
+  height: 100%;
+}
+
+.canvas {
+  width:  100%;
+  height: 100%;
+}
+
+.youtubeIMG {
+  max-width:60%;
+  height:auto;
 }

 .tagA {
  width: 100%;
-	height: 20px;
+	/* height: 20px; */
 	border-radius: 5px 5px 0 0;
 	border: #f54e4e;
 	background-color: #000;
@ -42,7 +48,8 @@ body {
 	cursor: pointer;
 	text-align: center;
  margin-left: auto;
-  margin-right: auto
+  margin-right: auto;
+  font-size: 1vw;
 }

 .tagA:hover {
@ -67,20 +74,20 @@ body {
 h1::before {
  content: '';
  display: inline-block;
-  margin:0 10px;
-  width: 25px;
-  height: 25px;
-  -webkit-border-radius: 25px;
-  -moz-border-radius: 25px;
-  border-radius: 25px;
+  margin: 0 10px;
+  width:  0.8em;
+  height: 0.8em;
+  -webkit-border-radius: 0.8em;
+  -moz-border-radius: 0.8em;
+  border-radius: 0.8em;
  background: red;
  animation: blink 3s linear infinite;
 }

-@keyframes blink{
-  0%{opacity: 0;}
+@keyframes blink {
+  0%{opacity:   0;}
  25%{opacity: .5;}
-  50%{opacity: 1;}
+  50%{opacity:  1;}
  75%{opacity: .5;}
  100%{opacity: 0;}
 }
@ -88,13 +95,14 @@ h1::before {
 h1 {
  text-align: center
  float:left;
-  margin:10px 50px;
+  /* margin:10px 50px; */
+  font-size: 2vw;
 }

 .btn {
-  width: 100px;
-	height: 60px;
-	border-radius: 5px;
+  width: 7em;
+  height: 4.5em;
+	border-radius: 0.4em;
 	border: #f54e4e;
 	background-color: #000;
 	color: #fff;
@ -103,7 +111,7 @@ h1 {
 	cursor: pointer;
 	text-align: center;
 	margin: auto;
-	justify-content : center;
+	font-size: 0.8vw;

 }

@ -122,18 +130,18 @@ h1 {
 }

 .mute_btn {
-  width: 30px;
-	height: 30px;
-	border-radius: 5px;
-	border: #f54e4e;
-	background-color: #000;
-	color: #fff;
-	transition: 0.5s ease all;
-	outline: none;
-	cursor: pointer;
-	text-align: center;
-  margin-right: 10px;
-	//margin: auto;
+  width: 2em;
+  height: 2em;
+  border-radius: 0.4em;
+  border: #f54e4e;
+  background-color: #000;
+  color: #fff;
+  transition: 0.5s ease all;
+  outline: none;
+  cursor: pointer;
+  text-align: center;
+  margin-right: 0.7em;
+  font-size: 0.8vw;
 }

 .mute_btn:hover {
@ -162,7 +170,7 @@ h1 {

 .tlist {
  width: 100%;
-  height: 35%;
+  height: 33%;
  border-radius: 0 0 5px 5px;
  border: #f54e4e;
  background-color: #fff;
@ -187,6 +195,16 @@ h1 {
  color: #000;
 }

+.soc_links {
+	margin: auto;
+	display: -webkit-flex;
+	display: -moz-flex;
+	display: -ms-flex;
+	display: -o-flex;
+	display: inline-flex;
+}
+
 DIV {
-  text-align: center
+  text-align: center;
+  font-size: 1vw;
 }
--- a/css/volume.css
+++ b/css/volume.css
@ -4,15 +4,15 @@

 /* The slider itself */
 .slider {
-  -webkit-appearance: none;  /* Override default CSS styles */
-  appearance: none;
-  width: 40%; /* Full-width */
-  height: 20px; /* Specified height */
-  background: #d3d3d3; /* Grey background */
-  outline: none; /* Remove outline */
-  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
+  -webkit-appearance: none;
+  width:  50%;
+  height: 1.6em;
+  background: #d3d3d3;
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: .2s;
  transition: opacity .2s;
+  font-size: 0.8vw;
 }

 /* Mouse-over effects */
@ -24,15 +24,17 @@
 .slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
-  width: 25px; /* Set a specific slider handle width */
-  height: 25px; /* Slider handle height */
+  width:  2em;
+  height: 2em;
  background: #000;
-  cursor: pointer; /* Cursor on hover */
+  cursor: pointer;
+  font-size: 0.8vw;
 }

 .slider::-moz-range-thumb {
-  width: 25px; /* Set a specific slider handle width */
-  height: 25px; /* Slider handle height */
-  background: #000; /* Green background */
-  cursor: pointer; /* Cursor on hover */
+  width:  2em;
+  height: 2em;
+  background: #000;
+  cursor: pointer;
+  font-size: 0.8vw;
 }
--- a/index.html
+++ b/index.html
@ -3,18 +3,23 @@

 <head>
 	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta property="og:title" content="Just Radio" />
+	<meta property="og:site_name" content="My Radio" />
+	<meta property="og:url" content="http://radio.santic-zombie.ru/" />
+	<meta property="og:description" content="My Simple Radio, enjoy!" />
+	<meta property="og:image" content="/pic/kek.jpg" />
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
 	<link rel="stylesheet" type="text/css" href="/css/style.css">
 	<link rel="stylesheet" type="text/css" href="/css/msgbox.css">
 	<link rel="stylesheet" type="text/css" href="/css/scroll_text.css">
 	<link rel="stylesheet" type="text/css" href="/css/volume.css">
+	<link rel="stylesheet" type="text/css" href="/css/soc_link.css">
 	<title>My Test Radio</title>
 	<script
 		src="https://code.jquery.com/jquery-3.4.1.js"
 		integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
 		crossorigin="anonymous">
 	</script>
-
 </head>

 <body>
@ -25,16 +30,18 @@
 		<h1>Just Radio</h1>

 		<div id="PlayStat">Stopped</div>
+
 		<br>

 		<a name="YouTubeURL" href="" target="_blank">
-			<img name="YouTubeThumb" width="336" height="188"
+			<img class="youtubeIMG" name="YouTubeThumb" width="336" height="188"
 				src="">
 			</img>
 		</a>

 		<br>
 		<br>
+		
 		<div class="tagWindow">
 			<form name="artistURL" action="" target="_blank">
 				<button class="tagA">
@ -82,13 +89,32 @@
 		<div id="track_list" class=tlist>
 		</div>

+		<br>
+
+		<div class=soc_links>
+			<div class="social telegram">
+    		<a href="https://t.me/santicsRadio" target="_blank"><i class="fa fa-paper-plane fa-2x"></i></a>
+			</div>
+			<div class="social lastfm">
+    		<a href="https://www.last.fm/ru/user/just-radio" target="_blank"><i class="fa fa-lastfm-square fa-2x" aria-hidden="true"></i></a>
+			</div>
+		</div>
+
 		<div id="jGrowl"></div>

 	</div>
+
+	<div id=spec>
+		<canvas id="canvas" class=canvas></canvas>
+	</div>
+
 </div>

+
+
 <script src="js/audio.js" type="text/javascript"></script>
 <script src="js/radio.js" type="text/javascript"></script>
+<script src="js/visual.js" type="text/javascript"></script>

 </body>

--- a/js/audio.js
+++ b/js/audio.js
@ -2,6 +2,7 @@ var stream_url = 'http://stream.santic-zombie.ru';
 var audio      = new Audio(stream_url);
 audio.volume   = 0.05;

+
 var play = document.getElementById('play');
 play.addEventListener('click', function() {
  var   MsgText    = $('<div id="message-success"><p>Play</p></div>');
--- a/js/radio.js
+++ b/js/radio.js
@ -79,18 +79,39 @@ function getYouTubeRequest(MPDfile) {
        key: 'AIzaSyCfkMY2Nk3QwEh1Tjdqm-8GueBqOS5jgeI',
        q: MPDfile
    };
-    $.getJSON(url, params, showResults);
-}
+    // $.getJSON(url, params, showResults);
+    $.getJSON(url, params, function() {
+      console.log( "success" );
+      })
+      .done(function(results) {
+        // showResults;
+        console.log( "second success" );
+        var entries = results.items;
+        thumb = entries[0].snippet.thumbnails.medium.url;
+        YouURL = entries[0].id.videoId;
+        document.querySelector('img[name="YouTubeThumb"]').setAttribute('src', thumb);
+        document.querySelector('a[name="YouTubeURL"]').setAttribute('href', "https://www.youtube.com/watch?v="+YouURL);
+        console.log("https://www.youtube.com/watch?v="+YouURL);
+      })
+      .fail(function() {
+        console.log( "error" );
+        document.querySelector('img[name="YouTubeThumb"]').setAttribute('src', '/pic/error.jpg');
+        document.querySelector('a[name="YouTubeURL"]').setAttribute('href', "https://www.youtube.com/watch?v=empty");
+      });

-function showResults(results) {
-  var entries = results.items;
-  thumb = entries[0].snippet.thumbnails.medium.url;
-  YouURL = entries[0].id.videoId;
-  document.querySelector('img[name="YouTubeThumb"]').setAttribute('src', thumb);
-  document.querySelector('a[name="YouTubeURL"]').setAttribute('href', "https://www.youtube.com/watch?v="+YouURL);
-  console.log("https://www.youtube.com/watch?v="+YouURL);
 }

+// Процедура для формирования ссылки и картинки на Youtube
+// function showResults(results) {
+//   var entries = results.items;
+//   thumb = entries[0].snippet.thumbnails.medium.url;
+//   YouURL = entries[0].id.videoId;
+//   document.querySelector('img[name="YouTubeThumb"]').setAttribute('src', thumb);
+//   document.querySelector('a[name="YouTubeURL"]').setAttribute('href', "https://www.youtube.com/watch?v="+YouURL);
+//   console.log("https://www.youtube.com/watch?v="+YouURL);
+// }
+
+// Процедура формирования списка проигрынных треков
 function addText(MPDfile) {
  let last_track = document.createElement('div');
  last_track.className = "list_el";
--- a/js/visual.js
+++ b/js/visual.js
@ -0,0 +1,58 @@
+window.onload = function() {
+
+  audio.src = 'http://stream.santic-zombie.ru';
+  audio.crossOrigin = "anonymous";
+  audio.load();
+
+  var context = new AudioContext();
+  var src = context.createMediaElementSource(audio);
+  var analyser = context.createAnalyser();
+
+  var canvas = document.getElementById("canvas");
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  var ctx = canvas.getContext("2d");
+
+  src.connect(analyser);
+  analyser.connect(context.destination);
+
+  analyser.fftSize = 256;
+
+  var bufferLength = analyser.frequencyBinCount;
+  console.log(bufferLength);
+
+  var dataArray = new Uint8Array(bufferLength);
+
+  var WIDTH = canvas.width;
+  var HEIGHT = canvas.height;
+
+  var barWidth = (WIDTH / bufferLength) * 2.5;
+  var barHeight;
+  var x = 0;
+
+  function renderFrame() {
+    requestAnimationFrame(renderFrame);
+
+    x = 0;
+
+    analyser.getByteFrequencyData(dataArray);
+
+    // ctx.fillStyle = "rgba(60, 60, 60, 0)";
+    ctx.clearRect(0, 0, WIDTH, HEIGHT);
+
+    for (var i = 0; i < bufferLength; i++) {
+      barHeight = dataArray[i];
+
+      var r = barHeight + (25 * (i/bufferLength));
+      var g = 250 * (i/bufferLength);
+      var b = 50;
+
+      ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
+      ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
+
+      x += barWidth + 1;
+    }
+  }
+
+  renderFrame();
+}
--- a/pic/error.jpg
+++ b/pic/error.jpg
--- a/pic/kek.jpg
+++ b/pic/kek.jpg