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

Added export to youtube and improved importing from YouTube

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2016-09-05 13:36:21 +02:00
parent d5acdb2161
commit c6d6270c4a
14 changed files with 383 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.htaccess
View File

@@ -18,12 +18,12 @@ RewriteCond %{REQUEST_URI} !/static
RewriteRule ^(.*)$ php/bot.php [L,NC,QSA]
RewriteCond %{HTTP_HOST} ^zoff.no
RewriteCond %{REQUEST_URI} /spotify_callback
RewriteRule ^(.*)$ php/spotify.html [L,NC,QSA]
RewriteCond %{REQUEST_URI} /o_callback
RewriteRule ^(.*)$ php/callback.html [L,NC,QSA]
RewriteCond %{HTTP_HOST} ^localhost
RewriteCond %{REQUEST_URI} /spotify_callback
RewriteRule ^(.*)$ php/spotify.html [L,NC,QSA]
RewriteCond %{REQUEST_URI} /o_callback
RewriteRule ^(.*)$ php/callback.html [L,NC,QSA]
#RewriteRule (?i)^remote/(.*) php/controller.php?id=$1 [L]

10
gulpfile.js
View File

@@ -4,7 +4,7 @@ var gulp = require('gulp'),
concat = require('gulp-concat');
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({
mangle: true,
compress: true,
@@ -25,14 +25,14 @@ gulp.task('embed', function () {
.pipe(gulp.dest('static/dist'));
});
gulp.task('spotify', function () {
gulp.src(['static/js/spotify.js'])
gulp.task('callback', function () {
gulp.src(['static/js/callback.js'])
.pipe(uglify({
mangle: true,
compress: true,
enclose: true
}))
.pipe(concat('spotify.min.js'))
.pipe(concat('callback.min.js'))
.pipe(gulp.dest('static/dist'));
});
@@ -62,7 +62,7 @@ gulp.task('remotecontroller', function () {
gulp.task('default', function(){
gulp.watch('static/js/*.js', ['js']);
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/remotecontroller.js', ['remotecontroller']);
});

2
index.php
View File

@@ -100,7 +100,7 @@
</li>
<li>
<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>
</a>
</li>

152
php/panel.php
View File

@@ -91,8 +91,6 @@
<input name="removeplay" type="checkbox" class="conf" /><span class="lever"></span>
Remove
</label></div></li>
</ul>
</form>
</div>
@@ -100,7 +98,7 @@
</ul>
</li>
<li class="no-padding remote-panel">
<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
@@ -124,7 +122,6 @@
</a>
<a>
You can control this Zöff instance from another device by going to <b>https://remote.zoff.no/</b>
</a>
</li>
</ul>
@@ -133,33 +130,36 @@
</ul>
</li>
<li class="no-padding">
<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-communication-import-export"></i>
<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="Need help with the site?">
<a class="modal-trigger waves-effect red btn import-youtube" title="Import from YouTube playlist">
YouTube
</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 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">
<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>
<div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
@@ -167,9 +167,11 @@
<div class="spinner-layer spinner-red">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
</div>
<div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
@@ -177,9 +179,11 @@
<div class="spinner-layer spinner-yellow">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
</div>
<div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
@@ -187,9 +191,11 @@
<div class="spinner-layer spinner-green">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
</div>
<div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
@@ -201,7 +207,7 @@
</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">
<a class="modal-trigger waves-effect green lighten btn import-spotify-auth" title="Import Spotify playlist">
Spotify
</a>
</div>
@@ -215,9 +221,11 @@
<div class="spinner-layer spinner-blue">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
</div>
<div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
@@ -225,9 +233,11 @@
<div class="spinner-layer spinner-red">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
</div>
<div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
@@ -235,9 +245,11 @@
<div class="spinner-layer spinner-yellow">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
</div>
<div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
@@ -245,9 +257,11 @@
<div class="spinner-layer spinner-green">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
</div>
<div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
@@ -267,10 +281,98 @@
<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">
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>
</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>
</li>
</ul>
</div>
</li>

10
php/spotify.html
View File

@@ -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>

12
static/css/style.css
View File

@@ -69,14 +69,14 @@
line-height: 40px !important;
}
.import-spotify-auth, .import-youtube{
.import-spotify-auth, .import-youtube, .export-spotify-auth, .export-youtube, .exported-playlist{
color:white !important;
height:40px !important;
line-height: 40px !important;
margin: 0 4rem 0 0 !important;
}
.import-buttons{
.import-buttons, .export-buttons{
padding:10px;
}
@@ -424,11 +424,11 @@ display: inline;
}
.white-bg{
background-color:white;
background-color:white !important;
}
.white-bg:hover{
background-color:white;
background-color:white !important;
}
.card .card-content {
@@ -960,8 +960,9 @@ ul #chat-log{
margin-top:15px;
}
#playlist_loader, #playlist_loader_spotify {
#playlist_loader, #playlist_loader_spotify, #playlist_loader_export {
padding: 10px 0px 0px 70px;
background-color: white !important;
}
#search_loader:hover {
@@ -1542,6 +1543,7 @@ nav ul li:hover, nav ul li.active {
.tabs_height{
height:auto !important;
overflow:initial;
}
.brand-mobile{

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@@ -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)}})}();

58
static/js/list.js
View File

@@ -179,6 +179,64 @@ var List = {
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){
var ids="";
var num=0;

60
static/js/listeners.js
View File

@@ -35,6 +35,8 @@ var embed_height = 300;
var embed_width = 600;
var embed_autoplay = "&autoplay";
var connect_error = false;
var access_token_data_youtube = {};
var youtube_authenticated = false;
if(localStorage.debug === undefined){
var debug = false;
@@ -173,7 +175,6 @@ function init(){
}
if($("#alreadychannel").length === 0 || Helper.mobilecheck()){
Helper.log("ISAJODIJOQIJW");
setup_youtube_listener();
get_list_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">';
}
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){
if(bool){
Helper.log("------------------------");
@@ -460,10 +470,45 @@ $("#clickme").click(function(){
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){
e.preventDefault();
if($("#import").val() !== ""){
Search.importPlaylist(document.getElementById("import").value);
var url = $("#import").val().split("https://www.youtube.com/playlist?list=");
if($("#import").val() !== "" && url.length == 2){
Search.importPlaylist(url[1]);
document.getElementById("import").value = "";
document.getElementById("import").disabled = true;
$("#import").addClass("hide");
@@ -616,20 +661,27 @@ $(document).on("click", ".suggested-link", function(e){
$(document).on("click", ".import-spotify-auth", function(e){
e.preventDefault();
var nonce = randomString(29);
window.callback = function(data) {
access_token_data = data;
if(access_token_data.state == nonce){
spotify_authenticated = true;
spotify_is_authenticated(true);
setTimeout(function(){
spotify_authenticated = false;
access_token_data = {};
spotify_is_authenticated(false);
$(".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();
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){

2
static/js/player.js
View File

@@ -20,7 +20,7 @@ var Player = {
} catch(e){}
Helper.log("video_id variable: " + video_id);
Helper.log("---------------------------------");
if(obj.length === 0){
if(!obj.np){
document.getElementById('song-title').innerHTML = "Empty channel. Add some songs!";
$("#player_overlay").height($("#player").height());

48
static/js/search.js
View File

@@ -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){
@@ -247,6 +242,9 @@ var Search = {
$.each(Search.submitArray, function(i, data){
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.submitArrayExpected = null;
}
@@ -265,22 +263,60 @@ var Search = {
importPlaylist: function(pId,pageToken){
token = "";
var headers;
var datatype;
if(pageToken !== undefined)
token = "&pageToken="+pageToken;
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({
type: "GET",
url: playlist_url,
dataType:"jsonp",
dataType: datatype,
//dataType:"jsonp",
headers: headers,
success: function(response)
{
if(response.error){
if(response.error.errors[0].reason == "playlistItemsNotAccessible"){
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);
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="";
if(typeof(response) == "string") response = $.parseJSON(response);
//Search.addVideos(response.items[0].contentDetails.videoId);
//response.items.shift();
$.each(response.items, function(i,data)

25
static/js/spotify.js
View File

@@ -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;
}