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

one page webapp try

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2016-01-22 19:15:00 +01:00
parent 1a699d136a
commit dceb4a023f
12 changed files with 591 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
index.php
View File

@@ -260,11 +260,12 @@
</main>
<?php include("php/footer.php"); ?>
<script type="text/javascript" src="/static/dist/lib/jquery.lazyload.js"></script>
<script type="text/javascript" src="/static/dist/lib/color-thief.js"></script>
<script type="text/javascript" src="//crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha256.js"></script>
<script type="text/javascript" src="//crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>
<script type="text/javascript" src="/static/dist/main.min.js"></script>
<div id="scripts">
<script type="text/javascript" src="/static/dist/lib/jquery.lazyload.js"></script>
<script type="text/javascript" src="/static/dist/lib/color-thief.js"></script>
<script type="text/javascript" src="//crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha256.js"></script>
<script type="text/javascript" src="//crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>
<script type="text/javascript" src="/static/dist/main.min.js"></script>
</div>
</body>
</html>

5
php/chan-scripts.php Normal file
View File

@@ -0,0 +1,5 @@
<script type="text/javascript" src="/static/dist/lib/jquery.lazyload.js"></script>
<script type="text/javascript" src="/static/dist/lib/color-thief.js"></script>
<script type="text/javascript" src="//crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha256.js"></script>
<script type="text/javascript" src="//crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>
<script type="text/javascript" src="/static/dist/main.min.js"></script>

261
php/channel.php Normal file
View File

