KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-10-29 18:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

I AM THE MASTER OF CSS. also v3 api works

Browse Source
This commit is contained in:
Nicolas A. Tonne
2015-04-24 23:43:12 +02:00
parent 518a3b5b45 2d18ee8ef6
commit 3451f433b3
4 changed files with 85 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
index.php
View File

@@ -25,8 +25,8 @@
<span class="hide-on-large-only">/</span> <span class="hide-on-large-only">/</span>
<span id="chan" class="chan clickable" title="Show big URL" onclick="show()"><?php echo(ucfirst($list));?></span> <span id="chan" class="chan clickable" title="Show big URL" onclick="show()"><?php echo(ucfirst($list));?></span>
</div> </div>
<ul class="title-container hide-on-med-and-down"> <ul class="title-container">
<li class="song-title" id="song-title" onclick="showSearch();"> <li class="song-title" id="song-title" onclick="showSearch();">
Loading... Loading...
</li> </li>
@@ -64,15 +64,17 @@
<ul class="side-nav" id="settings-bar"> <ul class="side-nav" id="settings-bar">
<?php include("php/panel.php");?> <?php include("php/panel.php");?>
</ul> </ul>
<div id="results"></div> <div id="results" class="search_results">
</div> <div id="temp-results">
<div class="nav-wrapper hide-on-large-only"> <div id="result" class="result">
<ul class="second-title-container"> <img class="thumb">
<li class="song-title second-title" id="second-song-title" onclick="showSearch();" title="Loading">Loading</li> <div id="title">
<li class="search-container hide" id="search-wrapper"> <span class="search-title"></span>
<input id="search" class="search_input" type="search" required="" title="Search for songs..." spellcheck="false" placeholder="Find song on youtube" onsubmit="null;" autocomplete="off"> <div class="result_info"></div>
</li> </div>
</ul> </div>
</div>
</div>
</div> </div>
</nav> </nav>
</div> </div>

41
static/css/style.css
View File

@@ -75,12 +75,12 @@ left: initial;
display: inline; display: inline;
} }
@media only screen and (min-width: 992px) { .title-container{
nav .zbrand { position: absolute;
display: inline-block; margin-top: 64px;
} width: 99%;
left: 0;
} }
.navbar-fixed { .navbar-fixed {
height: 128px; height: 128px;
} }
@@ -89,6 +89,16 @@ display: inline;
.navbar-fixed { .navbar-fixed {
height: 64px; height: 64px;
} }
nav .zbrand {
display: inline-block;
}
.title-container{
position: initial;
margin-top: initial;
width: 65%;
width: calc(90% - 256px - 130px);
left: initial;
}
} }
.fullwidth{ .fullwidth{
@@ -226,8 +236,6 @@ hide mdi-action-visibility mdi-action-visibility-off
} }
.title-container{ .title-container{
width: 65%;
width: calc(90% - 256px - 130px);
padding-left: 30px; padding-left: 30px;
display: inline-block; display: inline-block;
height: 100%; height: 100%;
@@ -333,11 +341,18 @@ hide mdi-action-visibility mdi-action-visibility-off
} }
.card-image{cursor:pointer} .card-image{cursor:pointer}
.card{margin:5px 0 5px 0 !important;} .card{margin:5px 0 5px 0 !important;}
#result img{float:left;padding-right:20px !important;} .result img{
#result{height:100px;margin-left:40px;} float:left;
height: 70px;
border-radius: 3px;
margin: 15px 20px;
}
.result{height:100px;margin-left:40px;}
#results{ #results{
background-color: rgba(0,0,0,0.6); background-color: rgba(0,0,0,0.6);
margin-top: -27px; margin-top: -27px;
max-height: 600px;
overflow: overlay;
} }
.result:hover { .result:hover {
background-color: rgba(0,0,0,0.4); background-color: rgba(0,0,0,0.4);
@@ -356,9 +371,7 @@ hide mdi-action-visibility mdi-action-visibility-off
} }
.result { .result {
border-bottom: solid 1px #E5E5E5; border-bottom: solid 1px rgba(229, 229, 229, 0.5);
text-align: left;
height: 70px;
cursor: pointer; cursor: pointer;
width:93%; width:93%;
} }
@@ -529,6 +542,6 @@ hide mdi-action-visibility mdi-action-visibility-off
{ {
height:100%; height:100%;
background-color:rgba(0,0,0,0.5); background-color:rgba(0,0,0,0.5);
-webkit-transition: width 1s ease; /*-webkit-transition: width 1s ease;
transition: width 1s ease; transition: width 1s ease;*/
} }

49
static/js/search.js
View File

