mirror of
https://github.com/KevinMidboe/zoff.git
synced 2025-10-29 18:00:23 +00:00
Added export to youtube and improved importing from YouTube
This commit is contained in:
Kasper Rynning-Tønnesen
@@ -18,12 +18,12 @@ RewriteCond %{REQUEST_URI} !/static
|
|||||||
RewriteRule ^(.*)$ php/bot.php [L,NC,QSA]
|
RewriteRule ^(.*)$ php/bot.php [L,NC,QSA]
|
||||||
|
|
||||||
RewriteCond %{HTTP_HOST} ^zoff.no
|
RewriteCond %{HTTP_HOST} ^zoff.no
|
||||||
RewriteCond %{REQUEST_URI} /spotify_callback
|
RewriteCond %{REQUEST_URI} /o_callback
|
||||||
RewriteRule ^(.*)$ php/spotify.html [L,NC,QSA]
|
RewriteRule ^(.*)$ php/callback.html [L,NC,QSA]
|
||||||
|
|
||||||
RewriteCond %{HTTP_HOST} ^localhost
|
RewriteCond %{HTTP_HOST} ^localhost
|
||||||
RewriteCond %{REQUEST_URI} /spotify_callback
|
RewriteCond %{REQUEST_URI} /o_callback
|
||||||
RewriteRule ^(.*)$ php/spotify.html [L,NC,QSA]
|
RewriteRule ^(.*)$ php/callback.html [L,NC,QSA]
|
||||||
|
|
||||||
|
|
||||||
#RewriteRule (?i)^remote/(.*) php/controller.php?id=$1 [L]
|
#RewriteRule (?i)^remote/(.*) php/controller.php?id=$1 [L]
|
||||||
|
|||||||
10
gulpfile.js
10
gulpfile.js
@@ -4,7 +4,7 @@ var gulp = require('gulp'),
|
|||||||
concat = require('gulp-concat');
|
concat = require('gulp-concat');
|
||||||
|
|
||||||
gulp.task('js', function () {
|
gulp.task('js', function () {
|
||||||
gulp.src(['static/js/*.js', '!static/js/embed*', '!static/js/remotecontroller.js', '!static/js/spotify.js'])
|
gulp.src(['static/js/*.js', '!static/js/embed*', '!static/js/remotecontroller.js', '!static/js/callback.js'])
|
||||||
.pipe(uglify({
|
.pipe(uglify({
|
||||||
mangle: true,
|
mangle: true,
|
||||||
compress: true,
|
compress: true,
|
||||||
@@ -25,14 +25,14 @@ gulp.task('embed', function () {
|
|||||||
.pipe(gulp.dest('static/dist'));
|
.pipe(gulp.dest('static/dist'));
|
||||||
});
|
});
|
||||||
|
|
||||||
gulp.task('spotify', function () {
|
gulp.task('callback', function () {
|
||||||
gulp.src(['static/js/spotify.js'])
|
gulp.src(['static/js/callback.js'])
|
||||||
.pipe(uglify({
|
.pipe(uglify({
|
||||||
mangle: true,
|
mangle: true,
|
||||||
compress: true,
|
compress: true,
|
||||||
enclose: true
|
enclose: true
|
||||||
}))
|
}))
|
||||||
.pipe(concat('spotify.min.js'))
|
.pipe(concat('callback.min.js'))
|
||||||
.pipe(gulp.dest('static/dist'));
|
.pipe(gulp.dest('static/dist'));
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -62,7 +62,7 @@ gulp.task('remotecontroller', function () {
|
|||||||
gulp.task('default', function(){
|
gulp.task('default', function(){
|
||||||
gulp.watch('static/js/*.js', ['js']);
|
gulp.watch('static/js/*.js', ['js']);
|
||||||
gulp.watch('static/js/*.js', ['embed']);
|
gulp.watch('static/js/*.js', ['embed']);
|
||||||
gulp.watch(['static/js/spotify.js', 'static/js/helpers.js'], ['spotify']);
|
gulp.watch(['static/js/callback.js', 'static/js/helpers.js'], ['callback']);
|
||||||
//gulp.watch('static/js/*.js', ['nochan']);
|
//gulp.watch('static/js/*.js', ['nochan']);
|
||||||
gulp.watch('static/js/remotecontroller.js', ['remotecontroller']);
|
gulp.watch('static/js/remotecontroller.js', ['remotecontroller']);
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -100,7 +100,7 @@
|
|||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="nav-btn" href="#settings" data-activates="settings-bar" id="settings">
|
<a class="nav-btn" href="#settings" data-activates="settings-bar" id="settings">
|
||||||
<i class="mdi-action-settings"></i>
|
<i class="mdi-image-dehaze"></i>
|
||||||
<span class="hover-text">Conf</span>
|
<span class="hover-text">Conf</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
280
php/panel.php
280
php/panel.php
@@ -91,8 +91,6 @@
|
|||||||
<input name="removeplay" type="checkbox" class="conf" /><span class="lever"></span>
|
<input name="removeplay" type="checkbox" class="conf" /><span class="lever"></span>
|
||||||
Remove
|
Remove
|
||||||
</label></div></li>
|
</label></div></li>
|
||||||
|
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
@@ -100,7 +98,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="no-padding remote-panel">
|
<li class="no-padding remote-panel hide-on-small-only">
|
||||||
<ul class="collapsible collapsible-accordion">
|
<ul class="collapsible collapsible-accordion">
|
||||||
<li>
|
<li>
|
||||||
<a class="collapsible-header bold waves-effect">Remote Control
|
<a class="collapsible-header bold waves-effect">Remote Control
|
||||||
@@ -124,7 +122,6 @@
|
|||||||
</a>
|
</a>
|
||||||
<a>
|
<a>
|
||||||
You can control this Zöff instance from another device by going to <b>https://remote.zoff.no/</b>
|
You can control this Zöff instance from another device by going to <b>https://remote.zoff.no/</b>
|
||||||
|
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
@@ -133,75 +130,84 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="no-padding">
|
|
||||||
|
<li class="no-padding hide-on-small-only">
|
||||||
<ul class="collapsible collapsible-accordion">
|
<ul class="collapsible collapsible-accordion">
|
||||||
<li>
|
<li>
|
||||||
<a class="collapsible-header bold waves-effect import-a">Import Playlist
|
<a class="collapsible-header bold waves-effect import-a">Import Playlist
|
||||||
<i class="mdi-communication-import-export"></i>
|
<i class="mdi-hardware-keyboard-arrow-down"></i>
|
||||||
</a>
|
</a>
|
||||||
<div class="collapsible-body">
|
<div class="collapsible-body">
|
||||||
<ul>
|
<ul>
|
||||||
<li class="white-bg">
|
<li class="white-bg">
|
||||||
<div class="input-field field-settings youtube_unclicked import-buttons">
|
<div class="input-field field-settings youtube_unclicked import-buttons">
|
||||||
<a class="modal-trigger waves-effect red btn import-youtube" title="Need help with the site?">
|
<a class="modal-trigger waves-effect red btn import-youtube" title="Import from YouTube playlist">
|
||||||
YouTube
|
YouTube
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="input-field field-settings youtube_clicked">
|
<div class="input-field field-settings youtube_clicked">
|
||||||
<form action="#" id="listImport">
|
<form action="#" id="listImport">
|
||||||
<i class="mdi-av-playlist-add import-icon"></i>
|
<i class="mdi-av-playlist-add import-icon"></i>
|
||||||
<input title="Input YouTube-playlist id here!" placeholder="Enter YouTube-list ID" id="import" type="text" class="validate" autocomplete="off" />
|
<input title="Input YouTube-playlist url here!" placeholder="Enter YouTube-list URL" id="import" type="text" class="validate" autocomplete="off" />
|
||||||
<li id="playlist_loader" class="valign-wrapper hide">
|
<li id="playlist_loader" class="valign-wrapper hide">
|
||||||
<div class="valign">
|
<div class="valign">
|
||||||
<div class="preloader-wrapper small active">
|
<div class="preloader-wrapper small active">
|
||||||
<div class="spinner-layer spinner-blue">
|
<div class="spinner-layer spinner-blue">
|
||||||
<div class="circle-clipper left">
|
<div class="circle-clipper left">
|
||||||
<div class="circle"></div>
|
<div class="circle"></div>
|
||||||
</div><div class="gap-patch">
|
</div>
|
||||||
<div class="circle"></div>
|
<div class="gap-patch">
|
||||||
</div><div class="circle-clipper right">
|
<div class="circle"></div>
|
||||||
<div class="circle"></div>
|
</div>
|
||||||
|
<div class="circle-clipper right">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="spinner-layer spinner-red">
|
<div class="spinner-layer spinner-red">
|
||||||
<div class="circle-clipper left">
|
<div class="circle-clipper left">
|
||||||
<div class="circle"></div>
|
<div class="circle"></div>
|
||||||
</div><div class="gap-patch">
|
</div>
|
||||||
<div class="circle"></div>
|
<div class="gap-patch">
|
||||||
</div><div class="circle-clipper right">
|
<div class="circle"></div>
|
||||||
<div class="circle"></div>
|
</div>
|
||||||
|
<div class="circle-clipper right">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="spinner-layer spinner-yellow">
|
<div class="spinner-layer spinner-yellow">
|
||||||
<div class="circle-clipper left">
|
<div class="circle-clipper left">
|
||||||
<div class="circle"></div>
|
<div class="circle"></div>
|
||||||
</div><div class="gap-patch">
|
</div>
|
||||||
<div class="circle"></div>
|
<div class="gap-patch">
|
||||||
</div><div class="circle-clipper right">
|
<div class="circle"></div>
|
||||||
<div class="circle"></div>
|
</div>
|
||||||
|
<div class="circle-clipper right">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="spinner-layer spinner-green">
|
<div class="spinner-layer spinner-green">
|
||||||
<div class="circle-clipper left">
|
<div class="circle-clipper left">
|
||||||
<div class="circle"></div>
|
<div class="circle"></div>
|
||||||
</div><div class="gap-patch">
|
</div>
|
||||||
<div class="circle"></div>
|
<div class="gap-patch">
|
||||||
</div><div class="circle-clipper right">
|
<div class="circle"></div>
|
||||||
<div class="circle"></div>
|
</div>
|
||||||
|
<div class="circle-clipper right">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="white-bg">
|
<li class="white-bg">
|
||||||
<div class="input-field field-settings spotify_unauthenticated import-buttons">
|
<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">
|
<a class="modal-trigger waves-effect green lighten btn import-spotify-auth" title="Import Spotify playlist">
|
||||||
Spotify
|
Spotify
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@@ -210,65 +216,161 @@
|
|||||||
<i class="mdi-av-playlist-add import-icon"></i>
|
<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" />
|
<input title="Input Spotify-playlist url here!" placeholder="Enter Spotify-list url" id="import_spotify" type="text" class="validate" autocomplete="off" />
|
||||||
<li id="playlist_loader_spotify" class="valign-wrapper hide">
|
<li id="playlist_loader_spotify" class="valign-wrapper hide">
|
||||||
<div class="valign">
|
<div class="valign">
|
||||||
<div class="preloader-wrapper small active">
|
<div class="preloader-wrapper small active">
|
||||||
<div class="spinner-layer spinner-blue">
|
<div class="spinner-layer spinner-blue">
|
||||||
<div class="circle-clipper left">
|
<div class="circle-clipper left">
|
||||||
<div class="circle"></div>
|
<div class="circle"></div>
|
||||||
</div><div class="gap-patch">
|
</div>
|
||||||
<div class="circle"></div>
|
<div class="gap-patch">
|
||||||
</div><div class="circle-clipper right">
|
<div class="circle"></div>
|
||||||
<div class="circle"></div>
|
</div>
|
||||||
|
<div class="circle-clipper right">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="spinner-layer spinner-red">
|
<div class="spinner-layer spinner-red">
|
||||||
<div class="circle-clipper left">
|
<div class="circle-clipper left">
|
||||||
<div class="circle"></div>
|
<div class="circle"></div>
|
||||||
</div><div class="gap-patch">
|
</div>
|
||||||
<div class="circle"></div>
|
<div class="gap-patch">
|
||||||
</div><div class="circle-clipper right">
|
<div class="circle"></div>
|
||||||
<div class="circle"></div>
|
</div>
|
||||||
|
<div class="circle-clipper right">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="spinner-layer spinner-yellow">
|
<div class="spinner-layer spinner-yellow">
|
||||||
<div class="circle-clipper left">
|
<div class="circle-clipper left">
|
||||||
<div class="circle"></div>
|
<div class="circle"></div>
|
||||||
</div><div class="gap-patch">
|
</div>
|
||||||
<div class="circle"></div>
|
<div class="gap-patch">
|
||||||
</div><div class="circle-clipper right">
|
<div class="circle"></div>
|
||||||
<div class="circle"></div>
|
</div>
|
||||||
|
<div class="circle-clipper right">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="spinner-layer spinner-green">
|
<div class="spinner-layer spinner-green">
|
||||||
<div class="circle-clipper left">
|
<div class="circle-clipper left">
|
||||||
<div class="circle"></div>
|
<div class="circle"></div>
|
||||||
</div><div class="gap-patch">
|
</div>
|
||||||
<div class="circle"></div>
|
<div class="gap-patch">
|
||||||
</div><div class="circle-clipper right">
|
<div class="circle"></div>
|
||||||
<div class="circle"></div>
|
</div>
|
||||||
|
<div class="circle-clipper right">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="not-imported white-bg hide">
|
<li class="not-imported white-bg hide">
|
||||||
<div class="center-align">Not imported</div>
|
<div class="center-align">Not imported</div>
|
||||||
<ul class="input-field field-settings not-imported-container">
|
<ul class="input-field field-settings not-imported-container">
|
||||||
<li class="white-bg not-imported-element">
|
<li class="white-bg not-imported-element">
|
||||||
<div class="extra-add-text truncate"></div>
|
<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 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">
|
<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="mdi-action-search search-extra"></i></a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</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">
|
||||||
|
YouTube
|
||||||
|
</a>
|
||||||
|
<li id="playlist_loader_export" 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>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
</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">
|
||||||
|
<ul class="input-field field-settings white-bg">
|
||||||
|
<li class="white-bg exported-list white-bg">
|
||||||
|
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@@ -1,10 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Zöff Spotify Importer</title>
|
|
||||||
<script type="text/javascript" src="/static/dist/spotify.min.js"></script>
|
|
||||||
<meta charset="UTF-8"/>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -69,14 +69,14 @@
|
|||||||
line-height: 40px !important;
|
line-height: 40px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.import-spotify-auth, .import-youtube{
|
.import-spotify-auth, .import-youtube, .export-spotify-auth, .export-youtube, .exported-playlist{
|
||||||
color:white !important;
|
color:white !important;
|
||||||
height:40px !important;
|
height:40px !important;
|
||||||
line-height: 40px !important;
|
line-height: 40px !important;
|
||||||
margin: 0 4rem 0 0 !important;
|
margin: 0 4rem 0 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.import-buttons{
|
.import-buttons, .export-buttons{
|
||||||
padding:10px;
|
padding:10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -424,11 +424,11 @@ display: inline;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.white-bg{
|
.white-bg{
|
||||||
background-color:white;
|
background-color:white !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.white-bg:hover{
|
.white-bg:hover{
|
||||||
background-color:white;
|
background-color:white !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card .card-content {
|
.card .card-content {
|
||||||
@@ -960,8 +960,9 @@ ul #chat-log{
|
|||||||
margin-top:15px;
|
margin-top:15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#playlist_loader, #playlist_loader_spotify {
|
#playlist_loader, #playlist_loader_spotify, #playlist_loader_export {
|
||||||
padding: 10px 0px 0px 70px;
|
padding: 10px 0px 0px 70px;
|
||||||
|
background-color: white !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#search_loader:hover {
|
#search_loader:hover {
|
||||||
@@ -1542,6 +1543,7 @@ nav ul li:hover, nav ul li.active {
|
|||||||
|
|
||||||
.tabs_height{
|
.tabs_height{
|
||||||
height:auto !important;
|
height:auto !important;
|
||||||
|
overflow:initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-mobile{
|
.brand-mobile{
|
||||||
|
|||||||
2
static/dist/embed.min.js
vendored
2
static/dist/embed.min.js
vendored
File diff suppressed because one or more lines are too long
6
static/dist/main.min.js
vendored
6
static/dist/main.min.js
vendored
File diff suppressed because one or more lines are too long
2
static/dist/spotify.min.js
vendored
2
static/dist/spotify.min.js
vendored
@@ -1 +1 @@
|
|||||||
!function(){function o(o){var i,t=o.substring(1).split("&"),a={};for(var n in t)i=t[n].split("="),2==i.length&&(a[i[0]]=i[1]);return a}window.addEventListener("load",function(){var i="b934ecdd173648f5bcd38738af529d58",t=window.location.protocol+"//"+window.location.hostname+"/spotify_callback",a="token",n="playlist-read-private playlist-read-collaborative user-read-private";if(window.location.hash.length<=0)window.location.href="https://accounts.spotify.com/authorize?client_id="+i+"&scope="+n+"&show_dialog=false&response_type="+a+"&redirect_uri="+t;else{var e=o(window.location.hash);window.opener.callback(e)}})}();
|
!function(){function e(e){var t,o=e.substring(1).split("&"),n={};for(var a in o)t=o[a].split("="),2==t.length&&(n[t[0]]=t[1]);return n}window.addEventListener("load",function(){var t,o,n,a=e(window.location.hash);window.location.protocol+"//"+window.location.hostname+"/callback";if(a.spotify)t="b934ecdd173648f5bcd38738af529d58",o="token",n="playlist-read-private playlist-read-collaborative user-read-private",console.log("spotify");else if(a.youtube)t="",o="",n="",console.log("youtube");else{var i=e(window.location.hash);window.opener.callback(i)}})}();
|
||||||
@@ -179,6 +179,64 @@ var List = {
|
|||||||
return true;
|
return true;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
exportToYoutube: function(){
|
||||||
|
var request_url = "https://www.googleapis.com/youtube/v3/playlists?part=snippet";
|
||||||
|
$.ajax({
|
||||||
|
type: "POST",
|
||||||
|
url: request_url,
|
||||||
|
headers: {
|
||||||
|
'Authorization': 'Bearer ' + access_token_data_youtube.access_token,
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
data: JSON.stringify({
|
||||||
|
snippet: {
|
||||||
|
title: chan.toLowerCase(),
|
||||||
|
description: 'Playlist exported from zoff',
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
success: function(response){
|
||||||
|
var number_added = 0;
|
||||||
|
var playlist_id = response.id;
|
||||||
|
$.each(full_playlist, function(i, data){
|
||||||
|
var request_url = "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet";
|
||||||
|
$.ajax({
|
||||||
|
type: "POST",
|
||||||
|
url: request_url,
|
||||||
|
headers: {
|
||||||
|
'Authorization': 'Bearer ' + access_token_data_youtube.access_token,
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
data: JSON.stringify({
|
||||||
|
'snippet': {
|
||||||
|
'playlistId': playlist_id,
|
||||||
|
'resourceId': {
|
||||||
|
'kind': 'youtube#video',
|
||||||
|
'videoId': data.id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
success: function(response){
|
||||||
|
Helper.log("Added video: " + data.id + " to playlist id " + playlist_id);
|
||||||
|
if(number_added == full_playlist.length - 1){
|
||||||
|
Helper.log("All videoes added!");
|
||||||
|
Helper.log("url: https://www.youtube.com/playlist?list=" + playlist_id);
|
||||||
|
$(".exported-list").append("<h5>Exported URL:</h5>");
|
||||||
|
$(".exported-list").append("<a target='_blank' class='btn orange exported-playlist' href='https://www.youtube.com/playlist?list=" + playlist_id + "'>" + chan + "</a>");
|
||||||
|
$("#playlist_loader_export").addClass("hide");
|
||||||
|
//$(".youtube_export_button").removeClass("hide");
|
||||||
|
$(".exported-list-container").removeClass("hide");
|
||||||
|
}
|
||||||
|
number_added += 1;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
error: function(response){
|
||||||
|
Helper.log(response);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
importOldList: function(chan){
|
importOldList: function(chan){
|
||||||
var ids="";
|
var ids="";
|
||||||
var num=0;
|
var num=0;
|
||||||
|
|||||||
@@ -35,6 +35,8 @@ var embed_height = 300;
|
|||||||
var embed_width = 600;
|
var embed_width = 600;
|
||||||
var embed_autoplay = "&autoplay";
|
var embed_autoplay = "&autoplay";
|
||||||
var connect_error = false;
|
var connect_error = false;
|
||||||
|
var access_token_data_youtube = {};
|
||||||
|
var youtube_authenticated = false;
|
||||||
|
|
||||||
if(localStorage.debug === undefined){
|
if(localStorage.debug === undefined){
|
||||||
var debug = false;
|
var debug = false;
|
||||||
@@ -173,7 +175,6 @@ function init(){
|
|||||||
}
|
}
|
||||||
|
|
||||||
if($("#alreadychannel").length === 0 || Helper.mobilecheck()){
|
if($("#alreadychannel").length === 0 || Helper.mobilecheck()){
|
||||||
Helper.log("ISAJODIJOQIJW");
|
|
||||||
setup_youtube_listener();
|
setup_youtube_listener();
|
||||||
get_list_listener();
|
get_list_listener();
|
||||||
setup_suggested_listener();
|
setup_suggested_listener();
|
||||||
@@ -314,6 +315,15 @@ function embed_code(autoplay, width, height){
|
|||||||
return '<embed src="https://zoff.no/embed.html#' + chan.toLowerCase() + autoplay + '" width="' + width + 'px" height="' + height + 'px">';
|
return '<embed src="https://zoff.no/embed.html#' + chan.toLowerCase() + autoplay + '" width="' + width + 'px" height="' + height + 'px">';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function randomString(length){
|
||||||
|
var text = "";
|
||||||
|
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.-_";
|
||||||
|
for(var i = 0; i < length; i++) {
|
||||||
|
text += possible.charAt(Math.floor(Math.random() * possible.length));
|
||||||
|
}
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
|
||||||
function spotify_is_authenticated(bool){
|
function spotify_is_authenticated(bool){
|
||||||
if(bool){
|
if(bool){
|
||||||
Helper.log("------------------------");
|
Helper.log("------------------------");
|
||||||
@@ -460,10 +470,45 @@ $("#clickme").click(function(){
|
|||||||
Player.player.playVideo();
|
Player.player.playVideo();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$(document).on("click", "#listExport", function(e){
|
||||||
|
e.preventDefault();
|
||||||
|
Helper.log(full_playlist);
|
||||||
|
$("#playlist_loader_export").removeClass("hide");
|
||||||
|
$(".youtube_export_button").addClass("hide");
|
||||||
|
if(!youtube_authenticated){
|
||||||
|
var nonce = randomString(29);
|
||||||
|
window.callback = function(data) {
|
||||||
|
access_token_data_youtube = data;
|
||||||
|
if(access_token_data_youtube.state == nonce){
|
||||||
|
youtube_authenticated = true;
|
||||||
|
setTimeout(function(){
|
||||||
|
youtube_authenticated = false;
|
||||||
|
access_token_data_youtube = {};
|
||||||
|
}, access_token_data_youtube.expires_in * 1000);
|
||||||
|
List.exportToYoutube();
|
||||||
|
} else {
|
||||||
|
access_token_data_youtube = "";
|
||||||
|
console.error("Nonce doesn't match");
|
||||||
|
}
|
||||||
|
youtube_window.close();
|
||||||
|
window.callback = "";
|
||||||
|
};
|
||||||
|
youtube_window = window.open("/o_callback#youtube=true&nonce=" + nonce, "", "width=600, height=600");
|
||||||
|
} else {
|
||||||
|
List.exportToYoutube();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).on("click", "#listExportSpotify", function(e){
|
||||||
|
e.preventDefault();
|
||||||
|
Helper.log(full_playlist);
|
||||||
|
});
|
||||||
|
|
||||||
$(document).on("submit", "#listImport", function(e){
|
$(document).on("submit", "#listImport", function(e){
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if($("#import").val() !== ""){
|
var url = $("#import").val().split("https://www.youtube.com/playlist?list=");
|
||||||
Search.importPlaylist(document.getElementById("import").value);
|
if($("#import").val() !== "" && url.length == 2){
|
||||||
|
Search.importPlaylist(url[1]);
|
||||||
document.getElementById("import").value = "";
|
document.getElementById("import").value = "";
|
||||||
document.getElementById("import").disabled = true;
|
document.getElementById("import").disabled = true;
|
||||||
$("#import").addClass("hide");
|
$("#import").addClass("hide");
|
||||||
@@ -616,20 +661,27 @@ $(document).on("click", ".suggested-link", function(e){
|
|||||||
|
|
||||||
$(document).on("click", ".import-spotify-auth", function(e){
|
$(document).on("click", ".import-spotify-auth", function(e){
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
var nonce = randomString(29);
|
||||||
window.callback = function(data) {
|
window.callback = function(data) {
|
||||||
access_token_data = data;
|
access_token_data = data;
|
||||||
spotify_authenticated = true;
|
if(access_token_data.state == nonce){
|
||||||
spotify_is_authenticated(true);
|
spotify_authenticated = true;
|
||||||
setTimeout(function(){
|
spotify_is_authenticated(true);
|
||||||
spotify_authenticated = false;
|
setTimeout(function(){
|
||||||
spotify_is_authenticated(false);
|
spotify_authenticated = false;
|
||||||
$(".spotify_authenticated").css("display", "none");
|
access_token_data = {};
|
||||||
$(".spotify_unauthenticated").css("display", "block");
|
spotify_is_authenticated(false);
|
||||||
}, access_token_data.expires_in * 1000);
|
$(".spotify_authenticated").css("display", "none");
|
||||||
|
$(".spotify_unauthenticated").css("display", "block");
|
||||||
|
}, access_token_data.expires_in * 1000);
|
||||||
|
} else {
|
||||||
|
access_token_data = {};
|
||||||
|
console.error("States doesn't match");
|
||||||
|
}
|
||||||
spotify_window.close();
|
spotify_window.close();
|
||||||
window.callback = "";
|
window.callback = "";
|
||||||
};
|
};
|
||||||
spotify_window = window.open("/spotify_callback", "", "width=600, height=600");
|
spotify_window = window.open("/o_callback#spotify=true&nonce=" + nonce, "", "width=600, height=600");
|
||||||
});
|
});
|
||||||
|
|
||||||
$(document).on("click", ".import-youtube", function(e){
|
$(document).on("click", ".import-youtube", function(e){
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ var Player = {
|
|||||||
} catch(e){}
|
} catch(e){}
|
||||||
Helper.log("video_id variable: " + video_id);
|
Helper.log("video_id variable: " + video_id);
|
||||||
Helper.log("---------------------------------");
|
Helper.log("---------------------------------");
|
||||||
if(obj.length === 0){
|
if(!obj.np){
|
||||||
|
|
||||||
document.getElementById('song-title').innerHTML = "Empty channel. Add some songs!";
|
document.getElementById('song-title').innerHTML = "Empty channel. Add some songs!";
|
||||||
$("#player_overlay").height($("#player").height());
|
$("#player_overlay").height($("#player").height());
|
||||||
|
|||||||
@@ -227,11 +227,6 @@ var Search = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
if(current == totalNumber - 1){
|
|
||||||
document.getElementById("import_spotify").disabled = false;
|
|
||||||
$("#import_spotify").removeClass("hide");
|
|
||||||
$("#playlist_loader_spotify").addClass("hide");
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
readySubmit: function(found, obj){
|
readySubmit: function(found, obj){
|
||||||
@@ -247,6 +242,9 @@ var Search = {
|
|||||||
$.each(Search.submitArray, function(i, data){
|
$.each(Search.submitArray, function(i, data){
|
||||||
Search.submit(data.id, data.title, data.duration, true, i, Search.submitArray.length - 1);
|
Search.submit(data.id, data.title, data.duration, true, i, Search.submitArray.length - 1);
|
||||||
});
|
});
|
||||||
|
document.getElementById("import_spotify").disabled = false;
|
||||||
|
$("#import_spotify").removeClass("hide");
|
||||||
|
$("#playlist_loader_spotify").addClass("hide");
|
||||||
Search.submitArray = [];
|
Search.submitArray = [];
|
||||||
Search.submitArrayExpected = null;
|
Search.submitArrayExpected = null;
|
||||||
}
|
}
|
||||||
@@ -265,22 +263,60 @@ var Search = {
|
|||||||
|
|
||||||
importPlaylist: function(pId,pageToken){
|
importPlaylist: function(pId,pageToken){
|
||||||
token = "";
|
token = "";
|
||||||
|
var headers;
|
||||||
|
var datatype;
|
||||||
if(pageToken !== undefined)
|
if(pageToken !== undefined)
|
||||||
token = "&pageToken="+pageToken;
|
token = "&pageToken="+pageToken;
|
||||||
playlist_url = "https://www.googleapis.com/youtube/v3/playlistItems?part=contentDetails&maxResults=49&key="+api_key+"&playlistId="+pId+token;
|
playlist_url = "https://www.googleapis.com/youtube/v3/playlistItems?part=contentDetails&maxResults=49&key="+api_key+"&playlistId="+pId+token;
|
||||||
|
if(youtube_authenticated){
|
||||||
|
datatype = "html";
|
||||||
|
headers = {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': 'Bearer ' + access_token_data_youtube.access_token
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
headers = {};//'Content-Type': 'application/json'};
|
||||||
|
datatype = "jsonp";
|
||||||
|
}
|
||||||
$.ajax({
|
$.ajax({
|
||||||
type: "GET",
|
type: "GET",
|
||||||
url: playlist_url,
|
url: playlist_url,
|
||||||
dataType:"jsonp",
|
dataType: datatype,
|
||||||
|
//dataType:"jsonp",
|
||||||
|
headers: headers,
|
||||||
success: function(response)
|
success: function(response)
|
||||||
{
|
{
|
||||||
if(response.error){
|
if(response.error){
|
||||||
document.getElementById("import").disabled = false;
|
if(response.error.errors[0].reason == "playlistItemsNotAccessible"){
|
||||||
$("#playlist_loader").addClass("hide");
|
var nonce = randomString(29);
|
||||||
$("#import").removeClass("hide");
|
window.callback = function(data) {
|
||||||
Materialize.toast("It seems you've entered a invalid url.", 4000);
|
access_token_data_youtube = data;
|
||||||
} else {
|
if(access_token_data_youtube.state == nonce){
|
||||||
|
youtube_authenticated = true;
|
||||||
|
setTimeout(function(){
|
||||||
|
youtube_authenticated = false;
|
||||||
|
access_token_data_youtube = {};
|
||||||
|
}, access_token_data_youtube.expires_in * 1000);
|
||||||
|
Search.importPlaylist(pId, pageToken);
|
||||||
|
} else {
|
||||||
|
access_token_data_youtube = "";
|
||||||
|
console.error("Nonce doesn't match");
|
||||||
|
}
|
||||||
|
youtube_window.close();
|
||||||
|
window.callback = "";
|
||||||
|
};
|
||||||
|
youtube_window = window.open("/o_callback#youtube=true&nonce=" + nonce, "", "width=600, height=600");
|
||||||
|
} else {
|
||||||
|
Helper.log(response.error);
|
||||||
|
document.getElementById("import").disabled = false;
|
||||||
|
$("#playlist_loader").addClass("hide");
|
||||||
|
$("#import").removeClass("hide");
|
||||||
|
Materialize.toast("It seems you've entered a invalid url.", 4000);
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
var ids="";
|
var ids="";
|
||||||
|
if(typeof(response) == "string") response = $.parseJSON(response);
|
||||||
//Search.addVideos(response.items[0].contentDetails.videoId);
|
//Search.addVideos(response.items[0].contentDetails.videoId);
|
||||||
//response.items.shift();
|
//response.items.shift();
|
||||||
$.each(response.items, function(i,data)
|
$.each(response.items, function(i,data)
|
||||||
|
|||||||
@@ -1,25 +0,0 @@
|
|||||||
window.addEventListener("load", function(){
|
|
||||||
var client_id = "b934ecdd173648f5bcd38738af529d58";
|
|
||||||
var redirect = window.location.protocol + "//" + window.location.hostname + "/spotify_callback";
|
|
||||||
var response = "token";
|
|
||||||
var scope = "playlist-read-private playlist-read-collaborative user-read-private";
|
|
||||||
if(window.location.hash.length <= 0){
|
|
||||||
window.location.href = "https://accounts.spotify.com/authorize?client_id=" + client_id + "&scope=" + scope + "&show_dialog=false&response_type=" + response + "&redirect_uri=" + redirect;
|
|
||||||
} else {
|
|
||||||
var query_parameters = getQueryHash(window.location.hash);
|
|
||||||
window.opener.callback(query_parameters);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function getQueryHash(url){
|
|
||||||
var temp_arr = url.substring(1).split("&");
|
|
||||||
var done_obj = {};
|
|
||||||
var splitted;
|
|
||||||
for(var i in temp_arr) {
|
|
||||||
splitted = temp_arr[i].split("=");
|
|
||||||
if(splitted.length == 2) {
|
|
||||||
done_obj[splitted[0]] = splitted[1];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return done_obj;
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user