@@ -0,0 +1,261 @@
<?php $list = explode("/", htmlspecialchars(strtolower($_SERVER["REQUEST_URI"])));
if($list[1]==""||!isset($list[1])||count($list)<=1){$list="";include('php/nochan.php');die();}
else $list=$list[1];
?>
<header>
<div class="navbar-fixed">
<nav id="nav">
<div class="nav-wrapper">
<a href="/" class="brand-logo hide-on-med-and-down noselect">
<img id="zicon" src="static/images/squareicon_small.png" alt="zöff" title="Zöff" />
</a>
<div class="brand-logo truncate zbrand">
<a href="/" class="hide-on-large-only">Zöff</a>
<span class="hide-on-large-only">/</span>
<span id="chan" class="chan clickable" title="Show big URL"><?php echo(ucfirst($list));?></span>
</div>
<ul class="title-container">
<li class="song-title truncate" id="song-title">
Loading...
</li>
<li class="search-container hide" id="search-wrapper">
<input id="search" class="search_input" type="text" title="Search for songs..." placeholder="Find song on youtube" onsubmit="null;" autocomplete="off" />
</li>
</ul>
<ul class="right control-list noselect">
<li id="search_loader" class="valign-wrapper hide">
<div class="valign">
<div class="preloader-wrapper small active">
<div class="spinner-layer spinner-blue">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-red">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-yellow">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-green">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</li>
<li>
<a class="nav-btn" href="#find" id="search-btn">
<i class="mdi-action-search"></i>
<span class="hover-text">Find</span>
</a>
</li>
<li>
<a class="nav-btn" href="#skip" id="skip">
<i class="mdi-av-skip-next"></i>
<span class="hover-text">Skip</span>
</a>
</li>
<li>
<a class="nav-btn hide-on-small-only" href="#stir" id="shuffle">
<i class="mdi-av-shuffle"></i>
<span class="hover-text">Stir</span>
</a>
</li>
<li>
<a class="nav-btn hide-on-small-only" href="#chat_btn" data-activates="chat-bar" id="chat-btn">
<i class="tiny mdi-communication-message"></i>
<span class="hover-text">Chat</span>
</a>
</li>
<li>
<a class="nav-btn" href="#settings" data-activates="settings-bar" id="settings">
<i class="mdi-action-settings"></i>
<span class="hover-text">Conf</span>
</a>
</li>
</ul>
<ul class="side-nav" id="settings-bar">
<?php include("panel.php");?>
</ul>
<div id="results" class="search_results hide">
<div id="temp-results-container">
<div id="temp-results">
<div id="result" class="result">
<img class="thumb" src="/static/images/loading.png" alt="Thumb"/>
<div class="search-title truncate"></div>
<span class="result_info"></span>
<div class="waves-effect waves-orange btn-flat" id="add-many" title="Add several videos">
<i class="mdi-av-playlist-add"></i>
</div>
</div>
</div>
</div>
<div id="empty-results-container">
<div id='empty-results' class='valign-wrapper'>
<span class='valign'>No results found..</span>
</div>
</div>
</div>
</div>
</nav>
</div>
<div id="help" class="modal">
<div class="modal-header-fixed">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
</div>
<div class="modal-content">
<h4>So you need help?</h4>
<p>When listening on a channel, there are some different buttons you can click.</p>
<p>If you click the cogwheel, you'll open the settings panel. Here you can change channel settings, decide if you want the computer you're on can be remote-controlled, and import playlists from YouTube.</p>
<p>The search-icon, opens up a search inputfield. If you start typing here, the site will automagically search for your input!</p>
<p>If you click the button next to the search icon, you'll skip on a song. The one next to that one, is shuffleling of the list. Next one there again is to open the chat.</p>
<p>Clicking a song in the playlist, gives it a vote. If you're logged in, you'll have a delete button at your disposal.</p>
<p>Also, whenever you're logged in, you'll have two tabs in the top of the playlist thats called "Playlist" and "Suggested". The playlist obviously shows the playlist. But the suggested tab, shows 5 songs that YouTube recommends based on the current song. There might also be user recommended songs. To add any of these, just click them as you'd click a song to vote.</p>
</div>
</div>
</header>
<main class="container center-align main">
<div id="main-row" class="row">
<div class="col s12 m9 video-container hide-on-small-only">
<ul class="side-nav left-aligned chat-bar" id="chat-bar">
<li id="chat-log">
<ul class="collapsible collapsible-accordion inherit-height">
<li class="active inherit-height">
<div class="collapsible-body inherit-height" style="display: block;">
<!--<ul id="chat inherit-height">-->
<div class="row inherit-height">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3 chat-tab-li"><a class="active chat-tab truncate" href="#channelchat"><?php echo $list; ?></a></li>
<li class="tab col s3 chat-tab-li"><a class="chat-tab" href="#all_chat">All</a></li>
</ul>
</div>
<div id="channelchat" class="col s12 inherit-height"><ul id="chatchannel" class="inherit-height"></ul></div>
<div id="all_chat" class="col s12 inherit-height"><ul id="chatall" class="inherit-height"></ul></div>
</div>
<!--</ul>-->
</div>
</li>
</ul>
</li>
<li id="chat-input">
<form action="#" id="chatForm" onsubmit="return false;">
<input id="text-chat-input" name="input" type="text" autocomplete="off" placeholder="Chat" maxlength="150" />
</form>
</li>
</ul>
<!--
width: calc(100% - 261px);
display: inline;
-->
<div id="player" class="ytplayer"></div>
<div id="player_overlay" class="hide valign-wrapper">
<div id="player_overlay_text" class="valign center-align">
Waiting for Video
</div>
</div>
<div id="controls" class="noselect">
<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="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="viewers"></div>
<div id="bar"></div>
</div>
</div>
<div id="playlist" class="col s12 m3">
<ul class="tabs playlist-tabs hide-on-small-only hide">
<li class="tab col s3"><a class="playlist-tab-links" href="#wrapper">Playlist</a></li>
<li class="tab col s3"><a class="playlist-tab-links" href="#suggestions">Suggested</a></li>
</ul>
<div id="wrapper">
<div id="preloader" class="progress channel_preloader">
<div class="indeterminate"></div>
</div>
<div id="list-song-html">
<div id="list-song" class="card left-align list-song">
<span class="clickable vote-container" title="Vote!">
<a class="clickable center-align votebg">
<span class="lazy card-image cardbg list-image" style="background-image:url('/static/images/loading.png');"></span>
</a>
<span class="card-content">
<span class="flow-text truncate list-title"></span>
<span class="vote-span">
<span class="list-votes"></span>
<span class="highlighted vote-text">&nbsp;votes</span>
</span>
</span>
</span>
<div class="card-action center-align list-remove hide">
<a title="Remove song" id="del" class="waves-effect btn-flat clickable">Delete</a>
</div>
</div>
</div>
</div>
<div id="suggestions" class="tabs_height hide-on-small-only">
<p class="suggest-title-info">YouTube Suggests:</p>
<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>
</div>
</div>
</div>
<div id="playbar">
</div>
</main>
<div id="scripts">
<script type="text/javascript" src="/static/dist/lib/jquery.lazyload.js"></script>
<script type="text/javascript" src="/static/dist/lib/color-thief.js"></script>
<script type="text/javascript" src="//crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha256.js"></script>
<script type="text/javascript" src="//crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>
<script type="text/javascript" src="/static/dist/main.min.js"></script>
</div>

