Add Youtube Preview image and URL

4 years ago · bdba5cba56
parent 5cd4a03fe7
commit bdba5cba56
4 changed files with 38 additions and 10 deletions
--- a/css/style.css
+++ b/css/style.css
@ -17,8 +17,8 @@ body {
 }

 #RadioBox{
-  width: 410px;
-  height: 350px;
+  width: 450px;
+  height: 490px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  padding: 0 5px;
--- a/index.html
+++ b/index.html
@ -14,10 +14,7 @@
 		integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
 		crossorigin="anonymous">
 	</script>
-<!--
-	<script src="js/lastfm.api.md5.js" type="text/javascript"></script>
-	<script src="js/lastfm.api.js" type="text/javascript"></script>
-->
+
 </head>

 <body>
@ -29,6 +26,15 @@

 		<div id="PlayStat">Stopped</div>
 		<br>
+
+		<a name="YouTubeURL" href="" target="_blank">
+			<img name="YouTubeThumb" width="210" height="170"
+				src="">
+			</img>
+		</a>
+
+		<br>
+		<br>
 		<div class="tagWindow">
 			<form name="artistURL" action="" target="_blank">
 				<button class="tagA">
--- a/js/radio.js
+++ b/js/radio.js
@ -1,5 +1,5 @@
-var MPDartist, MPDsong, MPDfile, MPDCurr;
-MPDartist = MPDsong = MPDfile = MPDCurr = 'empty';
+var MPDartist, MPDsong, MPDfile, MPDCurr, YouURL;
+MPDartist = MPDsong = MPDfile = MPDCurr = YouURL = 'empty';

 function show()
 {
@ -32,10 +32,11 @@ function show()
        MPDsong = MPDfile.replace(/^.*\s-/,'').replace(/^\s*/,'').replace(/\s*$/,'');
        getArtistURL(MPDartist);
        $("#trackname span").text(MPDartist+" - "+MPDsong);
+        getYouTubeRequest(MPDfile);
      } else if (MPDCurr != MPDfile) {
          getArtistURL(MPDartist);
          $("#trackname span").text(MPDartist+" - "+MPDsong);
-
+          getYouTubeRequest(MPDfile);
        }
      MPDCurr = MPDfile;
    });
@ -66,3 +67,24 @@ function getSongURL(MPDartist, MPDsong)
  document.querySelector('form[name="songURL"]').setAttribute('action', MPDsong);
  console.log(MPDsong)
 }
+
+// Функция для поиска по YouTube
+function getYouTubeRequest(MPDfile) {
+    var url = 'https://www.googleapis.com/youtube/v3/search';
+    var params = {
+        // part: 'id',
+        part: 'snippet',
+        key: 'AIzaSyCqebfGlbbqoM0oEbbBsK87IZhlS3_Urcg',
+        q: MPDfile
+    };
+
+    $.getJSON(url, params, showResults);
+}
+
+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);
+}
--- a/2
+++ b/2
@ -1 +1 @@
-/var/log/trackname
+/tmp/trackname