Skip to content

Instantly share code, notes, and snippets.

@nasitra

nasitra/ListPlayer

Last active August 29, 2015 14:14
Show Gist options
  • Save nasitra/7044eb17c84439303e47 to your computer and use it in GitHub Desktop.
Save nasitra/7044eb17c84439303e47 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>ListPlayer</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<style>
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-text-size-adjust:none;
-webkit-touch-callout:none;
}
html {
min-height: 0px !important;
overflow: hidden;
}
body {
-webkit-user-select: none;
margin: 0px;
overflow: hidden;
user-select: none;
width: 100%;
}
#search-content {
overflow: hidden;
padding: 0px;
}
#search-container {
margin: 0 5px;
white-space: nowrap;
}
.search-form {
display: inline-block;
vertical-align: middle;
white-space: nowrap;
}
#search-list-container {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
#search-list {
margin: 0;
}
#playlist-content {
padding: 0px;
}
#playlist-form {
white-space: nowrap;
}
#playlist-loop-form, #playlist-shuffle-form, #playlist-delete-form, #playlist-updown-form {
display: inline-block;
margin-bottom: 8px;
overflow: visible;
vertical-align: middle;
white-space: nowrap;
}
#playlist-loop-button, #playlist-shuffle-button, #playlist-delete-button, #playlist-up-button, #playlist-down-button {
display: inline-block;
margin-left: 5px;
vertical-align: middle;
}
#playlist-container {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
#playlist-field {
margin: 0px;
}
#player-header {
height: 42px;
}
#player-content {
background: black;
padding: 0px;
}
#player-container {
position: absolute;
width: 100%;
}
#player {
height: 100%;
width: 100%;
}
</style>
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
</script>
<script src="//code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="//www.youtube.com/iframe_api"></script>
</head>
<body>
<div data-role="page" id="search">
<div id="search-header" data-role="header">
<h1>Search</h1>
<a id="playlist-button" href="#playlist" class="ui-btn-right" data-icon="arrow-r" data-transition="slide">Playlist (0)</a>
</div>
<div id="search-content" data-role="content">
<div id="search-container">
<div id="search-input-container" class="search-form">
<input id="search-input" data-inline="true" type="search" value="" autocomplete="off" spellcheck="false" />
</div>
<div id="search-button-container" class="search-form" data-role="controlgroup">
<a id="search-button" data-role="button" href="#" data-mini="true" data-ajax="false">Search</a>
</div>
</div>
<div id="search-list-container">
<div id="search-list-scroller"><ul id="search-list" data-role="listview" data-split-icon="plus" data-split-theme="d"></ul></div>
</div>
</div>
</div>
<div data-role="page" id="playlist">
<div id="playlist-header" data-role="header">
<a id="search-page-button" href="#search" data-icon="arrow-l" data-transition="slide" data-direction="reverse">Search</a>
<h1>Playlist</h1>
<a id="generate-button" class="ui-btn-right" href="#" data-icon="check" data-theme="b">Generate</a>
</div>
<div id="playlist-content" data-role="content">
<div id="playlist-form">
<div id="playlist-loop-form" data-role="controlgroup" data-type="horizontal">
<a id="playlist-loop-button" href="#" class="ui-btn-right" data-role="button" data-inline="true">Loop</a>
</div>
<div id="playlist-shuffle-form" data-role="controlgroup" data-type="horizontal">
<a id="playlist-shuffle-button" href="#" class="ui-btn-right" data-role="button" data-inline="true">Shuffle</a>
</div>
<div id="playlist-delete-form" data-role="controlgroup" data-type="horizontal">
<a id="playlist-delete-button" class="ui-btn-right" data-role="button" data-icon="delete" href="#" data-inline="true" data-theme="e">Delete</a>
</div>
<div id="playlist-updown-form" data-role="controlgroup" data-type="horizontal">
<a id="playlist-up-button" class="ui-btn-right" data-role="button" data-icon="arrow-u" href="#" data-inline="true" data-theme="d">Up</a>
<a id="playlist-down-button" class="ui-btn-right" data-role="button" data-icon="arrow-d" href="#" data-inline="true" data-theme="d">Down</a>
</div>
</div>
<div id="playlist-container">
<ul id="playlist-field" data-role="listview" data-split-icon="check" data-split-theme="c"></ul>
</div>
</div>
</div>
<div data-role="page" id="player">
<div id="player-header" data-role="header">
<a id="add-playlist-button" href="#" data-icon="plus" data-theme="b" data-rel="back">Add Playlist</a>
<h1 id="player-title">&nbsp;</h1>
<a id="player-close-button" href="#" data-icon="delete" data-theme="c" data-rel="back">Close</a>
</div>
<div id="player-content" data-role="content">
<div id="player-container">
<div id="video-player"></div>
</div>
</div>
</div>
<div data-role="dialog" id="generate">
<div data-role="header">
<h1 id="dialog-title">&nbsp;</h1>
</div>
<div data-role="content">
<div id="dialog-url-text">
<p><span>Playlist URL: </span><a id="dialog-playlist-url-button" href="#"></a></p>
</div>
</div>
</div>
<script>
function onYouTubePlayerAPIReady() {
ListPlayer.isYouTubePlayerAPIReady = true;
if (ListPlayer.isLoadPlaylistData && location.href.search(/#player/) !== -1) {
$("#add-playlist-button").css("visibility", "hidden");
if (ListPlayer.playlist.length > 0) { ListPlayer.playPlaylist(ListPlayer.playlist[0].id); }
}
}
(function() {
var ListPlayer = {
isYouTubePlayerAPIReady: false,
isLoadPlaylistData: false,
playlist: [],
playPlaylist: function() {}
};
window.ListPlayer = ListPlayer;
$(function() {
// global
var agent = navigator.userAgent;
var player = null;
var playlist = [];
ListPlayer.playlist = playlist;
var isTouchEnabled = ("createTouch" in document);
var START = isTouchEnabled ? "touchstart" : "mousedown";
var MOVE = isTouchEnabled ? "touchmove" : "mousemove";
var END = isTouchEnabled ? "touchend" : "mouseup";
var isPlayPlaylist = false;
var $dummy0 = null, $dummy1 = null;
// resize
$(window).resize(function() {
var heightOffset = 0;
if(agent.search(/iPhone/) !== -1) { heightOffset = 60; }
$("#search-input-container").width($("#search-container").outerWidth() - $("#search-button-container").outerWidth() - 10);
$("#search-list-container").height($(window).height() - $("#search-container").outerHeight() - $("#search-header").outerHeight() + heightOffset);
$("#player-container").height($(window).height() - $("#player-header").outerHeight() + heightOffset);
$("#playlist-container").height($(window).height() - $("#playlist-form").outerHeight() - $("#playlist-header").outerHeight() + heightOffset);
var $searchList = $("#search-list"), $playlist = $("#playlist-field");
var searchHeightDiff = $("#search-list").height() - $("#search-list-container").height();
var playlistHeightDiff = $("#playlist-field").height() - $("#playlist-container").height();
if ($dummy0 !== null) { $dummy0.remove(); $searchList.listview("refresh"); }
if ($dummy1 !== null) { $dummy1.remove(); $playlist.listview("refresh"); }
if (searchHeightDiff > 0 && searchHeightDiff < 100) {
$dummy0 = $("<div>").css({"height": "90px"}).text("");
$searchList.append($dummy0);
$searchList.listview("refresh");
}
if (playlistHeightDiff > 0 && playlistHeightDiff < 100) {
$dummy1 = $("<div>").css({"height": "90px"}).text("");
$playlist.append($dummy1);
$playlist.listview("refresh");
}
});
$(window).resize();
// touch scroll
function applyTouchScroll($element) {
$element.bind("touchstart", function(e) {
this.__clientX__ = e.originalEvent.touches[0].clientX;
this.__clientY__ = e.originalEvent.touches[0].clientY;
this.__scrollLeft__ = $(this).scrollLeft();
this.__scrollTop__ = $(this).scrollTop();
}).bind("touchmove", function(e) {
e.preventDefault();
$(this).scrollLeft(this.__scrollLeft__ - e.originalEvent.touches[0].clientX + this.__clientX__);
$(this).scrollTop(this.__scrollTop__ - e.originalEvent.touches[0].clientY + this.__clientY__);
}).bind("touchend", function(e) { setTimeout(function() { scrollTo(0, 1); }, 100); });
}
if (isTouchEnabled && agent.search(/Android/) !== -1) {
$(document).bind("touchmove", function(e) { e.preventDefault(); });
applyTouchScroll($("#search-list-container"));
applyTouchScroll($("#playlist-container"));
}
// params
function decodeParams(params) {
var paramsObject = {};
var params = params.split("&");
var param, i, len;
for (i = 0, len = params.length; i < len; ++i) {
param = params[i].split("=");
var key = param.shift();
param.join("=");
paramsObject[key] = decodeURI(param);
}
return paramsObject;
}
var params = decodeParams(location.search.substring(1)), playlistParams = [];
var getPlaylistVideoData = function(index) {
getVideoData(playlistParams[index], function(data, i) {
playlist[i] = data;
if (i < playlistParams.length - 1) { getPlaylistVideoData(i + 1); }
else {
ListPlayer.isLoadPlaylistData = true;
if (location.href.search(/#playlist/) !== -1) {
updateButton();
updatePlaylist();
}
if (ListPlayer.isYouTubePlayerAPIReady && location.href.search(/#player/) !== -1) {
$("#add-playlist-button").css("visibility", "hidden");
if (playlist.length > 0) { playPlaylist(playlist[0].id); }
}
}
}, index);
};
if ("playlist" in params) {
playlistParams = JSON.parse(params.playlist);
getPlaylistVideoData(0);
}
$("#playlist-button").bind("tap", function(event) {
event.stopPropagation();
}).children().children().first().text("Playlist (" + playlistParams.length + ")");
// search
var searchQuery, currentStartIndex;
var maxResults = 10;
function getVideoData(videoID, callback, index) {
var domain = "org.ionstage.listplayer.videoID.";
var videoData = sessionStorage.getItem(domain + videoID);
if (videoData !== null) {
videoData = JSON.parse(videoData);
callback(videoData, index);
} else {
$.getJSON("//gdata.youtube.com/feeds/api/videos?v=2&alt=json&q=" + videoID + "&format=5", function(data) {
var entry = ("feed" in data && "entry" in data.feed) ? data.feed.entry[0] : null, videoIDText;
if (entry !== null) {
videoIDText = entry.id.$t.split(":");
videoIDText = videoIDText[videoIDText.length - 1];
videoData = {id: videoIDText, title: entry.title.$t, thumbnail: entry.media$group.media$thumbnail[0].url, description: entry.media$group.media$description.$t};
sessionStorage.setItem(domain + videoID, JSON.stringify(videoData));
} else { videoData = {id: "", title: "Error", thumbnail: "", description: ""}; }
callback(videoData, index);
});
}
}
var searchListScrollTop = 0;
$("#search").live("pagebeforeshow", function(event) {
$("#search-container").css("visibility", "hidden");
$("#search-list").css("opacity", 0);
$("#playlist-button").children().children().first().text("Playlist (" + playlist.length + ")");
$("title").text("ListPlayer");
}).live("pageshow", function(event) {
event.preventDefault();
event.stopPropagation();
$(document).scrollTop(0);
$("#search-container").css("visibility", "visible");
$("#playlist-button").css("visibility", "visible");
$("#search-list-container").scrollTop(searchListScrollTop);
$("#search-list").css("opacity", 1);
$(window).resize();
}).live("pagebeforehide", function(event) {
searchListScrollTop = $("#search-list-container").scrollTop();
});
function updateSearchList(query, startIndex) {
if (startIndex < 1) { startIndex = 1; }
searchQuery = query;
currentStartIndex = startIndex;
var $searchList = $("#search-list").empty().css("visibility", "hidden");
$.mobile.loading("show");
$.getJSON("//gdata.youtube.com/feeds/api/videos?v=2&alt=json&q="+ searchQuery + "&format=5&max-results=" + maxResults + "&start-index=" + currentStartIndex, function(data) {
var entries = data.feed.entry, i, len, entry, videoIDText, dataElement, listElement;
if (startIndex !== 1) {
$searchList.append($("<li>").addClass("control").attr({"data-theme": "d"}).append($("<a>").attr({href: "#"}).css("padding-right", "15px").text("<< Prev").bind("tap", function(event) {
event.preventDefault();
event.stopPropagation();
updateSearchList(searchQuery, currentStartIndex - maxResults);
})));
}
if (entries !== undefined) {
for (i = 0, len = entries.length; i < len; ++i) {
entry = entries[i];
videoIDText = entry.id.$t.split(":");
videoIDText = videoIDText[videoIDText.length - 1];
dataElement = {title: entry.title.$t, thumbnail: entry.media$group.media$thumbnail[0].url, description: entry.media$group.media$description.$t};
listElement = $("<img>").attr("src", dataElement.thumbnail).css({top: "10px", left: "5px", width: "80px", height: "60px"}).addClass("ui-li-thumb").add($("<h3>").text(dataElement.title).addClass("ui-li-heading")).add($("<p>").addClass("ui-li-desc").text(dataElement.description));
$searchList.append($("<li>").append($("<a>").attr({href: "#", index: i, "video-id": videoIDText, "video-title": dataElement.title, "video-description": dataElement.description, "video-thumbnail": dataElement.thumbnail}).addClass("ui-link-inherit").bind("tap", function(event) {
event.preventDefault();
event.stopPropagation();
$("#add-playlist-button").css("visibility", "visible");
$.mobile.changePage("#player", {transition: "pop"});
$("#video-player").attr({"video-id": $(this).attr("video-id"), "video-title": $(this).attr("video-title"), "video-description": $(this).attr("video-description"), "video-thumbnail": $(this).attr("video-thumbnail")}).empty();
$("title").text($(this).attr("video-title") + " - ListPlayer");
$("#player-title").text($(this).attr("video-title"));
isPlayPlaylist = false;
loadVideo($(this).attr("video-id"));
}).append(listElement)).append($("<a>").attr({href: "#", index: i, "video-id": dataElement.id, "data-theme": "c"}).bind("tap", function(event) {
event.preventDefault();
event.stopPropagation();
var $listitem = $(this).prev().children().children().first();
addPlaylist({id: $listitem.attr("video-id"), title: $listitem.attr("video-title"), description: $listitem.attr("video-description"), thumbnail: $listitem.attr("video-thumbnail")});
}).bind(START, function() {
$(this).add($(this).children().children()).attr({"data-theme": "b"}).removeClass("ui-btn-up-c").removeClass("ui-btn-hover-c").addClass("ui-btn-hover-b").addClass("ui-btn-up-b");
}).bind(END, function() {
$(this).add($(this).children().children()).attr({"data-theme": "c"}).removeClass("ui-btn-up-b").removeClass("ui-btn-hover-b").addClass("ui-btn-hover-c").addClass("ui-btn-up-c");
})));
}
$searchList.append($("<li>").addClass("control").attr({"data-theme": "d"}).append($("<a>").attr({href: "#"}).css("padding-right", "15px").text("Next >>").bind("tap", function(event) {
event.preventDefault();
event.stopPropagation();
updateSearchList(searchQuery, currentStartIndex + maxResults);
$("#search-list-container").scrollTop(0);
})));
} else {
$searchList.append($("<li>").addClass("control").attr({"data-theme": "g"}).text("No More Results"));
}
$searchList.listview("refresh");
$(".control").children().children().each(function(index, element) {
var tagName = $(element).get(0).nodeName.toLowerCase();
if (tagName === "div") {
$(element).css("text-align", "center");
} else if (tagName === "span") {
$(element).hide();
}
});
$(window).resize();
$(document).scrollTop(0);
$.mobile.loading("hide");
$searchList.css("visibility", "visible");
});
}
$("#search-input").live("keypress", function(event) {
if (event.keyCode === 13) {
$("#search-input").blur();
$("#search-list-container").scrollTop(0);
updateSearchList($("#search-input").val(), 1);
}
});
$("#search-button").bind("tap", function(event) {
event.preventDefault();
event.stopPropagation();
updateSearchList($("#search-input").val(), 1);
$("#search-list-container").scrollTop(0);
});
// playlist
function addPlaylist(item) {
playlist.push(item);
$("#playlist-button").children().children().first().text("Playlist (" + playlist.length + ")");
}
function updateButton() {
var checkedLength = $(".playlist-checkbox.ui-btn-up-b").length;
if (checkedLength === 0) {
$("#playlist-loop-form").show();
$("#playlist-shuffle-form").show();
$("#playlist-delete-button").css("visibility", "hidden");
$("#playlist-updown-form").css("visibility", "hidden");
}
else {
$("#playlist-loop-form").hide();
$("#playlist-shuffle-form").hide();
if (checkedLength === 1) { $("#playlist-delete-button").css("visibility", "visible"); $("#playlist-updown-form").css("visibility", "visible"); }
else { $("#playlist-delete-button").css("visibility", "visible"); $("#playlist-updown-form").css("visibility", "hidden"); }
}
if (playlist.length === 0) {
$("#playlist-loop-form").hide();
$("#playlist-shuffle-form").hide();
$("#generate-button").css("visibility", "hidden");
} else { $("#generate-button").css("visibility", "visible"); }
}
function playPlaylist(videoID) {
var playlistArray = [], i, len, index, title;
for (i = 0, len = playlist.length; i < len; ++i) {
playlistArray.push(playlist[i].id);
if (playlist[i].id === videoID) { index = i; }
}
$("#player-container").hide();
$.mobile.loading("show");
if (player === null) { loadVideo(null); }
var title = playlist[index].title;
var timerId = setInterval(function(){
if(player !== null && "cuePlaylist" in player){
isPlayPlaylist = true;
player.cuePlaylist(playlistArray, index);
clearInterval(timerId);
$(window).resize();
$(document).scrollTop(0);
$.mobile.loading("hide");
$("title").text(title + " - ListPlayer");
$("#player-title").text(title);
$("#player-container").show();
player.setLoop(isLoop);
}
}, 300);
}
ListPlayer.playPlaylist = playPlaylist;
function updatePlaylist() {
var $playlist = $("#playlist-field").empty(), i, len, dataElement, listElement;
$("#playlist-delete-button").css("visibility", "hidden");
$("#playlist-updown-form").css("visibility", "hidden");
for (i = 0, len = playlist.length; i < len; ++i) {
dataElement = playlist[i];
listElement = $("<img>").attr("src", dataElement.thumbnail).css({top: "10px", left: "5px", width: "80px", height: "60px"}).addClass("ui-li-thumb").add($("<h3>").text(dataElement.title || "").addClass("ui-li-heading")).add($("<p>").addClass("ui-li-desc").text(dataElement.description));
$playlist.append($("<li>").append($("<a>").attr({href: "#", index: i, "video-id": dataElement.id, "video-title": dataElement.title, "video-description": dataElement.description}).addClass("ui-link-inherit").bind("tap", function(event) {
event.preventDefault();
event.stopPropagation();
$("#add-playlist-button").css("visibility", "hidden");
$.mobile.changePage("#player", {transition: "pop"});
$("#video-player").attr({"video-id": $(this).attr("video-id"), "video-title": $(this).attr("video-title"), "video-description": $(this).attr("video-description"), "video-thumbnail": dataElement.thumbnail}).empty();
$("title").text($(this).attr("video-title") + " - ListPlayer");
$("#player-title").text($(this).attr("video-title"));
playPlaylist($(this).attr("video-id"));
}).append(listElement)).append($("<a>").addClass("playlist-checkbox").attr({href: "#", index: i, videoID: dataElement.id}).bind("tap", function(event) {
event.preventDefault();
event.stopPropagation();
var oldTheme = ($(this).hasClass("ui-btn-up-c")) ? "c" : "b";
var newTheme = ($(this).hasClass("ui-btn-up-c")) ? "b" : "c";
$(this).add($(this).children().children()).add($(this).prev()).removeAttr("data-theme").attr("data-theme", newTheme).removeClass("ui-btn-up-" + oldTheme).addClass("ui-btn-up-" + newTheme).removeClass("ui-btn-hover-" + oldTheme).addClass("ui-btn-hover-" + newTheme);
updateButton();
})));
}
$("#playlist-field").listview("refresh");
}
var changeArrayElement = function(array, i, j) {
var tmp = array[i];
array[i] = array[j];
array[j] = tmp;
}
var playlistScrollTop = 0;
$("#playlist").live("pagebeforeshow", function(event) {
$("#playlist-field").css("opacity", 0);
$("title").text("ListPlayer");
}).live("pageshow", function(event) {
event.preventDefault();
event.stopPropagation();
updatePlaylist();
updateButton();
if (playlist.length > 0) { $("#generate-button").css("visibility", "visible"); }
else { $("#generate-button").css("visibility", "hidden"); }
$(document).scrollTop(0);
$("#playlist-container").scrollTop(playlistScrollTop);
$("#playlist-field").css("opacity", 1);
$(window).resize();
}).live("pagebeforehide", function(event) {
playlistScrollTop = $("#playlist-container").scrollTop();
});
$("#search-page-button").bind("tap", function(event) {
event.stopPropagation();
});
var isLoop = false;
$("#playlist-loop-button").bind("tap", function(event) {
event.preventDefault();
event.stopPropagation();
isLoop = !isLoop;
var oldTheme = ($(this).hasClass("ui-btn-up-c")) ? "c" : "b";
var newTheme = ($(this).hasClass("ui-btn-up-c")) ? "b" : "c";
$(this).removeAttr("data-theme").attr("data-theme", newTheme).removeClass("ui-btn-up-" + oldTheme).addClass("ui-btn-up-" + newTheme).removeClass("ui-btn-hover-" + oldTheme).addClass("ui-btn-hover-" + newTheme);
});
Array.prototype.shuffle = function() {
var i = this.length;
while(i){
var j = Math.floor(Math.random()*i);
var t = this[--i];
this[i] = this[j];
this[j] = t;
}
return this;
}
$("#playlist-shuffle-button").bind("tap", function(event) {
event.preventDefault();
event.stopPropagation();
playlist.shuffle();
updatePlaylist();
$("#playlist-field").parent().scrollTop(0);
});
$("#playlist-delete-button").bind("tap", function(event) {
event.preventDefault();
event.stopPropagation();
var checkedIndexes = [], i, len;
$(".playlist-checkbox").each(function(index, element) {
var $element = $(element);
if ($element.hasClass("ui-btn-up-b")) {
checkedIndexes.push(index);
$element.parent().remove();
}
});
checkedIndexes = checkedIndexes.sort();
for (i = checkedIndexes.length - 1; i >= 0; --i) {
playlist.splice(checkedIndexes[i], 1);
}
updateButton();
});
$("#playlist-up-button").bind("tap", function(event) {
event.preventDefault();
event.stopPropagation();
$(".playlist-checkbox").each(function(index, element) {
var $element = $(element);
if ($element.hasClass("ui-btn-up-b") && index > 0) {
changeArrayElement(playlist, index, index - 1);
$("#playlist-field li:nth-child(" + (index + 1) + ")").insertBefore($("#playlist-field li:nth-child(" + index + ")"));
}
});
});
$("#playlist-down-button").bind("tap", function(event) {
event.preventDefault();
event.stopPropagation();
$(".playlist-checkbox").each(function(index, element) {
var $element = $(element);
if ($element.hasClass("ui-btn-up-b") && index < playlist.length - 1) {
changeArrayElement(playlist, index, index + 1);
$("#playlist-field li:nth-child(" + (index + 1) + ")").insertAfter($("#playlist-field li:nth-child(" + (index + 2) + ")"));
}
});
});
updateButton();
// drag & drop
$("#playlist-content").bind("dragover", function(event) {
event.preventDefault();
return false;
}).bind("drop", function(event) {
event = event.originalEvent;
var text = event.dataTransfer.getData("Text"), videoID;
if (text.search(/youtube.com/) !== -1) {
videoID = text.split("?");
videoID = videoID[videoID.length - 1].split("#");
videoID = decodeParams(videoID[videoID.length - 1])["v"];
$.mobile.loading("show");
getVideoData(videoID, function(data) {
playlist.push(data);
updatePlaylist();
$("#playlist-field").parent().scrollTop(9999);
$.mobile.loading("hide");
}, 0);
}
event.stopPropagation();
return false;
});
// player
function onPlayerStateChange(event) {
var newState = event.data, currentVideoID, i, len, title;
if (isPlayPlaylist && (newState === -1 || newState === 5)) {
currentVideoID = player.getPlaylist()[player.getPlaylistIndex()];
for (i = 0, len = playlist.length; i < len; ++i) {
if (playlist[i].id === currentVideoID) {
title = playlist[i].title;
$("title").text(title + " - ListPlayer");
$("#player-title").text(title);
break;
}
}
}
}
function loadVideo(videoID) {
if (player === null) {
player = new YT.Player("video-player", {
height: "100%",
width: "100%",
videoId: videoID,
playerVars: {
autoplay: 0,
controls: 1,
enablejsapi: 1,
origin: location.protocol + '//' + location.host,
rel: 0,
showinfo: 0,
showsearch: 0
},
events: {
"onStateChange": onPlayerStateChange
}
});
} else {
player.cueVideoById(videoID);
}
}
$("#player").live("pagebeforeshow", function(event) {
$("#playlist-button").css("visibility", "hidden");
$("#generate-button").css("visibility", "hidden");
$("#player-container").hide();
$("#player-close-button").css("visibility", "visible");
}).live("pageshow", function(event) {
event.preventDefault();
event.stopPropagation();
$(window).resize();
$(document).scrollTop(0);
setTimeout(function() {
$("#player-container").show();
}, 100);
}).live("pagehide", function(event) {
if (player !== null && "stopVideo" in player && "clearVideo" in player) {
player.stopVideo();
player.clearVideo();
}
$("#player-title").text("");
});
$("#add-playlist-button").bind("tap", function(event) {
event.preventDefault();
event.stopPropagation();
var $videoPlayer = $("#video-player");
addPlaylist({id: $videoPlayer.attr("video-id"), title: $videoPlayer.attr("video-title"), description: $videoPlayer.attr("video-description"), thumbnail: $videoPlayer.attr("video-thumbnail")});
}).css("visibility", "hidden");
$("#player-close-button").css("visibility", "hidden").bind("tap", function(event) {
event.stopPropagation();
});
// generate
var longPlaylistUrl = null;
$("#generate-button").bind("tap", function(event) {
event.preventDefault();
event.stopPropagation();
var playlistArray = [], i, len;
if (playlist.length > 0) {
for (i = 0, len = playlist.length; i < len; ++i) {
playlistArray.push(playlist[i].id);
}
longPlaylistUrl = location.href.split("#")[0];
if (longPlaylistUrl.match(/\?/)) { longPlaylistUrl = longPlaylistUrl.split("?")[0]; }
longPlaylistUrl += "?playlist=" + JSON.stringify(playlistArray) + "#playlist";
setTimeout(function() {
var data = longPlaylistUrl;
$("#dialog-title").text("Complete!");
$("#dialog-playlist-url-button").attr({href: data, target: "_black"}).text(data);
$("#dialog-url-text").show();
}, 0);
$("#dialog-title").text("");
$("#dialog-playlist-url-button").text("");
$("#dialog-url-text").hide();
$.mobile.changePage("#generate", {
transition: "pop"
});
}
});
});
})();
</script>
</body>
</html>
Raw
ListPlayer
ListPlayer is a video player with a playlist.
You can create, play and share your video playlist.
- Search videos and add them to your playlist
- Generate your playlist link to share with others
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment