mirror of
https://github.com/KevinMidboe/zoff.git
synced 2025-10-29 18:00:23 +00:00
Added some stying, and made player controls work again
This commit is contained in:
Kasper Rynning-Tønnesen
27
index.php
27
index.php
@@ -44,11 +44,12 @@
|
||||
</ul>
|
||||
<form id="searchform">
|
||||
<div>
|
||||
<input id="search" type="search" required title="Search for songs..." spellcheck="false" placeholder="Search" onsubmit="null;" autocomplete="off">
|
||||
<input id="search" class="search_input" type="search" required title="Search for songs..." spellcheck="false" placeholder="Search" onsubmit="null;" autocomplete="off">
|
||||
<!--<label for="search"><i class="mdi-action-search"></i></label>
|
||||
<i class="mdi-navigation-close"></i>-->
|
||||
</div>
|
||||
</form>
|
||||
<div id="results"></div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -58,23 +59,35 @@
|
||||
<div class="col s12 m9 video-container">
|
||||
<div id="player" class="ytplayer"></div>
|
||||
<div id="controls">
|
||||
<div id="playpause"><i class="mdi-av-play-arrow"></i></div>
|
||||
<div id="playpause">
|
||||
<i id="play" class="mdi-av-play-arrow hide"></i>
|
||||
<i id="pause" class="mdi-av-pause"></i>
|
||||
</div>
|
||||
<div id="duration">00:00 / 00:00</div>
|
||||
<div id="volume-button"><i class="mdi-av-volume-up"></i></div>
|
||||
<div id="fullscreen"><i class="mdi-navigation-fullscreen"></i></div>
|
||||
<div id="volume-button">
|
||||
<i id="v-mute" class="mdi-av-volume-off"></i>
|
||||
<i id="v-low" class="mdi-av-volume-mute"></i>
|
||||
<i id="v-medium" class="mdi-av-volume-down"></i>
|
||||
<i id="v-full" class="mdi-av-volume-up"></i>
|
||||
</div>
|
||||
<div id="volume"></div>
|
||||
<div id="fullscreen">
|
||||
<i class="mdi-navigation-fullscreen"></i>
|
||||
</div>
|
||||
<div id="bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="playlist" class="col s12 m3">
|
||||
<div id="wrapper">
|
||||
<div id="list-song-html">
|
||||
<div id="list-song" class="card list-song">
|
||||
<a class="clickable votebg">
|
||||
<a class="clickable votebg" title="Vote!">
|
||||
<span class="card-image cardbg list-image"></span>
|
||||
</a>
|
||||
<span class="card-content">
|
||||
<span class="flow-text truncate list-title"></span>
|
||||
<span class="highlighted hide">Votes: </span>
|
||||
<span class="list-votes hide"></span>
|
||||
<span class="highlighted">Votes: </span>
|
||||
<span class="list-votes"></span>
|
||||
</span>
|
||||
<div class="card-action hide">
|
||||
<a id="del" onclick="vote('id','del')" class="clickable" class="waves-effect waves-orange btn-flat">Remove</a>
|
||||
|
||||
@@ -158,6 +158,24 @@ nav{
|
||||
height: 11%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.list-song{background-color: rgba(255, 255, 255, 0.1);}
|
||||
.card .card-content{padding:0;}
|
||||
.list-title{display:block; color:white;}
|
||||
.list-title{display:block; color:white;font-size:1em; text-align:left;}
|
||||
.card-image{cursor:pointer}
|
||||
.card{margin:5px 0 5px 0 !important;}
|
||||
#result img{float:left;padding-right:20px !important;}
|
||||
#result{height:100px;margin-left:40px;}
|
||||
#results{margin-top:-12px;background-color: rgba(0,0,0,0.6);}
|
||||
.result:hover {
|
||||
background-color: rgba(0,0,0,0.4);}
|
||||
.result {
|
||||
border-bottom: solid 1px #E5E5E5;
|
||||
text-align: left;
|
||||
height: 70px;
|
||||
cursor: pointer;
|
||||
width:93%;
|
||||
}
|
||||
.result_info{margin-top:-36px;}
|
||||
|
||||
#settings-button{color:white !important;}
|
||||
|
||||
0
static/images/squareicon.png
Normal file → Executable file
0
static/images/squareicon.png
Normal file → Executable file
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 37 KiB |
0
static/images/squareicon_small.png
Normal file → Executable file
0
static/images/squareicon_small.png
Normal file → Executable file
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
263
static/js/lib/materialize.js
vendored
263
static/js/lib/materialize.js
vendored
@@ -2791,269 +2791,6 @@ $(document).ready(function(){
|
||||
}
|
||||
|
||||
}( jQuery ));
|
||||
;(function ($) {
|
||||
|
||||
$.fn.slider = function (options) {
|
||||
var defaults = {
|
||||
indicators: true,
|
||||
height: 400,
|
||||
transition: 500,
|
||||
interval: 6000
|
||||
}
|
||||
options = $.extend(defaults, options);
|
||||
|
||||
return this.each(function() {
|
||||
|
||||
// For each slider, we want to keep track of
|
||||
// which slide is active and its associated content
|
||||
var $this = $(this);
|
||||
var $slider = $this.find('ul.slides').first();
|
||||
var $slides = $slider.find('li');
|
||||
var $active_index = $slider.find('.active').index();
|
||||
var $active;
|
||||
if ($active_index != -1) { $active = $slides.eq($active_index); }
|
||||
|
||||
// Transitions the caption depending on alignment
|
||||
function captionTransition(caption, duration) {
|
||||
if (caption.hasClass("center-align")) {
|
||||
caption.velocity({opacity: 0, translateY: -100}, {duration: duration, queue: false});
|
||||
}
|
||||
else if (caption.hasClass("right-align")) {
|
||||
caption.velocity({opacity: 0, translateX: 100}, {duration: duration, queue: false});
|
||||
}
|
||||
else if (caption.hasClass("left-align")) {
|
||||
caption.velocity({opacity: 0, translateX: -100}, {duration: duration, queue: false});
|
||||
}
|
||||
}
|
||||
|
||||
// This function will transition the slide to any index of the next slide
|
||||
function moveToSlide(index) {
|
||||
if (index >= $slides.length) index = 0;
|
||||
else if (index < 0) index = $slides.length -1;
|
||||
|
||||
$active_index = $slider.find('.active').index();
|
||||
|
||||
// Only do if index changes
|
||||
if ($active_index != index) {
|
||||
$active = $slides.eq($active_index);
|
||||
$caption = $active.find('.caption');
|
||||
|
||||
$active.removeClass('active');
|
||||
$active.velocity({opacity: 0}, {duration: options.transition, queue: false, easing: 'easeOutQuad',
|
||||
complete: function() {
|
||||
$slides.not('.active').velocity({opacity: 0, translateX: 0, translateY: 0}, {duration: 0, queue: false});
|
||||
} });
|
||||
captionTransition($caption, options.transition);
|
||||
|
||||
|
||||
// Update indicators
|
||||
if (options.indicators) {
|
||||
$indicators.eq($active_index).removeClass('active');
|
||||
}
|
||||
|
||||
$slides.eq(index).velocity({opacity: 1}, {duration: options.transition, queue: false, easing: 'easeOutQuad'});
|
||||
$slides.eq(index).find('.caption').velocity({opacity: 1, translateX: 0, translateY: 0}, {duration: options.transition, delay: options.transition, queue: false, easing: 'easeOutQuad'});
|
||||
$slides.eq(index).addClass('active');
|
||||
|
||||
|
||||
// Update indicators
|
||||
if (options.indicators) {
|
||||
$indicators.eq(index).addClass('active');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Set height of slider
|
||||
if (options.height != 400) {
|
||||
$this.height(options.height + 40);
|
||||
$slider.height(options.height);
|
||||
}
|
||||
|
||||
// Set initial positions of captions
|
||||
$slides.find('.caption').each(function () {
|
||||
captionTransition($(this), 0);
|
||||
});
|
||||
|
||||
// Set initial dimensions of images
|
||||
// $slides.find('img').each(function () {
|
||||
// $(this).load(function () {
|
||||
// if ($(this).width() < $(this).parent().width()) {
|
||||
// $(this).css({width: '100%', height: 'auto'});
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
|
||||
// Move img src into background-image
|
||||
$slides.find('img').each(function () {
|
||||
$(this).css('background-image', 'url(' + $(this).attr('src') + ')' );
|
||||
$(this).attr('src', 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==');
|
||||
});
|
||||
|
||||
// dynamically add indicators
|
||||
if (options.indicators) {
|
||||
var $indicators = $('<ul class="indicators"></ul>');
|
||||
$slides.each(function( index ) {
|
||||
var $indicator = $('<li class="indicator-item"></li>');
|
||||
|
||||
// Handle clicks on indicators
|
||||
$indicator.click(function () {
|
||||
var $parent = $slider.parent();
|
||||
var curr_index = $parent.find($(this)).index();
|
||||
moveToSlide(curr_index);
|
||||
|
||||
// reset interval
|
||||
clearInterval($interval);
|
||||
$interval = setInterval(
|
||||
function(){
|
||||
$active_index = $slider.find('.active').index();
|
||||
if ($slides.length == $active_index + 1) $active_index = 0; // loop to start
|
||||
else $active_index += 1;
|
||||
|
||||
moveToSlide($active_index);
|
||||
|
||||
}, options.transition + options.interval
|
||||
);
|
||||
});
|
||||
$indicators.append($indicator);
|
||||
});
|
||||
$this.append($indicators);
|
||||
$indicators = $this.find('ul.indicators').find('li.indicator-item');
|
||||
}
|
||||
|
||||
if ($active) {
|
||||
$active.show();
|
||||
}
|
||||
else {
|
||||
$slides.first().addClass('active').velocity({opacity: 1}, {duration: options.transition, queue: false, easing: 'easeOutQuad'});
|
||||
|
||||
$active_index = 0;
|
||||
$active = $slides.eq($active_index);
|
||||
|
||||
// Update indicators
|
||||
if (options.indicators) {
|
||||
$indicators.eq($active_index).addClass('active');
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust height to current slide
|
||||
$active.find('img').each(function() {
|
||||
$active.find('.caption').velocity({opacity: 1, translateX: 0, translateY: 0}, {duration: options.transition, queue: false, easing: 'easeOutQuad'});
|
||||
});
|
||||
|
||||
// auto scroll
|
||||
$interval = setInterval(
|
||||
function(){
|
||||
$active_index = $slider.find('.active').index();
|
||||
moveToSlide($active_index + 1);
|
||||
|
||||
}, options.transition + options.interval
|
||||
);
|
||||
|
||||
|
||||
// HammerJS, Swipe navigation
|
||||
|
||||
// Touch Event
|
||||
var panning = false;
|
||||
var swipeLeft = false;
|
||||
var swipeRight = false;
|
||||
|
||||
$this.hammer({
|
||||
prevent_default: false
|
||||
}).bind('pan', function(e) {
|
||||
if (e.gesture.pointerType === "touch") {
|
||||
|
||||
// reset interval
|
||||
clearInterval($interval);
|
||||
|
||||
var direction = e.gesture.direction;
|
||||
var x = e.gesture.deltaX;
|
||||
var velocityX = e.gesture.velocityX;
|
||||
|
||||
$curr_slide = $slider.find('.active');
|
||||
$curr_slide.velocity({ translateX: x
|
||||
}, {duration: 50, queue: false, easing: 'easeOutQuad'});
|
||||
|
||||
// Swipe Left
|
||||
if (direction === 4 && (x > ($this.innerWidth() / 2) || velocityX < -0.65)) {
|
||||
swipeRight = true;
|
||||
}
|
||||
// Swipe Right
|
||||
else if (direction === 2 && (x < (-1 * $this.innerWidth() / 2) || velocityX > 0.65)) {
|
||||
swipeLeft = true;
|
||||
}
|
||||
|
||||
// Make Slide Behind active slide visible
|
||||
var next_slide;
|
||||
if (swipeLeft) {
|
||||
next_slide = $curr_slide.next();
|
||||
if (next_slide.length === 0) {
|
||||
next_slide = $slides.first();
|
||||
}
|
||||
next_slide.velocity({ opacity: 1
|
||||
}, {duration: 300, queue: false, easing: 'easeOutQuad'});
|
||||
}
|
||||
if (swipeRight) {
|
||||
next_slide = $curr_slide.prev();
|
||||
if (next_slide.length === 0) {
|
||||
next_slide = $slides.last();
|
||||
}
|
||||
next_slide.velocity({ opacity: 1
|
||||
}, {duration: 300, queue: false, easing: 'easeOutQuad'});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}).bind('panend', function(e) {
|
||||
if (e.gesture.pointerType === "touch") {
|
||||
|
||||
$curr_slide = $slider.find('.active');
|
||||
panning = false;
|
||||
curr_index = $slider.find('.active').index();
|
||||
|
||||
if (!swipeRight && !swipeLeft) {
|
||||
// Return to original spot
|
||||
$curr_slide.velocity({ translateX: 0
|
||||
}, {duration: 300, queue: false, easing: 'easeOutQuad'});
|
||||
}
|
||||
else if (swipeLeft) {
|
||||
moveToSlide(curr_index + 1);
|
||||
$curr_slide.velocity({translateX: -1 * $this.innerWidth() }, {duration: 300, queue: false, easing: 'easeOutQuad',
|
||||
complete: function() {
|
||||
$curr_slide.velocity({opacity: 0, translateX: 0}, {duration: 0, queue: false});
|
||||
} });
|
||||
}
|
||||
else if (swipeRight) {
|
||||
moveToSlide(curr_index - 1);
|
||||
$curr_slide.velocity({translateX: $this.innerWidth() }, {duration: 300, queue: false, easing: 'easeOutQuad',
|
||||
complete: function() {
|
||||
$curr_slide.velocity({opacity: 0, translateX: 0}, {duration: 0, queue: false});
|
||||
} });
|
||||
}
|
||||
swipeLeft = false;
|
||||
swipeRight = false;
|
||||
|
||||
// Restart interval
|
||||
clearInterval($interval);
|
||||
$interval = setInterval(
|
||||
function(){
|
||||
$active_index = $slider.find('.active').index();
|
||||
if ($slides.length == $active_index + 1) $active_index = 0; // loop to start
|
||||
else $active_index += 1;
|
||||
|
||||
moveToSlide($active_index);
|
||||
|
||||
}, options.transition + options.interval
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
};
|
||||
}( jQuery ));
|
||||
;(function ($) {
|
||||
$(document).ready(function() {
|
||||
|
||||
|
||||
@@ -78,21 +78,20 @@ function populate_list(msg)
|
||||
{
|
||||
player_name = "#jplayer";
|
||||
}else player_name = "#player";
|
||||
$("#playlist").css({height: $(".video-container").height()});
|
||||
$("#playlist").css({height: $(".video-container").height()-5});
|
||||
$("#playlist").css({overflow: "hidden"});
|
||||
if(scroller === false)
|
||||
{
|
||||
myScroll = new IScroll('#playlist', {
|
||||
mouseWheel: true,
|
||||
scrollbars: true,
|
||||
scrollY: true,
|
||||
interactiveScrollbars: true,
|
||||
fadeScrollbars: false
|
||||
});
|
||||
scroller = true;
|
||||
myScroll.maxScrollY = myScroll.maxScrollY - 5;
|
||||
}else
|
||||
{
|
||||
myScroll.refresh();
|
||||
myScroll.maxScrollY = myScroll.maxScrollY - 5; //Hackish solution for not being able to scroll fully to the bottom, don't understand why this is fucked
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -102,10 +101,11 @@ function populate_list(msg)
|
||||
//ytplayer.pauseVideo();
|
||||
}else{
|
||||
myScroll.refresh();
|
||||
myScroll.maxScrollY = myScroll.maxScrollY - 5;
|
||||
}
|
||||
|
||||
$("#settings").css("visibility", "visible");
|
||||
$("#settings").css("opacity", "0.7");
|
||||
$("#settings").css("opacity", "1");
|
||||
$("#wrapper").css("opacity", "1");
|
||||
|
||||
}
|
||||
|
||||
0
static/js/nochan.js
Normal file → Executable file
0
static/js/nochan.js
Normal file → Executable file
@@ -1,85 +1,8 @@
|
||||
function initControls()
|
||||
function initYoutubeControls(player)
|
||||
{
|
||||
setInterval(durationSetter, 1000);
|
||||
}
|
||||
|
||||
function durationSetter()
|
||||
{
|
||||
if(ytplayer !== undefined && ytplayer.getDuration() !== undefined)
|
||||
{
|
||||
duration = ytplayer.getDuration();
|
||||
dMinutes = Math.floor(duration / 60);
|
||||
dSeconds = duration - dMinutes * 60;
|
||||
currDurr = ytplayer.getCurrentTime();
|
||||
if(currDurr > duration)
|
||||
currDurr = duration;
|
||||
minutes = Math.floor(currDurr / 60);
|
||||
seconds = currDurr - minutes * 60;
|
||||
document.getElementById("duration").innerHTML = pad(minutes)+":"+pad(seconds)+" <span id='dash'>/</span> "+pad(dMinutes)+":"+pad(dSeconds);
|
||||
per = (100 / duration) * currDurr;
|
||||
if(per >= 100)
|
||||
per = 100;
|
||||
else if(duration == 0)
|
||||
per = 0;
|
||||
$("#bar").width(per+"%");
|
||||
}
|
||||
}
|
||||
|
||||
function pad(n)
|
||||
{
|
||||
return n < 10 ? "0"+Math.floor(n) : Math.floor(n);
|
||||
}
|
||||
/*
|
||||
if(player !== undefined)
|
||||
{
|
||||
ytplayer = player;
|
||||
//initSlider();
|
||||
durationFixer = setInterval(durationSetter, 1000);
|
||||
}else
|
||||
{
|
||||
tag = document.createElement('script');
|
||||
tag.src = "https://www.youtube.com/iframe_api";
|
||||
firstScriptTag = document.getElementsByTagName('script')[0];
|
||||
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
||||
}
|
||||
elems = Array("volume", "duration", "mute", "fullscreen", "q");
|
||||
//elems = Array("volume", "duration", "fullscreen");
|
||||
var container = document.getElementById("controls");
|
||||
var newElem = document.createElement("div");
|
||||
newElem.id = "playpause";
|
||||
newElem.className = "play";
|
||||
container.appendChild(newElem);
|
||||
for(x = 0; x < elems.length; x++)
|
||||
{
|
||||
var newElemFor = document.createElement("div");
|
||||
newElemFor.id = elems[x];
|
||||
container.appendChild(newElemFor);
|
||||
}
|
||||
elems = Array("medium", "large", "hd1080", "auto");
|
||||
elemName = Array("Low", "Medium", "High", "Auto");
|
||||
newElem = document.createElement("div");
|
||||
newElem.id = "qS";
|
||||
newElem.className = "hide";
|
||||
|
||||
for(x = 0; x < elems.length; x++)
|
||||
{
|
||||
var newChild = document.createElement("div");
|
||||
newChild.className = "qChange";
|
||||
newChild.name = elems[x];
|
||||
newChild.setAttribute("onclick", "changeQuality('"+elems[x]+"');");
|
||||
newChild.innerHTML = elemName[x];
|
||||
newElem.appendChild(newChild);
|
||||
}
|
||||
container.appendChild(newElem);
|
||||
|
||||
newElem = document.createElement("div");
|
||||
newElem.id = "bar";
|
||||
|
||||
container.appendChild(newElem);
|
||||
|
||||
initControls();
|
||||
fitToScreen();
|
||||
$("#mute").hover(function(){hoverMute(true)}, function(){hoverMute(false)});
|
||||
setInterval(durationSetter, 1000);
|
||||
initControls();
|
||||
$(window).resize(function(){
|
||||
fitToScreen();
|
||||
});
|
||||
@@ -87,19 +10,9 @@ function pad(n)
|
||||
|
||||
function initControls()
|
||||
{
|
||||
document.getElementById("playpause").addEventListener("click", playPause);
|
||||
document.getElementById("q").addEventListener("click", settings);
|
||||
document.getElementById("mute").addEventListener("click", volumeOptions);
|
||||
document.getElementById("fullscreen").addEventListener("click", function()
|
||||
{
|
||||
document.getElementById("player").webkitRequestFullscreen();
|
||||
});
|
||||
//document.getElementById("controls").style.width= $(window).width()*0.6+"px";
|
||||
var classname = document.getElementsByClassName("qChange");
|
||||
/*for(var i=0; i< classname.length;i++)
|
||||
{
|
||||
classname[i].addEventListener("click", changeQuality);
|
||||
}
|
||||
document.getElementById("volume-button").addEventListener("click", mute_video);
|
||||
document.getElementById("playpause").addEventListener("click", play_pause);
|
||||
document.getElementById("fullscreen").addEventListener("click", fullscreen);
|
||||
}
|
||||
|
||||
function fitToScreen()
|
||||
@@ -109,30 +22,56 @@ function fitToScreen()
|
||||
player_name = "#jplayer";
|
||||
}else player_name = "#player";
|
||||
//document.getElementById("controls").style.top = document.getElementById("player").offsetTop + $("#player").height() + "px";
|
||||
document.getElementById("controls").style.top = $(player_name).position()["top"] + $(player_name).height() + "px";
|
||||
document.getElementById("controls").style.top = $(player_name).height() + "px";
|
||||
//document.getElementById("controls").style.left = document.getElementById("player").offsetLeft + "px";
|
||||
document.getElementById("controls").style.left = $(player_name).position()["left"] + "px";
|
||||
//document.getElementById("controls").style.left = $(player_name).position()["left"] + "px";
|
||||
//document.getElementById("controls").style.left = "10px";
|
||||
$("#controls").width($(player_name).width());
|
||||
document.getElementById("qS").style.top = "-80px";
|
||||
document.getElementById("qS").style.left = $("#controls").width()-125+"px";
|
||||
//document.getElementById("qS").style.top = "-80px";
|
||||
//document.getElementById("qS").style.left = $("#controls").width()-125+"px";
|
||||
|
||||
}
|
||||
|
||||
function initSlider()
|
||||
{
|
||||
if(localStorage.getItem("volume") !== undefined)
|
||||
{
|
||||
vol = localStorage.getItem("volume");
|
||||
}else
|
||||
vol = 100;
|
||||
$("#volume").slider({
|
||||
min: 0,
|
||||
max: 100,
|
||||
value: ytplayer.getVolume(),
|
||||
range: "min",
|
||||
animate: true,
|
||||
value: vol,
|
||||
range: "min",
|
||||
animate: true,
|
||||
slide: function(event, ui) {
|
||||
setVolume(ui.value);
|
||||
localStorage.setItem("volume", ui.value);
|
||||
}
|
||||
});
|
||||
//ytplayer.mute();
|
||||
$("#volume").slider("value", ytplayer.getVolume());
|
||||
choose_button(vol, false);
|
||||
//$("#volume").slider("value", ytplayer.getVolume());
|
||||
}
|
||||
|
||||
function fullscreen()
|
||||
{
|
||||
var playerElement = document.getElementById("player");
|
||||
var requestFullScreen = playerElement.requestFullScreen || playerElement.mozRequestFullScreen || playerElement.webkitRequestFullScreen;
|
||||
if (requestFullScreen) {
|
||||
requestFullScreen.bind(playerElement)();
|
||||
}
|
||||
}
|
||||
|
||||
function play_pause()
|
||||
{
|
||||
if(ytplayer.getPlayerState() == 1)
|
||||
{
|
||||
ytplayer.pauseVideo();
|
||||
}else if(ytplayer.getPlayerState() == 2 || ytplayer.getPlayerState() == 0)
|
||||
{
|
||||
ytplayer.playVideo();
|
||||
}
|
||||
}
|
||||
|
||||
function settings()
|
||||
@@ -153,9 +92,16 @@ function changeQuality(wantedQ)
|
||||
$("#qS").toggleClass("hide");
|
||||
}
|
||||
|
||||
function mute_video()
|
||||
{
|
||||
choose_button(0, true);
|
||||
ytplayer.mute();
|
||||
}
|
||||
|
||||
function setVolume(vol)
|
||||
{
|
||||
ytplayer.setVolume(vol);
|
||||
choose_button(vol, false);
|
||||
//console.log(vol); //NO LOGS FOR U LOL
|
||||
if(ytplayer.isMuted())
|
||||
ytplayer.unMute();
|
||||
@@ -167,6 +113,50 @@ function setVolume(vol)
|
||||
$("#mute").css("background","no-repeat url(static/player.webp) -0px -806px");
|
||||
}else if(vol > 66){
|
||||
$("#mute").css("background","no-repeat url(static/player.webp) -0px -1829px");
|
||||
}*/
|
||||
}
|
||||
|
||||
function choose_button(vol, mute)
|
||||
{
|
||||
if(!mute){
|
||||
if(vol >= 0 && vol <= 33){
|
||||
if(document.getElementById("v-full").className.split(" ").length == 1)
|
||||
$("#v-full").toggleClass("hide");
|
||||
if(document.getElementById("v-medium").className.split(" ").length == 1)
|
||||
$("#v-medium").toggleClass("hide");
|
||||
if(document.getElementById("v-low").className.split(" ").length == 2)
|
||||
$("#v-low").toggleClass("hide");
|
||||
if(document.getElementById("v-mute").className.split(" ").length == 1)
|
||||
$("#v-mute").toggleClass("hide");
|
||||
}else if(vol >= 34 && vol <= 66){
|
||||
if(document.getElementById("v-full").className.split(" ").length == 1)
|
||||
$("#v-full").toggleClass("hide");
|
||||
if(document.getElementById("v-medium").className.split(" ").length == 2)
|
||||
$("#v-medium").toggleClass("hide");
|
||||
if(document.getElementById("v-low").className.split(" ").length == 1)
|
||||
$("#v-low").toggleClass("hide");
|
||||
if(document.getElementById("v-mute").className.split(" ").length == 1)
|
||||
$("#v-mute").toggleClass("hide");
|
||||
}else if(vol >= 67 && vol <= 100){
|
||||
if(document.getElementById("v-full").className.split(" ").length == 2)
|
||||
$("#v-full").toggleClass("hide");
|
||||
if(document.getElementById("v-medium").className.split(" ").length == 1)
|
||||
$("#v-medium").toggleClass("hide");
|
||||
if(document.getElementById("v-low").className.split(" ").length == 1)
|
||||
$("#v-low").toggleClass("hide");
|
||||
if(document.getElementById("v-mute").className.split(" ").length == 1)
|
||||
$("#v-mute").toggleClass("hide");
|
||||
}
|
||||
}else
|
||||
{
|
||||
if(document.getElementById("v-full").className.split(" ").length == 1)
|
||||
$("#v-full").toggleClass("hide");
|
||||
if(document.getElementById("v-medium").className.split(" ").length == 1)
|
||||
$("#v-medium").toggleClass("hide");
|
||||
if(document.getElementById("v-low").className.split(" ").length == 1)
|
||||
$("#v-low").toggleClass("hide");
|
||||
if(document.getElementById("v-mute").className.split(" ").length == 2)
|
||||
$("#v-mute").toggleClass("hide");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -189,24 +179,21 @@ function playPause()
|
||||
|
||||
function durationSetter()
|
||||
{
|
||||
if(ytplayer !== undefined && ytplayer.getDuration() !== undefined)
|
||||
{
|
||||
duration = ytplayer.getDuration();
|
||||
dMinutes = Math.floor(duration / 60);
|
||||
dSeconds = duration - dMinutes * 60;
|
||||
currDurr = ytplayer.getCurrentTime();
|
||||
if(currDurr > duration)
|
||||
currDurr = duration;
|
||||
minutes = Math.floor(currDurr / 60);
|
||||
seconds = currDurr - minutes * 60;
|
||||
document.getElementById("duration").innerHTML = pad(minutes)+":"+pad(seconds)+" <span id='dash'>/</span> "+pad(dMinutes)+":"+pad(dSeconds);
|
||||
per = (100 / duration) * currDurr;
|
||||
if(per >= 100)
|
||||
per = 100;
|
||||
else if(duration == 0)
|
||||
per = 0;
|
||||
$("#bar").width(per+"%");
|
||||
}
|
||||
duration = ytplayer.getDuration();
|
||||
dMinutes = Math.floor(duration / 60);
|
||||
dSeconds = duration - dMinutes * 60;
|
||||
currDurr = ytplayer.getCurrentTime();
|
||||
if(currDurr > duration)
|
||||
currDurr = duration;
|
||||
minutes = Math.floor(currDurr / 60);
|
||||
seconds = currDurr - minutes * 60;
|
||||
document.getElementById("duration").innerHTML = pad(minutes)+":"+pad(seconds)+" <span id='dash'>/</span> "+pad(dMinutes)+":"+pad(dSeconds);
|
||||
per = (100 / duration) * currDurr;
|
||||
if(per >= 100)
|
||||
per = 100;
|
||||
else if(duration == 0)
|
||||
per = 0;
|
||||
$("#bar").width(per+"%");
|
||||
}
|
||||
|
||||
function pad(n)
|
||||
@@ -231,7 +218,7 @@ function volumeOptions()
|
||||
$("#mute").css("background","no-repeat url(static/player.webp) -0px -1767px");
|
||||
}else if(vol > 66){
|
||||
$("#mute").css("background","no-repeat url(static/player.webp) -0px -2604px");
|
||||
}
|
||||
}*/
|
||||
}
|
||||
else
|
||||
{
|
||||
@@ -267,11 +254,11 @@ function hoverMute(foo)
|
||||
}else if(vol > 66){
|
||||
$("#mute").css("background","no-repeat url(static/player.webp) -0px -1829px");
|
||||
}
|
||||
}
|
||||
}*/
|
||||
}
|
||||
//url(http://localhost/Kasperrt/static/player.webp) 0px -94px no-repeat
|
||||
|
||||
function logQ()
|
||||
{
|
||||
console.log(ytplayer.getPlaybackQuality());
|
||||
}*/
|
||||
}
|
||||
|
||||
@@ -144,9 +144,10 @@ function search(search_input){
|
||||
<img src='"+video_thumb+"' class='thumb'>\
|
||||
<div id='title'>"+data.title+"\
|
||||
<div class='result_info'>"+views+" views • "+length+"</div>\
|
||||
<input id='add' title='Add several songs' type='button' class='button' value='+' onclick=\"submit('"+data.id+"','"+video_title+"', false);\">\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>";
|
||||
//<input id='add' title='Add several songs' type='button' class='button' value='+' onclick=\"submit('"+data.id+"','"+video_title+"', false);\">\
|
||||
|
||||
//+data.uploader+" • "+
|
||||
//$("#results").append(finalhtml);
|
||||
wrapper += finalhtml;
|
||||
|
||||
@@ -150,11 +150,10 @@ function onPlayerStateChange(newState) {
|
||||
break;
|
||||
case 1:
|
||||
playing = true;
|
||||
/*if(document.getElementById("playpause").className == "play")
|
||||
{
|
||||
$("#playpause").toggleClass("play");
|
||||
$("#playpause").toggleClass("pause");
|
||||
}*/
|
||||
if(document.getElementById("play").className.split(" ").length == 1)
|
||||
$("#play").toggleClass("hide");
|
||||
if(document.getElementById("pause").className.split(" ").length == 2)
|
||||
$("#pause").toggleClass("hide");
|
||||
if(paused)
|
||||
{
|
||||
socket.emit('pos');
|
||||
@@ -163,11 +162,10 @@ function onPlayerStateChange(newState) {
|
||||
break;
|
||||
case 2:
|
||||
paused = true;
|
||||
/*if(document.getElementById("playpause").className == "pause")
|
||||
{
|
||||
$("#playpause").toggleClass("play");
|
||||
$("#playpause").toggleClass("pause");
|
||||
}*/
|
||||
if(document.getElementById("pause").className.split(" ").length == 1)
|
||||
$("#pause").toggleClass("hide");
|
||||
if(document.getElementById("play").className.split(" ").length == 2)
|
||||
$("#play").toggleClass("hide");
|
||||
break;
|
||||
case 3:
|
||||
break;
|
||||
@@ -206,8 +204,9 @@ function onPlayerReady(event) {
|
||||
ytplayer.seekTo(seekTo);
|
||||
}
|
||||
readyLooks();
|
||||
initControls();
|
||||
//initSlider();
|
||||
initYoutubeControls(ytplayer);
|
||||
initSlider();
|
||||
ytplayer.setVolume(localStorage.getItem("volume"));
|
||||
}
|
||||
|
||||
function readyLooks()
|
||||
|
||||
Reference in New Issue
Block a user