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

Updated materialize to v0.98 and made changes accordingly

Browse Source 
- Made improvements to how the remotecontroller on mobile looks
- Added thumbnails some places
- Started using googles new material font because of materializecss
This commit is contained in:
Kasper Rynning-Tønnesen
2017-01-28 18:16:57 +01:00
parent da45f27cd1
commit 3d4ed9b66c
49 changed files with 375 additions and 14640 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
public/php/channel.php
View File

@@ -75,25 +75,25 @@
</li>
<li>
<a class="nav-btn" href="#find" id="search-btn">
<i class="mdi-action-search"></i>
<i class="material-icons">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>
<i class="material-icons">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>
<i class="material-icons">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>
<i class="material-icons">menu</i>
<span class="hover-text">Conf</span>
</a>
</li>
@@ -111,7 +111,7 @@
<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>
<i class="material-icons">playlist_add</i>
</div>
</div>
</div>
@@ -125,7 +125,7 @@
</div>
</nav>
</div>
<div id="help" class="modal">
<div id="help" class="modal modal-fixed-footer">
<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>
@@ -175,7 +175,7 @@
<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>
<i class="material-icons">cast</i>
</div>
<div id="chromecast_text"></div>
</div>
@@ -184,35 +184,39 @@
</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>
<i id="play-overlay" class="material-icons hide">play_arrow</i>
<i id="pause-overlay" class="material-icons">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>
<i id="v-mute-overlay" class="material-icons">volume_off</i>
<i id="v-low-overlay" class="material-icons">volume_mute</i>
<i id="v-medium-overlay" class="material-icons">volume_down</i>
<i id="v-full-overlay" class="material-icons">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>
<i id="play" class="material-icons hide">play_arrow</i>
<i id="pause" class="material-icons">pause</i>
</div>
<div id="duration"></div>
<div id="fullscreen">
<i class="mdi-navigation-fullscreen"></i>
<i class="material-icons">fullscreen</i>
</div>
<button class="castButton mdi-hardware-cast tooltipped" style="" data-position="top" data-delay="5" data-tooltip="Cast Zöff to TV" is="google-cast-button">
<button class="castButton-unactive tooltipped" style="display:none;" data-position="top" data-delay="5" data-tooltip="Cast Zöff to TV">
<i class="material-icons">cast</i>
</button>
<button class="castButton-active hide mdi-hardware-cast-connected tooltipped" data-position="top" data-delay="5" data-tooltip="Stop casting" >
<button class="castButton" is="google-cast-button">
</button>
<button class="castButton-active hide tooltipped" data-position="top" data-delay="5" data-tooltip="Stop casting" >
<i class="material-icons">cast_connected</i>
</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>
<i id="v-mute" class="material-icons">volume_off</i>
<i id="v-low" class="material-icons">volume_mute</i>
<i id="v-medium" class="material-icons">volume_down</i>
<i id="v-full" class="material-icons">volume_up</i>
</div>
<div id="volume"></div>
<div id="viewers" data-position="top" data-delay="5" class="tooltipped" data-tooltip="Viewers"></div>
@@ -223,11 +227,11 @@
<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%">
<ul class="tabs playlist-tabs tabs-fixed-width" style="width:96%">
<li class="tab col s3"><a class="playlist-tab-links playlist-link active truncate" href="#wrapper">Playlist</a></li>
<li class="tab col s3"><a class="playlist-tab-links chat-link truncate" href="#chat">Chat</a></li>
</ul>
<ul class="tabs playlist-tabs-loggedIn hide" style="width: 96%;">
<ul class="tabs playlist-tabs-loggedIn hide tabs-fixed-width" style="width: 96%;">
<li class="tab col s3"><a class="playlist-tab-links playlist-link active truncate" href="#wrapper">Playlist</a></li>
<li class="tab col s3"><a class="playlist-tab-links suggested-link truncate" href="#suggestions">Suggested</a></li>
<li class="tab col s3"><a class="playlist-tab-links chat-link truncate" href="#chat">Chat</a></li>
@@ -274,7 +278,7 @@
<!--<ul id="chat inherit-height">-->
<div class="row inherit-height">
<div class="col s12">
<ul class="tabs chatTabs">
<ul class="tabs chatTabs tabs-fixed-width">
<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>

14
public/php/controller.php
View File

@@ -14,11 +14,11 @@
<a href="//zoff.no" class="brand-logo hide-on-med-and-up">Zöff</a>
<ul class="right hide-on-med-and-down">
<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-orange" onclick="$('#about').modal('open')">About</a></li>
</ul>
</div>
</nav>
<div id="about" class="modal">
<div id="about" class="modal modal-fixed-footer">
<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>
@@ -76,17 +76,17 @@
<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>
<i id="remote_play" class="material-icons">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>
<i id="remote_pause" class="material-icons">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>
<i id="remote_skip" class="material-icons">skip_next</i>
</a>
</div>
<i class="mdi-av-volume-up slider-vol rc"></i>
<i class="material-icons slider-vol rc">volume_up</i>
<div class="rc" id="volume-control" title="Volume"></div>
</div>
@@ -94,7 +94,7 @@
<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".
To find the ID of your player, click the Conf <i class="material-icons">menu</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>

14
public/php/footer.php
View File

@@ -77,18 +77,18 @@
</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 class="modal-trigger waves-effect cyan darken-2 btn help-button-footer" title="Need help with the site?" onclick="$('#help').modal('open')">
<i class="material-icons left footer-button-icon">help_outline</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 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').modal('open')">
<i class="material-icons left footer-button-icon">code</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 class="modal-trigger waves-effect red darken-2 btn help-button-footer" id="contact-button" title="Contact us" onclick="$('#contact').modal('open')">
<i class="material-icons left footer-button-icon">email</i>CONTACT
</a>
</li>
</ul>
@@ -114,7 +114,7 @@
<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
<i class="material-icons left footer-button-icon">payment</i>Donate
</a>
</form>
<p class="hide-on-small-only">