4
php/nochan.php
View File

@@ -169,6 +169,8 @@ if(isset($_GET['chan'])){
</main>
<?php include("php/footer.php"); ?>
<script type="text/javascript" src="static/dist/frontpage.min.js"></script>
<div id="scripts">
<script type="text/javascript" src="static/dist/frontpage.min.js"></script>
</div>
</body>
</html>

159
php/nochan_content.php Normal file
View File

@@ -0,0 +1,159 @@
<header>
<nav id="fp-nav">
<div class="nav-wrapper">
<a href="#" class="brand-logo hide-on-small-only noselect">
<img id="zicon" src="static/images/squareicon_small.png" alt="zöff" title="Zöff" />
</a>
<a href="//zoff.no" class="brand-logo hide-on-med-and-up">Zöff</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a class="modal-trigger waves-effect waves-red" title="Need help with the site?" onclick="$('#help').openModal()">Help</a></li>
<li><a class="waves-effect green" title="Remote control a Zöff player" href="https://remote.zoff.no">Remote</a></li>
<li><a class="modal-trigger waves-effect waves-orange" onclick="$('#about').openModal()">About</a></li>
<li><a class="modal-trigger waves-effect waves-yellow" onclick="$('#legal').openModal()">Legal</a></li>
<li><a class="waves-effect waves-purple" href="https://github.com/zoff-music/">GitHub</a></li>
</ul>
</div>
</nav>
<div id="legal" class="modal">
<div class="modal-content">
<h4>Legal</h4>
<p>Copyright © 2015 <br>Nicolas Almagro Tonne and Kasper Rynning-Tønnesen
<br><br>
Creative Commons License<br>
Zöff is licensed under a <br><a href="http://creativecommons.org/licenses/by-nc-nd/3.0/no/">Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Norway License.</a>
<br>
Do not redistribute without permission from the developers.
<br>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>
<div id="about" class="modal">
<div class="modal-content">
<h4>About</h4>
<p>Zöff is a shared (free) YouTube based radio service, built upon the YouTube API. <br><br>
Zöff is mainly a webbased service. The website uses <a href="https://nodejs.org/">NodeJS</a> with <a href="http://socket.io/">Socket.IO</a>, <a href="https://www.mongodb.org/">MongoDB</a> and PHP on the backend, with JavaScript, jQuery and <a href="http://materializecss.com/">Materialize</a> on the frontend. More about the project itself can be found on <a href="https://github.com/zoff-music/Zoff">GitHub</a><br><br>
The team consists of Kasper Rynning-Tønnesen and Nicolas Almagro Tonne, and the project has been worked on since late 2014.<br><br>
The team can be reached on <a href="mailto:contact@zoff.no?Subject=Contact%20Zoff">contact@zoff.no</a><br><br>
</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>
<div id="donation" class="modal">
<div class="modal-content">
<h4>Thanks!</h4>
<p>Thanks for your donation, we love you &lt;3
<br><br>
We will use the money for something awesome, just you wait and see!
<br><br>
We might also add your name somewhere in the code as a sign of gratitude, see if you can find it! (Might take a day or two for us to see the donation and implement it..)
</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">I'm awesome! (Close)</a>
</div>
</div>
<div id="help" class="modal">
<div class="modal-header-fixed">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
</div>
<div class="modal-content">
<h4>So you need help?</h4>
<p>At the center of the site, you'll se a input field. This is meant to navigate to new or existing channels. If you input something here that already doesn't exist, a new channel will be create at the blink of an eye! Remember to put a password on the list you've created, so noone else takes it from you! (It's on a first come, first serve basis). When you're ready to proceed, just click the listen button!</p>
<p>Underneath the input fields, there are several tiles. These are channels that already exists, and they can be clicked! To enter one of these channels and listen to it's content, it is just to click the tile.</p>
</div>
</div>
</header>
<div class="section mega">
<div id="mega-background"></div>
<h5>Create a radio channel, collaborate and listen</h5>
<form class="channel-finder">
<p class="prething">zoff.no/</p>
<input
class="input-field room-namer"
type="text"
id="search"
name="chan"
placeholder="chill"
title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
autocomplete="off"
autofocus=""
list="searches"
required
pattern="[a-zA-Z0-9]+"
spellcheck="false"
maxlength="18"
/>
<datalist id="searches"></datalist>
<a class="refresh-button"><i class="small cached"></i></a>
<button class="listen-button" action="submit">Listen</button>
</form>
<div class="pitch outline">
<div>Live &amp; democratic playlists with YouTube Music</div>
<div>Play everywhere — No login required</div>
</div>
</div>
<div class="section mobile-search">
<form class="row" id="base" method="get">
<div class="input-field col s12">
<input
class="input-field"
type="text"
id="search"
name="chan"
title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
autocomplete="off"
list="searches"
required pattern="[a-zA-Z0-9]+"
spellcheck="false"
maxlength="18"
data-length="18"
/>
<label for="search" class="noselect">Find or create radio channel</label>
<datalist id="searches">
</datalist>
</div>
</form>
</div>
<main class="center-align container">
<div class="section">
<div id="preloader" class="progress">
<div class="indeterminate"></div>
</div>
<div id="channel-list-container">
<ul class="row" id="channels">
<li id="chan-card" class="col s12 m4 l3">
<div class="card">
<a class="chan-link">
<div class="chan-bg card-image cardbg"></div>
<div class="card-content">
<i class="mdi-action-star-rate pin"></i>
<p class="left-align">
<span class="chan-name flow-text truncate"></span>
<br>
<span class="highlighted">Viewers:&nbsp;</span>
<span class="chan-views"></span>
<br>
<span class="highlighted">Songs:&nbsp;</span>
<span class="chan-songs"></span>
</p>
</div>
<div class="card-action noselect">
<a class="chan-link waves-effect waves-orange btn-flat">Listen</a>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
</main>
<div id="scripts">
<script type="text/javascript" src="static/dist/frontpage.min.js"></script>
</div>

