Removed unnecessary files when having index.php and nochan.php and made changes accordingly

This commit is contained in:
Kasper Rynning-Tønnesen
2016-02-08 11:16:29 +01:00
parent 7f339e4ea4
commit 02ccc9ee4f
8 changed files with 16 additions and 454 deletions

View File

@@ -1,5 +0,0 @@
<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>

View File

@@ -1,274 +0,0 @@
<?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 brand-logo-navigate 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 brand-logo-navigate">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>
<div id="embed" 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>Embed code (in beta)</h4>
<p>Copy the code in the textarea, and paste on your website. Remove the &amp; and autoplay, to prevent the player to autoplay.</p>
<textarea id="embed-area"></textarea>
</div>
</div>
</header>
<div id="channel-load" class="progress" style="top:52px;">
<div class="indeterminate" id="channel-load-move"></div>
</div>
<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>

View File

@@ -1,161 +0,0 @@
<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>
<span id="frontpage-viewer-counter" class="hide-on-small-only noselect" title="Divided among all channels. Hidden or not"></span>
<a href="//zoff.no" class="brand-logo brand-mobile 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" onsubmit="return false;">
<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>
<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" onsubmit="return false;">
<div class="input-field col s12">
<input
class="input-field"
type="text"
id="search-mobile"
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-mobile" class="noselect">Find or create radio channel</label>
<datalist id="searches">
</datalist>
</div>
</form>
</div>
<div id="channel-load" class="progress">
<div class="indeterminate" id="channel-load-move"></div>
</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>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -411,7 +411,7 @@ function onepage_load(){
socket.removeAllListeners(); socket.removeAllListeners();
$.ajax({ $.ajax({
url: "php/nochan_content.php", url: "php/nochan.php",
success: function(e){ success: function(e){
socket.disconnect(); socket.disconnect();
@@ -434,14 +434,14 @@ function onepage_load(){
$("main").attr("class", "center-align container"); $("main").attr("class", "center-align container");
$("body").attr("id", ""); $("body").attr("id", "");
$("body").attr("style", ""); $("body").attr("style", "");
$("header").html($($(e)[0]).html()); $("header").html($($(e)[35]).html());
$($(e)[2]).insertAfter("header"); $($(e)[37]).insertAfter("header");
$($(e)[4]).insertAfter(".mega"); $($(e)[39]).insertAfter(".mega");
$("main").html($($(e)[8]).html()); $("main").html($($(e)[43]).html());
if($("#alreadychannel").length == 0) $("head").append("<div id='alreadychannel'></div") if($("#alreadychannel").length == 0) $("head").append("<div id='alreadychannel'></div")
if($("#alreadyfp").length == 1) window.initfp(); if($("#alreadyfp").length == 1) window.initfp();
else $("#scripts").append($($(e)[10]).html()); else $("#scripts").append($($(e)[63]).html());
$("#channel-load").css("display", "none"); $("#channel-load").css("display", "none");
}, 1000); }, 1000);

View File

@@ -226,9 +226,11 @@ var Nochan = {
socket.removeAllListeners(); socket.removeAllListeners();
$.ajax({ $.ajax({
url: chan + "/php/channel.php", url: chan + "/php/index.php",
success: function(e){ success: function(e){
//console.log($(e));
delete Nochan delete Nochan
socket.disconnect(); socket.disconnect();
@@ -239,13 +241,13 @@ var Nochan = {
$(".mobile-search").remove(); $(".mobile-search").remove();
$("main").attr("class", "container center-align main"); $("main").attr("class", "container center-align main");
$("body").attr("id", "channelpage"); $("body").attr("id", "channelpage");
$("header").html($($(e)[0]).html()); $("header").html($($(e)[35]).html());
$("main").html($($(e)[4]).html()); $("main").html($($(e)[39]).html());
$("#search").attr("placeholder", "Find song on youtube"); $("#search").attr("placeholder", "Find song on youtube");
if($("#alreadychannel").length == 1){ if($("#alreadychannel").length == 1){
window.init(); window.init();
}else{ }else{
$("#scripts").append($($(e)[6]).html()); $("#scripts").append($($(e)[51]).html());
} }
if($("#alreadyfp").length == 0) $("head").append("<div id='alreadyfp'></div>"); if($("#alreadyfp").length == 0) $("head").append("<div id='alreadyfp'></div>");
} }