Fixed scrollbar disapearing on modal, and added width+height adjustment for embed, along with fixing error in position of controls of embed

index.php

@@ -152,7 +152,11 @@
               <p>Copy the code in the textarea, and paste on your website.</p>
               <p>
                 <input type="checkbox" id="autoplay" checked="checked" />
-                <label for="autoplay">Autoplay</label>
+                <label for="autoplay" class="padding_right_26">Autoplay</label>
+                <label for="width_embed" class="embed-label">Width</label>
+                <input type="number" value="600" id="width_embed" class="settings_embed" min="1" />
+                <label for="height_embed" class="padding_left_6 embed-label">Height</label>
+                <input type="number" value="300" id="height_embed" class="settings_embed" min="1" />
               </p>
               <textarea id="embed-area"></textarea>
             </div>
@@ -234,8 +238,8 @@
                 </div>
                 <div id="suggestions" class="tabs_height" style="display:none;">
                         <p class="suggest-title-info">YouTube Suggests:</p>
-                        <div class="suggest_bar" id="suggest-song-html"> 
-                        </div>  
+                        <div class="suggest_bar" id="suggest-song-html">
+                        </div>
                         <p class="suggest-title-info" id="user_suggests">Users Suggests:</p>
                         <div class="suggest_bar" id="user-suggest-html">
                         </div>

static/css/embed.css

@@ -148,7 +148,7 @@
     background-color:grey;
     width:50vw;
     color:white;
-    margin-top:0px;
+    margin-top:-6px;
 }
 
 #playpause, #duration, #volume-button
@@ -259,4 +259,4 @@
 {
     height:100%;
     background-color:rgba(0,0,0,0.5);
-}
+}

static/css/style.css

@@ -10,6 +10,29 @@
 
 .snow{-webkit-filter:brightness(100%);-moz-filter:brightness(100%);-o-filter:brightness(100%);filter:brightness(100%);width:5px; height:5px; background-color:white;z-index:1000000;pointer-events:none;position:absolute;border:1px solid white;border-radius:100px;}
 
+.settings_embed{
+  width:40px !important;
+  padding:0 10px !important;
+  border:none !important;
+}
+
+.settings_embed:focus{
+  border:none !important;
+  box-shadow: none !important;
+}
+
+.padding_right_26 {
+  padding-right: 26px !important;
+}
+
+.padding_left_6{
+  padding-left: 6px !important;
+}
+
+.embed-label{
+  font-size:1rem !important;
+}
+
 #embed-button{
   display:none;
 }
@@ -209,6 +232,7 @@ body {
     -ms-transition:background-color 1s;
     -o-transition:background-color 1s;
     transition:background-color 1s;
+    overflow-y:scroll !important;
 }
 
 .main, #main-row, .video-container, #playlist{

static/js/listeners.js

@@ -31,6 +31,9 @@ var blinking 			  = false;
 var access_token_data     = {};
 var spotify_authenticated = false;
 var not_import_html       = "";
+var embed_height          = 300;
+var embed_width           = 600;
+var embed_autoplay        = "&autoplay";
 
 if(localStorage.debug === undefined){
 	var debug = false;
@@ -204,7 +207,7 @@ function init(){
   $( "#results" ).hover( function() { $("div.result").removeClass("hoverResults"); i = 0; }, function(){ });
 	$("#search").focus();
 	$("#embed-button").css("display", "inline-block");
-	$("#embed-area").val('<embed src="https://zoff.no/embed.html#' + chan.toLowerCase() + '&autplay" width="600px" height="300px">');
+	$("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height));
 	$("#search").attr("placeholder", "Find song on YouTube...");
 
 }
@@ -282,6 +285,10 @@ function disable_debug(){
 	localStorage.debug = false;
 }
 
+function embed_code(autoplay, width, height){
+    return '<embed src="https://zoff.no/embed.html#' + chan.toLowerCase() + autoplay + '" width="' + width + 'px" height="' + height + 'px">';
+}
+
 function spotify_is_authenticated(bool){
     if(bool){
         if(localStorage.debug === "true"){
@@ -371,6 +378,18 @@ $(document).on('click', "#aprilfools", function(){
   $(".mega").css("-moz-transform", "rotate(0deg)");
 });
 
+$(document).on('keyup mouseup', '#width_embed', function(){
+    var that = $(this);
+    embed_width = that.val();
+    $("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height));
+});
+
+$(document).on('keyup mouseup', '#height_embed', function(){
+    var that = $(this);
+    embed_height = that.val();
+    $("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height));
+});
+
 $(document).on('click', ".chan-link", function(e){
   e.preventDefault();
   Nochan.to_channel($(this).attr("href"), false);
@@ -452,11 +471,9 @@ $(window).focus(function(){
 });
 
 $(document).on("change", "#autoplay", function() {
-	if(this.checked) {
-		$("#embed-area").val('<embed src="https://zoff.no/embed.html#' + chan.toLowerCase() + '&autplay" width="600px" height="300px">');
-	} else {
-		$("#embed-area").val('<embed src="https://zoff.no/embed.html#' + chan.toLowerCase() + '" width="600px" height="300px">');
-	}
+    if(this.checked) embed_autoplay = "&autoplay";
+    else embed_autoplay = "";
+	$("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height));
 });
 
 $(document).on("click", "#playbutton_remote", function(e) {