2
static/dist/frontpage.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
static/dist/main.min.js vendored
View File

File diff suppressed because one or more lines are too long

18
static/js/crypt.js
View File

@@ -5,9 +5,13 @@ var Crypt = {
init: function(){
try{
conf_arr = Crypt.decrypt(Crypt.getCookie("_opt"), "_opt");
conf_pass = Crypt.decrypt(Crypt.getCookie(chan.toLowerCase()), chan.toLowerCase());
console.log("channel: " + chan.toLowerCase());
}catch(err){
conf_arr = Crypt.decrypt(Crypt.create_cookie("_opt"), "_opt");
}
try{
conf_pass = Crypt.decrypt(Crypt.getCookie(chan.toLowerCase()), chan.toLowerCase());
}catch(err){
conf_pass = Crypt.decrypt(Crypt.create_cookie(chan.toLowerCase()), chan.toLowerCase());
}
Hostcontroller.change_enabled(conf_arr.remote);
@@ -17,6 +21,7 @@ var Crypt = {
decrypt: function(cookie, name){
if(Crypt.getCookie(name) === undefined) {
cookie = Crypt.create_cookie(name);
console.log(cookie);
}
var decrypted = CryptoJS.AES.decrypt(
@@ -87,6 +92,7 @@ var Crypt = {
if(name == "_opt") cookie_object = {volume: 100, width: 100, remote: true};
else cookie_object = {passwords: {}};
console.log(cookie_object);
var string_it = JSON.stringify(cookie_object);
@@ -102,9 +108,13 @@ var Crypt = {
var CookieDate = new Date;
CookieDate.setFullYear(CookieDate.getFullYear( ) +1);
if(name != "_opt") add = chan.toLowerCase();
else add = ";"
document.cookie = name+"="+encrypted.toString()+";expires="+CookieDate.toGMTString()+";path=/"+add
//if(name != "_opt") add = chan.toLowerCase();
//else
add = ";"
console.log(name+"="+encrypted.toString()+";expires="+CookieDate.toGMTString()+";path=/"+add);
document.cookie = name+"="+encrypted.toString()+";expires="+CookieDate.toGMTString()+";path=/"+add;
//document.cookie = name+"="+encrypted.toString()+";expires="+CookieDate.toGMTString()+";path=/;"
//document.cookie = na"="+encrypted.toString()+";expires="+CookieDate.toGMTString()+";path=/;"
return Crypt.getCookie(name);

98
static/js/listeners.js
View File

@@ -41,25 +41,28 @@ var song_title;
var previous_video_id;
var connection_options = {
'sync disconnect on unload':true,
'secure': true
'secure': true,
'force new connection': true
};
if(window.location.hostname == "zoff.no") add = "https://zoff.no";
else add = "localhost";
var socket = io.connect(''+add+':8880', connection_options);
socket.on("get_list", function(){
socket.emit('list', chan.toLowerCase());
setTimeout(function(){socket.emit('list', chan.toLowerCase())},1000);
});
socket.on("suggested", function(params){
console.log(params);
var single = true;
if(params.id == undefined)
single = false;
Suggestions.catchUserSuggests(params, single);
setTimeout(function(){Suggestions.catchUserSuggests(params, single)}, 1000);
});
$(document).ready(function()
{
setTimeout(function(){
//window.vote = List.vote;
//window.submit = Search.submit;
//window.submitAndClose = Search.submitAndClose;
@@ -69,6 +72,7 @@ $(document).ready(function()
localStorage.setItem("list_update", "13.06.15");
window.location.reload(true);
}
console.log(Youtube);
Youtube.setup_youtube_listener(chan);
Admin.admin_listener();
List.channel_listener();
@@ -108,8 +112,8 @@ $(document).ready(function()
Chat.setup_chat_listener(chan);
Chat.allchat_listener();
Hostcontroller.host_listener();
Youtube.loadPlayer();
window.onYouTubeIframeAPIReady = Youtube.onYouTubeIframeAPIReady;
Youtube.loadPlayer();
$("#chat-btn").sideNav({
menuWidth: 272, // Default is 240
@@ -173,6 +177,7 @@ $(document).ready(function()
Search.search($(".search_input").val());
}
}, 1);
}, 1000);
});
$(document).keyup(function(e) {
@@ -345,4 +350,87 @@ $(document).on('click', '#toast-container', function(){
$(this).fadeOut(function(){
$(this).remove();
});
});
});
window.onpopstate = function(e){
var url_split = window.location.href.split("/");
if(url_split[3] == "" || url_split[3].substring(0,1) == "#"){
$.ajax({
url: "php/nochan_content.php",
success: function(e){
ytplayer.destroy();
Playercontrols.clearDurationInterval();
socket.disconnect();
document.getElementById("volume-button").removeEventListener("click", Playercontrols.mute_video);
document.getElementById("playpause").removeEventListener("click", Playercontrols.play_pause);
document.getElementById("fullscreen").removeEventListener("click", Playercontrols.fullscreen);
delete ytplayer
delete Admin
delete Chat
delete Crypt
delete Hostcontroller
delete Playercontrols
delete List
delete Search
delete Suggestions
delete Youtube
delete chan;
delete w_p;
delete hasadmin;
delete showToggle;
delete list_html;
delete blink_interval_exists;
delete unseen;
delete timer;
delete api_key;
delete result_html;
delete empty_results_html;
delete searching;
delete time_regex;
delete conf;
delete music;
delete frontpage;
delete adminpass;
delete filesadded;
delete player_ready;
delete viewers;
delete paused;
delete playing;
delete SAMPLE_RATE;
delete lastSample;
delete began;
delete i;
delete id;
delete full_playlist;
delete conf;
delete blink_interval;
delete tag;
delete firstScriptTag;
delete ytplayer;
delete title;
delete viewers;
delete video_id;
delete list;
delete seekTo;
delete song_title;
delete previous_video_id;
delete connection_options;
delete socket;
delete window.onYouTubeIframeAPIReady;
$("main").attr("class", "center-align container");
$("body").attr("id", "");
$("header").html($($(e)[0]).html());
$($(e)[2]).insertAfter("header");
$($(e)[4]).insertAfter(".mega");
$("main").html($($(e)[6]).html());
$("#scripts").html($($(e)[8]).html());
}
});
}
}

31
static/js/nochan.js
View File

@@ -59,7 +59,6 @@ var Nochan = {
//$("#channels").append(list_html);
var card = pre_card;
if(lists[x][5] == 1)
{
card.find(".pin").attr("style", "display:block;");
@@ -198,6 +197,28 @@ var Nochan = {
}else{
corn.remove();
}
},
to_channel: function(chan){
$.ajax({
url: chan + "/php/channel.php",
success: function(e){
delete Nochan
socket.disconnect();
window.history.pushState("to the channel!", "Title", "/" + chan);
$.holdReady(true);
$(".mega").remove();
$(".mobile-search").remove();
$("main").attr("class", "container center-align main");
$("body").attr("id", "channelpage");
$("header").html($($(e)[0]).html());
$("main").html($($(e)[2]).html());
$("#scripts").html($($(e)[4]).html());
}
});
}
}
@@ -219,7 +240,8 @@ $(document).ready(function (){
$("#channels").empty();
var connection_options = {
'secure': true
'secure': true,
'force new connection': true
};
if(window.location.hostname == "zoff.no") add = "https://zoff.no";
@@ -289,6 +311,11 @@ $(document).on('click', '#toast-container', function(){
});
});
$(document).on('click', ".chan-link", function(e){
e.preventDefault();
Nochan.to_channel($(this).attr("href"));
});
$(".listen-button").click(function(e){
//console.log($(".room-namer").attr("placeholder"));
if($(".room-namer").val() == ""){

9
static/js/playercontrols.js
View File

@@ -1,11 +1,13 @@
var Playercontrols = {
interval: null,
initYoutubeControls: function(player)
{
if(window.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
$("#controls").appendTo("#playbar");
}
setInterval(Playercontrols.durationSetter, 1000);
Playercontrols.interval = setInterval(Playercontrols.durationSetter, 1000);
Playercontrols.initControls();
},
@@ -17,6 +19,11 @@ var Playercontrols = {
},
clearDurationInterval: function()
{
clearInterval(Playercontrols.interval);
},
initSlider: function()
{
vol = (Crypt.get_volume());

14
static/js/youtube.js
View File

@@ -6,10 +6,11 @@ var Youtube = {
setup_youtube_listener: function(channel)
{
console.log("Setup shit");
socket.on("np", function(obj)
{
Youtube.loaded = false;
if(video_id != undefined) Youtube.before_load = ytplayer.getVideoUrl();
if(video_id != undefined && ytplayer !== undefined) Youtube.before_load = ytplayer.getVideoUrl();
if(obj[0].length == 0){
document.getElementById('song-title').innerHTML = "Empty channel. Add some songs!";
@@ -223,6 +224,7 @@ var Youtube = {
},
onYouTubeIframeAPIReady: function() {
console.log("helloo?");
ytplayer = new YT.Player('player', {
videoId: "asd",
playerVars: { rel:"0", wmode:"transparent", controls: "0" , iv_load_policy: "3", theme:"light", color:"white"},
@@ -235,10 +237,12 @@ var Youtube = {
},
loadPlayer: function() {
tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
console.log(ytplayer);
console.log("load the player");
tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
}