mirror of
https://github.com/KevinMidboe/zoff.git
synced 2025-10-29 18:00:23 +00:00
Renaming and fixing some filestructure
This commit is contained in:
Kasper Rynning-Tønnesen
93
public/php/bot.php
Executable file
93
public/php/bot.php
Executable file
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
|
||||
<?php include("header.php"); ?>
|
||||
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/jemjlblambcgjmmhheaklfnphncdmfmb" />
|
||||
</head>
|
||||
<body class="noselect cursor-default">
|
||||
<header>
|
||||
<nav id="fp-nav">
|
||||
<div class="nav-wrapper">
|
||||
<a href="//zoff.no" class="brand-logo hide-on-small-only">
|
||||
<img id="zicon" src="/public/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>
|
||||
</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="help" class="modal">
|
||||
<div class="modal-content">
|
||||
<h4>So you need help?</h4>
|
||||
<p>To remote-controll a computer, just type in the ID for that computer. (This can be found in the settings panel on the computer you want to remote controll. There is also a QR code for you to scan.</p>
|
||||
<p>When you've entered the ID for the computer you want to controll, you'll be able to change the volume, have the controlled computer vote for skipping, pause the video or play the video.</p>
|
||||
<p>The inputfield you used to enter the ID (if you entered it), has now changed some. If you type in something here now, the controlled computer will change channel!</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="center-align container remote-container">
|
||||
<div class="section">
|
||||
<h3 id="remote-text">Twitch Bot</h3>
|
||||
<div class="row">
|
||||
<div class="col s6">
|
||||
<p>
|
||||
Commands
|
||||
</p>
|
||||
<p>
|
||||
join
|
||||
</p>
|
||||
<p>
|
||||
leave
|
||||
</p>
|
||||
<p>
|
||||
np
|
||||
</p>
|
||||
</div>
|
||||
<div class="col s6">Sign up</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<?php include("footer.php"); ?>
|
||||
|
||||
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
|
||||
<!--<script type="text/javascript" src="/public/dist/remote.min.js"></script>-->
|
||||
</body>
|
||||
</html>
|
||||
298
public/php/channel.php
Executable file
298
public/php/channel.php
Executable file
@@ -0,0 +1,298 @@
|
||||
<html lang="en">
|
||||
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<?php include("public/php/header.php"); ?>
|
||||
<script type="text/javascript" src="/public/dist/main.min.js"></script>
|
||||
</head>
|
||||
<body id="channelpage" class="noselect cursor-default">
|
||||
<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="public/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 cursor-pointer 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" href="#settings" data-activates="settings-bar" id="settings">
|
||||
<i class="mdi-image-dehaze"></i>
|
||||
<span class="hover-text">Conf</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="side-nav" id="settings-bar">
|
||||
<?php include("public/php/panel.php");?>
|
||||
</ul>
|
||||
<div id="results" class="search_results hide">
|
||||
<div id="temp-results-container">
|
||||
<div id="temp-results" class="result-object">
|
||||
<div id="result" class="result">
|
||||
<img class="thumb" src="/public/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-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 class="modal-footer">
|
||||
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="embed" class="modal">
|
||||
<div class="modal-content">
|
||||
<h4>Embed code</h4>
|
||||
<p>Copy the code in the textarea, and paste on your website.</p>
|
||||
<p>
|
||||
<input type="checkbox" id="autoplay" checked="checked" />
|
||||
<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" />
|
||||
<label for="color_embed" class="padding_left_6 embed-label">Color</label>
|
||||
<input type="color" id="color_embed" class="settings_embed" value="#808080" />
|
||||
</p>
|
||||
<textarea id="embed-area"></textarea>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div id="channel-load" class="progress">
|
||||
<div class="indeterminate" id="channel-load-move"></div>
|
||||
</div>
|
||||
<main class="container center-align main">
|
||||
<div id="main-row" class="row">
|
||||
<div id="video-container" class="col s12 m9 video-container no-opacity click-through">
|
||||
<!--
|
||||
width: calc(100% - 261px);
|
||||
display: inline;
|
||||
-->
|
||||
<div id="player" class="ytplayer"></div>
|
||||
<div id="main_components">
|
||||
<div id="player_overlay" class="hide valign-wrapper">
|
||||
<div id="playing_on"><div id="chromecast_icon">
|
||||
<i class="mdi-hardware-cast-connected"></i>
|
||||
</div>
|
||||
<div id="chromecast_text"></div>
|
||||
</div>
|
||||
<div id="player_overlay_text" class="valign center-align">
|
||||
Waiting for Video
|
||||
</div>
|
||||
<div id="player_overlay_controls" class="hide valign-wrapper">
|
||||
<div id="playpause-overlay" class="valign center-align">
|
||||
<i id="play-overlay" class="mdi-av-play-arrow hide"></i>
|
||||
<i id="pause-overlay" class="mdi-av-pause"></i>
|
||||
</div>
|
||||
<div id="volume-button-overlay">
|
||||
<i id="v-mute-overlay" class="mdi-av-volume-off"></i>
|
||||
<i id="v-low-overlay" class="mdi-av-volume-mute"></i>
|
||||
<i id="v-medium-overlay" class="mdi-av-volume-down"></i>
|
||||
<i id="v-full-overlay" class="mdi-av-volume-up"></i>
|
||||
</div>
|
||||
</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"></div>
|
||||
<div id="fullscreen">
|
||||
<i class="mdi-navigation-fullscreen"></i>
|
||||
</div>
|
||||
<button class="castButton mdi-hardware-cast tooltipped" data-position="top" data-delay="10" data-tooltip="Cast Zöff to TV" is="google-cast-button">
|
||||
</button>
|
||||
<button class="castButton-active hide mdi-hardware-cast-connected tooltipped" data-position="top" data-delay="10" data-tooltip="Stop casting" >
|
||||
</button>
|
||||
<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>
|
||||
<div id="playlist" class="col s12 m3">
|
||||
<div id="top-button" title="Scroll to the top" class="rounded-bottom hide top-button-with-tabs hide-on-small-only">Top</div>
|
||||
<div id="bottom-button" title="Scroll to the bottom" class="rounded-top hide hide-on-small-only">Bottom</div>
|
||||
<ul class="tabs playlist-tabs" style="width:96%">
|
||||
<li class="tab col s3"><a class="playlist-tab-links playlist-link active" href="#wrapper">Playlist</a></li>
|
||||
<li class="tab col s3"><a class="playlist-tab-links chat-link" href="#chat">Chat</a></li>
|
||||
</ul>
|
||||
<ul class="tabs playlist-tabs-loggedIn hide" style="width: 96%;">
|
||||
<li class="tab col s3"><a class="playlist-tab-links playlist-link active" href="#wrapper">Playlist</a></li>
|
||||
<li class="tab col s3"><a class="playlist-tab-links suggested-link" href="#suggestions">Suggested</a></li>
|
||||
<li class="tab col s3"><a class="playlist-tab-links chat-link" href="#chat">Chat</a></li>
|
||||
</ul>
|
||||
<div id="wrapper" class="tabs_height">
|
||||
<div id="list-song-html">
|
||||
<div id="list-song" class="card left-align list-song">
|
||||
<div class="clickable vote-container" title="Vote!">
|
||||
<a class="clickable center-align votebg">
|
||||
<span class="lazy card-image cardbg list-image" style="background-image:url('/public/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"> votes</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<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" style="display:none;">
|
||||
<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 id="chatPlaylist" class="tabs_height" style="display:none;">
|
||||
<ul class="" id="chat-bar">
|
||||
<li id="chat-log">
|
||||
<ul class="inherit-height">
|
||||
<li class="active inherit-height">
|
||||
<!--<ul id="chat inherit-height">-->
|
||||
<div class="row inherit-height">
|
||||
<div class="col s12">
|
||||
<ul class="tabs chatTabs">
|
||||
<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>-->
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="chat-input">
|
||||
<form action="#" id="chatForm">
|
||||
<input id="text-chat-input" name="input" type="text" autocomplete="off" placeholder="Chat" maxlength="150" />
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="playbar">
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<?php include("public/php/footer.php"); ?>
|
||||
</body>
|
||||
</html>
|
||||
117
public/php/controller.php
Executable file
117
public/php/controller.php
Executable file
@@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
|
||||
<?php include("header.php"); ?>
|
||||
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/jemjlblambcgjmmhheaklfnphncdmfmb" />
|
||||
</head>
|
||||
<body class="noselect cursor-default">
|
||||
<header>
|
||||
<nav id="fp-nav">
|
||||
<div class="nav-wrapper">
|
||||
<a href="//zoff.no" class="brand-logo hide-on-small-only">
|
||||
<img id="zicon" src="/public/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 web-based 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>
|
||||
</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="help" class="modal">
|
||||
<div class="modal-content">
|
||||
<h4>So you need help?</h4>
|
||||
<p>To remote-control a computer, just type in the ID for that computer. (This can be found in the settings panel on the computer you want to remote control. There is also a QR code for you to scan.</p>
|
||||
<p>When you've entered the ID for the computer you want to control, you'll be able to change the volume, have the controled computer vote for skipping, pause the video or play the video.</p>
|
||||
<p>The input field you used to enter the ID (if you entered it), has now changed some. If you type in something here now, the controled computer will change channel!</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="center-align container remote-container">
|
||||
<div class="section">
|
||||
<h3 id="remote-text">Remote Controller</h3>
|
||||
</div>
|
||||
<div class="section">
|
||||
<form action="#" class="row" id="remoteform">
|
||||
<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"
|
||||
spellcheck="false"
|
||||
maxlength="10"
|
||||
data-length="10"
|
||||
/>
|
||||
<label for="search" id="forsearch">Type ID of host to be controlled</label>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="rc" id="remote-controls">
|
||||
<a id="playbutton" class="remote-button chan-link waves-effect btn green">
|
||||
<i id="remote_play" class="mdi-av-play-arrow"></i>
|
||||
</a>
|
||||
<a id="pausebutton" class="remote-button chan-link waves-effect btn gray">
|
||||
<i id="remote_pause" class="mdi-av-pause"></i>
|
||||
</a>
|
||||
<a id="skipbutton" class="remote-button chan-link waves-effect btn blue">
|
||||
<i id="remote_skip" class="mdi-av-skip-next"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<i class="mdi-av-volume-up slider-vol rc"></i>
|
||||
<div class="rc" id="volume-control" title="Volume"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section about-remote">
|
||||
<b>Here you can control another Zöff player from any device.</b>
|
||||
<br>
|
||||
To find the ID of your player, click the Conf <i class="mdi-action-settings"></i> icon on the top right of the player page, then "Remote Control".
|
||||
<br>You can either scan the QR code or type the ID manually.
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<?php include("footer.php"); ?>
|
||||
|
||||
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
|
||||
<script type="text/javascript" src="/public/dist/remote.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
138
public/php/footer.php
Executable file
138
public/php/footer.php
Executable file
@@ -0,0 +1,138 @@
|
||||
<div id="contact" class="modal">
|
||||
<div class="modal-content">
|
||||
<h4>Want to contact us?</h4>
|
||||
<div id="contact-container">
|
||||
<form id="contact-form" method="post" onsubmit="return false;">
|
||||
<div class="input-field">
|
||||
<input id="contact-form-from" name="from" type="email" autocomplete="off" class="validate" />
|
||||
<label for="contact-form-from" class="noselect">Email</label>
|
||||
</div>
|
||||
<div class="input-field">
|
||||
<input id="contact-form-message" name="message" type="text" autocomplete="off">
|
||||
<label for="contact-form-message" class="noselect">Message</label>
|
||||
</div>
|
||||
<button class="contact-button-submit" id="submit-contact-form">Send</button>
|
||||
<div class="valign hide" id="send-loader">
|
||||
<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>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="page-footer cursor-default">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col l6 s12">
|
||||
<h5 class="white-text">Zöff</h5>
|
||||
<p class="grey-text text-lighten-4">The shared YouTube radio</p>
|
||||
<p class="grey-text text-lighten-4">
|
||||
Being built around the YouTube search and video API
|
||||
it enables the creation of collaborative and shared live playlists,
|
||||
with billions of videos and songs to choose from, all for free and without registration.
|
||||
<br />
|
||||
Enjoy!
|
||||
</p>
|
||||
<ul id="footer-buttons">
|
||||
<li>
|
||||
<a class="modal-trigger waves-effect cyan darken-2 btn help-button-footer" title="Need help with the site?" onclick="$('#help').openModal()">
|
||||
<i class="mdi-action-info left footer-button-icon"></i>HELP
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="modal-trigger waves-effect blue-grey darken-2 btn help-button-footer hide-on-small-only" id="embed-button" title="Want to embed this channel?" onclick="$('#embed').openModal()">
|
||||
<i class="mdi-image-navigate-before left footer-button-icon left-embed"></i><i class="mdi-image-navigate-next left footer-button-icon right-embed"></i>EMBED
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="modal-trigger waves-effect red darken-2 btn help-button-footer" id="contact-button" title="Contact us" onclick="$('#contact').openModal()">
|
||||
<i class="mdi-communication-email left footer-button-icon"></i>CONTACT
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p id="latest-commit" class="grey-text text-lighten-4 truncate"></p>
|
||||
</div>
|
||||
<div class="col l4 offset-l2 s12 valign-wrapper">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/zoff-music/">
|
||||
<img title="Contribute on GitHub" src="/public/images/GitHub_Logo.png" alt="GitHub" />
|
||||
</a>
|
||||
<p>
|
||||
<a id="facebook-code-link" class="waves-effect waves-light btn light-blue share shareface" href="https://www.facebook.com/sharer/sharer.php?u=http://<?php echo $_SERVER['HTTP_HOST'].'/'.$list; ?>" target="popup" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=http://<?php echo $_SERVER['HTTP_HOST'].'/'.$list; ?>','Share Playlist','width=600,height=300')">
|
||||
<img class="left" src="/public/images/facebook.png" alt="Share on Facebook" />Share on Facebook
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<a id="twitter-code-link" class="waves-effect waves-light btn light-blue share" href="http://twitter.com/intent/tweet?url=http://<?php echo $_SERVER['HTTP_HOST'].'/'.$list; ?>&text=Check%20out%20this%20playlist%20<?php echo ucfirst($list); ?>%20on%20Zöff!&via=zoffmusic" target="popup" onclick="window.open('http://twitter.com/intent/tweet?url=http://<?php echo $_SERVER['HTTP_HOST'].'/'.$list; ?>&text=Check%20out%20this%20playlist%20<?php echo ucfirst($list); ?>%20on%20Zöff!&via=zoffmusic','Share Playlist','width=600,height=300')">
|
||||
<img class="left" src="/public/images/twitter.png" alt="Share on Twitter" />Share on Twitter
|
||||
</a>
|
||||
</p>
|
||||
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" id="donate_form">
|
||||
<input type="hidden" name="cmd" value="_s-xclick">
|
||||
<input type="hidden" name="hosted_button_id" value="JEXDYP59N5VWE">
|
||||
<a title="Like what we made? Help us by donating (a) beer!" class="waves-effect waves-light btn orange light-blue share" onclick="document.getElementById('donate_form').submit();">
|
||||
<i class="mdi-action-payment left footer-button-icon"></i>Donate
|
||||
</a>
|
||||
</form>
|
||||
<p class="hide-on-small-only">
|
||||
<a id="qr-code-link" target="_blank" href="//chart.googleapis.com/chart?chs=500x500&cht=qr&chl=http://<?php echo $_SERVER['HTTP_HOST'].'/'.$list; ?>&choe=UTF-8&chld=L%7C1" >
|
||||
<img id="qr-code-image-link" class="card rounded" src="//chart.googleapis.com/chart?chs=150x150&cht=qr&chl=http://<?php echo $_SERVER['HTTP_HOST'].'/'.$list; ?>&choe=UTF-8&chld=L%7C1" alt="QRCode for link" title="QR code for this page, for easy sharing!" />
|
||||
</a>
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-copyright">
|
||||
<div class="container">
|
||||
© <?php echo date("Y"); ?>
|
||||
<a href="http://nixo.no">Nixo</a> &
|
||||
<a href="http://kasperrt.no">KasperRT</a>
|
||||
All Rights Reserved.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
44
public/php/header.php
Executable file
44
public/php/header.php
Executable file
@@ -0,0 +1,44 @@
|
||||
|
||||
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
| Zöff |
|
||||
| Project is on github: https://github.com/zoff-music/Zoff |
|
||||
| Made by: Nicolas Almagro Tonne and Kasper Rynning-Tønnesen |
|
||||
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||||
|
||||
<title>Zöff</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||
<meta name="author" content="Nicolas 'Nixo' Almagro Tonne & Kasper 'KasperRT' Rynning-Tønnesen"/>
|
||||
<meta name="description" content="The Shared (free) YouTube radio."/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="theme-color" content="#2D2D2D" />
|
||||
<meta property="og:image" content="https://zoff.no/public/images/favicon.png" />
|
||||
<meta property="og:url" content="https://zoff.no" />
|
||||
<meta property="og:title" content="Zöff"/>
|
||||
<meta property="og:description" content="The Shared (free) YouTube radio."/>
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="fb:app_id" content="1581693815380949" />
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css">
|
||||
<link type="text/css" rel="stylesheet" href="/public/css/materialize.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/public/css/style.css" title="Default" />
|
||||
<link rel="icon" id="favicon" type="image/png" href="/public/images/favicon.png"/>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', '***REMOVED***', 'auto');
|
||||
ga('send', 'pageview');
|
||||
|
||||
</script>
|
||||
<script type="text/javascript" src="https://www.gpublic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
|
||||
<script type="text/javascript" src="/public/dist/lib/jquery-2.1.3.min.js"></script>
|
||||
<script type="text/javascript" src="/public/dist/lib/jquery-ui-1.10.3.min.js"></script>
|
||||
<script type="text/javascript" src="/public/dist/lib/materialize.min.js"></script>
|
||||
<script type="text/javascript" src="/public/dist/lib/socket.io-1.4.5.js"></script>
|
||||
<script type="text/javascript" src="/public/dist/lib/color-thief.js"></script>
|
||||
<script type="text/javascript" src="/public/dist/lib/sha256.js"></script>
|
||||
<script type="text/javascript" src="/public/dist/lib/aes.js"></script>
|
||||
18
public/php/imageblob.php
Executable file
18
public/php/imageblob.php
Executable file
@@ -0,0 +1,18 @@
|
||||
<?php
|
||||
|
||||
$url = file_get_contents("https://img.youtube.com/vi/".$_POST['id']."/mqdefault.jpg");
|
||||
|
||||
$image = new Imagick();
|
||||
$image->readImageBlob($url);
|
||||
|
||||
|
||||
$image->blurImage(30,50);
|
||||
|
||||
$output = $image->getimageblob();
|
||||
|
||||
$image->setImageFormat("jpeg");
|
||||
|
||||
file_put_contents ("../public/images/thumbnails/".$_POST['id'].".jpg", $image);
|
||||
|
||||
echo base64_encode($output);
|
||||
?>
|
||||
22
public/php/mail.php
Executable file
22
public/php/mail.php
Executable file
@@ -0,0 +1,22 @@
|
||||
<?php
|
||||
|
||||
if(isset($_POST['from']) && isset($_POST['message'])){
|
||||
|
||||
$from = htmlspecialchars($_POST['from']);
|
||||
$message = htmlspecialchars($_POST['message']);
|
||||
$headers = "From: " . $from . "\r\n";
|
||||
|
||||
if(filter_var($from, FILTER_VALIDATE_EMAIL) && $message != ""){
|
||||
$result = mail("contact@zoff.no", "Contact from form", $message, $headers);
|
||||
|
||||
if($result == FALSE){
|
||||
echo "failure";
|
||||
}else{
|
||||
echo "success";
|
||||
}
|
||||
}else{
|
||||
echo "failure";
|
||||
}
|
||||
}
|
||||
|
||||
?>
|
||||
178
public/php/nochan.php
Executable file
178
public/php/nochan.php
Executable file
@@ -0,0 +1,178 @@
|
||||
<?php
|
||||
|
||||
if(isset($_GET['chan'])){
|
||||
$chan = htmlspecialchars($_GET['chan']);
|
||||
header('Location: '.$chan);
|
||||
}
|
||||
|
||||
?>
|
||||
<html lang="en">
|
||||
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
|
||||
<meta name="robots" content="index, nofollow" />
|
||||
<?php include("header.php"); ?>
|
||||
<script type="text/javascript" src="/public/dist/main.min.js"></script>
|
||||
</head>
|
||||
<body class="noselect cursor-default">
|
||||
<header>
|
||||
<nav id="fp-nav">
|
||||
<div class="nav-wrapper">
|
||||
<a href="#" class="brand-logo noselect">
|
||||
<img id="zicon" src="public/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 web-based 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 <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-content">
|
||||
<h4>So you need help?</h4>
|
||||
<p>At the center of the site, you'll see a input field. This is meant to navigate to new or existing channels. If you input something here that 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 no one 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 listen to one of these channels, it is just to click the tile.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
|
||||
</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="searchFrontpage"
|
||||
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">Listen</button>
|
||||
</form>
|
||||
<div class="pitch outline">
|
||||
<div>Live & democratic playlists with YouTube Music</div>
|
||||
<div>Play everywhere — No login required</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section mobile-search">
|
||||
<form class="channel-finder-mobile row" id="base">
|
||||
<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_mobile">
|
||||
</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 id="main_section_frontpage" 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: </span>
|
||||
<span class="chan-views"></span>
|
||||
<br>
|
||||
<span class="highlighted">Songs: </span>
|
||||
<span class="chan-songs"></span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-action noselect">
|
||||
<span class="chan-link waves-effect waves-orange btn-flat">Listen</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<?php include("public/php/footer.php"); ?>
|
||||
</body>
|
||||
</html>
|
||||
421
public/php/panel.php
Executable file
421
public/php/panel.php
Executable file
@@ -0,0 +1,421 @@
|
||||
<li class="no-padding">
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<div class="nav-btn close-settings clickable" title="Close" id="closeSettings">
|
||||
<i class="mdi-navigation-close auto-margin"></i>
|
||||
</div>
|
||||
<li>
|
||||
<a class="col s9 collapsible-header bold waves-effect admin-settings">
|
||||
Channel Settings
|
||||
<i class="mdi-image-tune"></i>
|
||||
</a>
|
||||
<div class="collapsible-body">
|
||||
<form action="#" id="adminForm" onsubmit="return false;">
|
||||
<ul>
|
||||
<li class="white-bg">
|
||||
<div class="input-field field-settings">
|
||||
<i id="admin-lock" class="mdi-action-lock" title="Click to log out"></i>
|
||||
<input placeholder="Enter channel password" id="password" type="password" class="validate" />
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<span class="switch-text">
|
||||
Add songs
|
||||
</span>
|
||||
<div class="switch"><label>
|
||||
Anyone
|
||||
<input name="addsongs" type="checkbox" class="conf" /><span class="lever"></span>
|
||||
Admin
|
||||
</label></div></li>
|
||||
|
||||
<li>
|
||||
<span class="switch-text">
|
||||
Vote
|
||||
</span>
|
||||
<div class="switch"><label>
|
||||
Anyone
|
||||
<input name="vote" type="checkbox" class="conf" /><span class="lever"></span>
|
||||
Admin
|
||||
</label></div></li>
|
||||
|
||||
<li><span class="switch-text">
|
||||
Shuffle
|
||||
</span>
|
||||
<div class="switch"><label>
|
||||
Anyone
|
||||
<input name="shuffle" type="checkbox" class="conf" /><span class="lever"></span>
|
||||
Admin
|
||||
</label></div></li>
|
||||
|
||||
<li><span class="switch-text">
|
||||
Skip
|
||||
</span>
|
||||
<div class="switch"><label>
|
||||
Anyone
|
||||
<input name="skip" type="checkbox" class="conf" /><span class="lever"></span>
|
||||
Admin
|
||||
</label></div></li>
|
||||
|
||||
<li><span class="switch-text">
|
||||
Song length
|
||||
</span>
|
||||
<div class="switch"><label>
|
||||
Any
|
||||
<input name="longsongs" type="checkbox" class="conf" /><span class="lever"></span>
|
||||
Short
|
||||
</label></div></li>
|
||||
|
||||
<li><span class="switch-text">
|
||||
Type
|
||||
</span>
|
||||
<div class="switch"><label>
|
||||
Any
|
||||
<input name="allvideos" type="checkbox" class="conf" /><span class="lever"></span>
|
||||
Song
|
||||
</label></div></li>
|
||||
|
||||
|
||||
<li><span class="switch-text">
|
||||
Frontpage
|
||||
</span>
|
||||
<div class="switch"><label>
|
||||
Hide
|
||||
<input name="frontpage" type="checkbox" class="conf" /><span class="lever"></span>
|
||||
Display
|
||||
</label></div></li>
|
||||
|
||||
<li><span class="switch-text">
|
||||
After play
|
||||
</span>
|
||||
<div class="switch"><label>
|
||||
Keep
|
||||
<input name="removeplay" type="checkbox" class="conf" /><span class="lever"></span>
|
||||
Remove
|
||||
</label></div></li>
|
||||
</ul>
|
||||
</form>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="no-padding remote-panel hide-on-small-only">
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li>
|
||||
<a class="collapsible-header bold waves-effect">Remote Control
|
||||
<i class="mdi-action-settings-remote"></i>
|
||||
</a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="switch-text">
|
||||
Enable Remote
|
||||
</span>
|
||||
<div class="switch"><label>
|
||||
Disabled
|
||||
<input name="remote_switch" type="checkbox" class="remote_switch_class" checked /><span class="lever"></span>
|
||||
Enabled
|
||||
</label>
|
||||
</div>
|
||||
<a id="code-link" target="_blank">
|
||||
<img id="code-qr" alt="QR code for control" title="Link to control this Zöff player" src="https://chart.googleapis.com/chart?chs=221x221&cht=qr&choe=UTF-8&chld=L%7C1&chl=http://zoff.no" />
|
||||
<h4 id="code-text">ABBADUR</h4>
|
||||
</a>
|
||||
<a>
|
||||
You can control this Zöff instance from another device by going to <b>https://remote.zoff.no/</b>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="no-padding hide-on-small-only">
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li>
|
||||
<a class="collapsible-header bold waves-effect import-a">Import Playlist
|
||||
<i class="mdi-hardware-keyboard-arrow-down"></i>
|
||||
</a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li class="white-bg">
|
||||
<div class="input-field field-settings youtube_unclicked import-buttons">
|
||||
<a class="modal-trigger waves-effect red btn import-youtube" title="Import from YouTube playlist">
|
||||
<img src="/public/images/youtube.png" class="youtube_logo" alt="Youtube Logo" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="input-field field-settings youtube_clicked">
|
||||
<form action="#" id="listImport">
|
||||
<i class="mdi-av-playlist-add import-icon"></i>
|
||||
<input title="Input YouTube-playlist url here!" placeholder="Enter YouTube-list URL" id="import" type="text" class="validate" autocomplete="off" />
|
||||
<div class="valign playlist_loader_padding">
|
||||
<div id="playlist_loader" class="preloader-wrapper small active hide">
|
||||
<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>
|
||||
</form>
|
||||
</div>
|
||||
</li>
|
||||
<li class="white-bg">
|
||||
<div class="input-field field-settings spotify_unauthenticated import-buttons">
|
||||
<a class="modal-trigger waves-effect green lighten btn import-spotify-auth" title="Import Spotify playlist">
|
||||
<img src="/public/images/spotify.png" class="left spotify_logo" alt="Spotify Logo" />Spotify
|
||||
</a>
|
||||
</div>
|
||||
<div class="input-field field-settings spotify_authenticated">
|
||||
<form action="#" id="listImportSpotify">
|
||||
<i class="mdi-av-playlist-add import-icon"></i>
|
||||
<input title="Input Spotify-playlist url here!" placeholder="Enter Spotify-list url" id="import_spotify" type="text" class="validate" autocomplete="off" />
|
||||
<div class="valign playlist_loader_padding">
|
||||
<div id="playlist_loader_spotify" class="preloader-wrapper small active hide">
|
||||
<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>
|
||||
</form>
|
||||
</div>
|
||||
</li>
|
||||
<li class="not-imported white-bg hide">
|
||||
<div class="center-align">Not imported</div>
|
||||
<ul class="input-field field-settings not-imported-container">
|
||||
<li class="white-bg not-imported-element">
|
||||
<div class="extra-add-text truncate"></div>
|
||||
<a href="#" class="waves-effect red lighten btn right extra-button extra-button-delete">X</a>
|
||||
<a href="#" class="waves-effect green lighten btn right extra-button extra-button-search">
|
||||
<i class="mdi-action-search search-extra"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="no-padding hide-on-small-only">
|
||||
<ul class="collapsible collapsible-accordion white-bg">
|
||||
<li>
|
||||
<a class="collapsible-header bold waves-effect export-a">Export Playlist
|
||||
<i class="mdi-hardware-keyboard-arrow-up"></i>
|
||||
</a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li class="white-bg">
|
||||
<div class="input-field field-settings youtube_export_button export-buttons">
|
||||
<a class="modal-trigger waves-effect red btn export-youtube" id="listExport" title="Export to YouTube">
|
||||
<img src="/public/images/youtube.png" class="youtube_logo" alt="Youtube Logo" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="input-field field-settings">
|
||||
</div>
|
||||
</li>
|
||||
<!--<li class="white-bg">
|
||||
<div class="input-field field-settings spotify_unauthenticated export-buttons">
|
||||
<a class="modal-trigger waves-effect green lighten btn export-spotify-auth" id="listExportSpotify" title="Export to Spotify">
|
||||
Spotify
|
||||
</a>
|
||||
</div>
|
||||
</li>-->
|
||||
<li class="exported-list-container white-bg hide">
|
||||
<div class="valign playlist_loader_padding">
|
||||
<div id="playlist_loader_export" class="preloader-wrapper small active hide">
|
||||
<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>
|
||||
<ul class="input-field field-settings white-bg">
|
||||
<li class="white-bg exported-list white-bg">
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="no-padding show-only-mobile">
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li>
|
||||
<a class="collapsible-header bold waves-effect import-a">Remote Controller
|
||||
<i class="mdi-action-settings-remote"></i>
|
||||
</a>
|
||||
<div class="collapsible-body">
|
||||
<ul id="remote-mobile-container">
|
||||
<li class="white-bg">
|
||||
<p id="remote_header">Control another client</p>
|
||||
<form action="#" class="row" id="remoteform">
|
||||
<div class="input-field col s12">
|
||||
<input
|
||||
class="input-field"
|
||||
type="text"
|
||||
id="remote_channel"
|
||||
name="chan"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
maxlength="10"
|
||||
data-length="10"
|
||||
placeholder="ID to remotecontroll"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
<button id="playbutton_remote" class="remote-button waves-effect btn green" disabled>
|
||||
<i id="remote_play" class="mdi-av-play-arrow"></i>
|
||||
</button>
|
||||
<button id="pausebutton_remote" class="remote-button waves-effect btn gray" disabled>
|
||||
<i id="remote_pause" class="mdi-av-pause"></i></button>
|
||||
<button id="skipbutton_remote" class="remote-button waves-effect btn blue" disabled>
|
||||
<i id="remote_skip" class="mdi-av-skip-next"></i>
|
||||
</button>
|
||||
<i class="mdi-av-volume-up slider-vol"></i>
|
||||
<div class="" id="volume-control-remote" title="Volume"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<!--
|
||||
<li class="no-padding">
|
||||
<h5 id="desc-title">List description</h5>
|
||||
<span id="description"></span>
|
||||
</li>
|
||||
-->
|
||||
37
public/php/update_lists.php
Executable file
37
public/php/update_lists.php
Executable file
@@ -0,0 +1,37 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>promp</title>
|
||||
</head>
|
||||
<body>
|
||||
<?php
|
||||
$files = scandir('../oldFiles/');
|
||||
foreach($files as $list) {
|
||||
if($list != "." && $list != "..")
|
||||
{
|
||||
$file = file_get_contents("../oldFiles/".$list);
|
||||
$data = json_decode($file);
|
||||
if(count($data) > 0)
|
||||
{
|
||||
$array = array("nowPlaying" => array(), "songs" => array(), "conf" => array("startTime" => time(), "views" => 0, "skips" => array()));
|
||||
for($i = 0; $i < count($data[0]); $i++)
|
||||
{
|
||||
if($i > 0)
|
||||
{
|
||||
|
||||
$arr = "songs";
|
||||
}
|
||||
else{
|
||||
$arr = "nowPlaying";
|
||||
}
|
||||
$array[$arr][$data[0][0]] = array("id" => $data[0][0], "title" => str_replace("\"", "\'", $data[3][0]), "votes" => 0, "added" => time(), "guids" => array());
|
||||
array_shift($data[0]);
|
||||
array_shift($data[3]);
|
||||
}
|
||||
file_put_contents("../oldFiles/".$list, json_encode($array));
|
||||
echo $list."\n";
|
||||
}
|
||||
}
|
||||
}
|
||||
?>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user