10
public/php/frontpage.php
View File

@@ -24,11 +24,11 @@ if(isset($_GET['chan'])){
<ul class="right hide-on-med-and-down">
<li><a class="header-buttons waves-effect waves-cyan" id="offline-mode" title="Offline mode" href="#">Private</a></li>
<li><a class="header-buttons waves-effect waves-green" title="Remote control a Zöff player" href="https://remote.zoff.no">Remote</a></li>
<li><a class="header-buttons modal-trigger waves-effect waves-orange" onclick="$('#about').openModal()">About</a></li>
<li><a class="header-buttons modal-trigger waves-effect waves-orange" onclick="$('#about').modal('open')">About</a></li>
</ul>
</div>
</nav>
<div id="about" class="modal">
<div id="about" class="modal modal-fixed-footer">
<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>
@@ -49,7 +49,7 @@ if(isset($_GET['chan'])){
<a href="#" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>
<div id="donation" class="modal">
<div id="donation" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Thanks!</h4>
<p>Thanks for your donation, we love you &lt;3
@@ -63,7 +63,7 @@ if(isset($_GET['chan'])){
<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 id="help" class="modal modal-fixed-footer">
<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>
@@ -143,7 +143,7 @@ if(isset($_GET['chan'])){
<a class="chan-link">
<div class="chan-bg card-image cardbg"></div>
<div class="card-content">
<i class="mdi-action-star-rate pin"></i>
<i class="material-icons pin">star_rate</i>
<p class="left-align">
<span class="chan-name flow-text truncate"></span>
<br>

1
public/php/header.php
View File

@@ -21,6 +21,7 @@
<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 href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<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"/>

63
public/php/panel.php
View File

@@ -1,19 +1,19 @@
<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>
<i class="material-icons auto-margin">close</i>
</div>
<li>
<a class="col s9 collapsible-header bold waves-effect admin-settings">
Channel Settings
<i class="mdi-image-tune"></i>
<i class="material-icons">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>
<i id="admin-lock" class="material-icons">lock</i>
<input placeholder="Enter channel password" id="password" type="password" class="validate" />
</div>
</li>
@@ -102,7 +102,7 @@
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header bold waves-effect">Remote Control
<i class="mdi-action-settings-remote"></i>
<i class="material-icons">settings_remote</i>
</a>
<div class="collapsible-body">
<ul>
@@ -115,14 +115,15 @@
<input name="remote_switch" type="checkbox" class="remote_switch_class" checked /><span class="lever"></span>
Enabled
</label>
</div>
<a id="code-link" target="_blank">
</div>
<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&amp;cht=qr&amp;choe=UTF-8&amp;chld=L%7C1&amp;chl=http://zoff.no" />
<h4 id="code-text">ABBADUR</h4>
</a>
<a>
<h4 id="code-text">ABBADUR</h4>
</a></div>
<p>
You can control this Zöff instance from another device by going to <b>https://remote.zoff.no/</b>
</a>
</p>
</li>
</ul>
</div>
@@ -134,13 +135,13 @@
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header bold waves-effect">Private Mode
<i class="mdi-action-visibility-off"></i>
<i class="material-icons">visibility_off</i>
</a>
<div class="collapsible-body">
<ul>
<li>
<span class="switch-text">
Enable Local
Private Mode
</span>
<div class="switch"><label>
Disabled
@@ -162,7 +163,7 @@
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header bold waves-effect import-a">Remote Controller
<i class="mdi-action-settings-remote"></i>
<i class="material-icons">settings_remote</i>
</a>
<div class="collapsible-body">
<ul id="remote-mobile-container">
@@ -183,16 +184,18 @@
/>
</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 id="remote-sidebar-buttons-container">
<button id="playbutton_remote" class="remote-button waves-effect btn green" disabled>
<i id="remote_play" class="material-icons">play_arrow</i>
</button>
<button id="pausebutton_remote" class="remote-button waves-effect btn gray" disabled>
<i id="remote_pause" class="material-icons">pause</i></button>
<button id="skipbutton_remote" class="remote-button waves-effect btn blue" disabled>
<i id="remote_skip" class="material-icons">skip_next</i>
</button>
</div>
<div class="" id="volume-control-remote" title="Volume"></div>
<i class="material-icons slider-vol">volume_up</i>
</li>
</ul>
</div>
@@ -204,7 +207,7 @@
<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>
<i class="material-icons">keyboard_arrow_down</i>
</a>
<div class="collapsible-body">
<ul>
@@ -216,7 +219,7 @@
</div>
<div class="input-field field-settings youtube_clicked">
<form action="#" id="listImport">
<i class="mdi-av-playlist-add import-icon"></i>
<i class="material-icons import-icon">playlist_add</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">
@@ -280,10 +283,10 @@
</div>
<div class="input-field field-settings spotify_authenticated">
<form action="#" id="listImportSpotify">
<i class="mdi-av-playlist-add import-icon"></i>
<i class="material-icons import-icon">playlist_add</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 id="playlist_loader_spotify" class="valign playlist_loader_padding hide">
<div class="preloader-wrapper small active">
<div class="spinner-layer spinner-blue">
<div class="circle-clipper left">
<div class="circle"></div>
@@ -343,7 +346,7 @@
<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>
<i class="material-icons search-extra">search</i></a>
</li>
</ul>
</li>
@@ -357,7 +360,7 @@
<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>
<i class="material-icons">keyboard_arrow_up</i>
</a>
<div class="collapsible-body">
<ul>
@@ -367,8 +370,6 @@
<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_export_button export-buttons">