@@ -1,12 +1,15 @@
var old_input=""; var old_input="";
var timer = 0; var timer = 0;
var result_html = $("#temp-results").html();
$( "#results" ).empty();
var time_regex = /P((([0-9]*\.?[0-9]*)Y)?(([0-9]*\.?[0-9]*)M)?(([0-9]*\.?[0-9]*)W)?(([0-9]*\.?[0-9]*)D)?)?(T(([0-9]*\.?[0-9]*)H)?(([0-9]*\.?[0-9]*)M)?(([0-9]*\.?[0-9]*)S)?)?/
/*jshint multistr: true */ /*jshint multistr: true */
$(document).ready(function() $(document).ready(function()
{ {
$( "#results" ).hover( function() { $("div.result").removeClass("hoverResults"); i = 0; }, function() { }); $( "#results" ).hover( function() { $("div.result").removeClass("hoverResults"); i = 0; }, function() { });
$("#search").focus(); $("#search").focus();
$('#base').bind("keyup keypress", function(e) { $('#base').bind("keyup keypress", function(e) {
@@ -19,7 +22,8 @@ $(document).ready(function()
$(".search_input").focus(); $(".search_input").focus();
$(".search_input").keyup(function(event) { $(".search_input").keyup(function(event) {
var search_input = $(this).val(); search_input = $(this).val();
console.log(search_input);
if(event.keyCode == 13 && search_input == "fireplace") if(event.keyCode == 13 && search_input == "fireplace")
{ {
if(!peis) if(!peis)
@@ -114,6 +118,10 @@ $(document).keyup(function(e) {
function showSearch(){ function showSearch(){
$("#search-wrapper").toggleClass("hide"); $("#search-wrapper").toggleClass("hide");
if(window.mobilecheck())
{
$(".search_input").focus();
}
$("#song-title").toggleClass("hide"); $("#song-title").toggleClass("hide");
$("#search").focus(); $("#search").focus();
} }
@@ -121,9 +129,9 @@ function showSearch(){
function search(search_input){ function search(search_input){
$("#results").html(''); $(".search_results").html('');
if(search_input !== ""){ if(window.search_input !== ""){
var keyword= encodeURIComponent(search_input); var keyword= encodeURIComponent(window.search_input);
//response= x //response= x
var yt_url = "https://www.googleapis.com/youtube/v3/search?key=***REMOVED***&videoEmbeddable=true&part=id&fields=items(id)&type=video&order=viewCount&safeSearch=none&maxResults=25"; var yt_url = "https://www.googleapis.com/youtube/v3/search?key=***REMOVED***&videoEmbeddable=true&part=id&fields=items(id)&type=video&order=viewCount&safeSearch=none&maxResults=25";
@@ -152,10 +160,23 @@ function search(search_input){
success: function(response){ success: function(response){
$.each(response.items, function(i,song) $.each(response.items, function(i,song)
{ {
var title=song.snippet.title; var duration=song.contentDetails.duration;
id=song.id; secs=durationToSeconds(duration)
duration=song.contentDetails.duration; if(!longsongs || secs<720){
viewers= title=song.snippet.title;
enc_title=encodeURIComponent(title).replace(/'/g, "\\\'");
id=song.id;
duration = duration.replace("PT","").replace("H","h ").replace("M","m ").replace("S","s")
thumb=song.snippet.thumbnails.medium.url;
$("#results").append(result_html);
var song = $("#result");
song.find(".search-title").text(title);
song.find(".result_info").text(duration);
song.find(".thumb").attr("src", thumb);
song.attr("onclick", "submitAndClose('"+id+"','"+enc_title+"',"+secs+");");
song.attr("id",id);
}
}); });
} }
}); });
@@ -190,3 +211,11 @@ function submit(id,title,type, duration){
$(".main").removeClass("clickthrough"); $(".main").removeClass("clickthrough");
} }
} }
function durationToSeconds(duration) {
var matches = duration.match(time_regex);
hours= parseInt(matches[12])||0,
minutes= parseInt(matches[14])||0,
seconds= parseInt(matches[16])||0
return hours*60*60+minutes*60+seconds;
}

10
static/js/youtube.js
View File

@@ -75,6 +75,8 @@ socket.on(chan.toLowerCase()+",np", function(obj)
if(ytplayer.getDuration() > seekTo) if(ytplayer.getDuration() > seekTo)
ytplayer.seekTo(seekTo); ytplayer.seekTo(seekTo);
} }
else
getTitle(song_title, viewers);
} }
}); });
@@ -209,13 +211,13 @@ function getTitle(titt, v)
{ {
var outPutWord = v > 1 ? "viewers" : "viewer"; var outPutWord = v > 1 ? "viewers" : "viewer";
var title= decodeURIComponent(titt); var title= decodeURIComponent(titt);
var elem = $('#song-title'); var elem = document.getElementById('song-title');
document.title = title + " • Zöff"; document.title = title + " • Zöff";
if(!window.mobilecheck()){ elem.innerHTML = title;
elem.text = title;
document.getElementById('viewers').innerHTML = v + " " + outPutWord; document.getElementById('viewers').innerHTML = v + " " + outPutWord;
elem.title = title + " • " + v + " " + outPutWord; elem.title = title + " • " + v + " " + outPutWord;
}
} }
function errorHandler(newState) function errorHandler(newState)