Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
308 lines (255 sloc) 11.3 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
__ __ __ __ __ __
/\ \ | | /\ \_\ \ /\_\_\_\
\ \ \' | \ \ __ \ \/_/\_\/_
\ \__| \ \_\ \_\ /\_\/\_\
\/_/ \/_/\/_/ \/_/\/_/
A video-based theme for Tumblr
e.g. http://cputv.tumblr.com
git: https://github.com/caseypugh/VHX-Theme
Video player and metadata powered by http://VHX.tv
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- DEFAULT VARIABLES -->
<meta name="color:Background" content="#333333" />
<meta name="color:Background Fade" content="#111111" />
<meta name="color:Video player" content="#2ef4ed" />
<meta name="color:Title" content="#2ef4ed" />
<meta name="color:Text" content="#ffffff" />
<meta name="color:Text Alt" content="#aaaaaa" />
<meta name="if:Shuffle videos" content="0" />
<!-- Hiding letterbox is experimental and only works for 16:9 videos -->
<meta name="if:Hide video letterbox" content="0" />
<meta name="if:Show credits" content="1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{Title}{block:SearchPage}, {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link rel="shortcut icon" href="{Favicon}" />
<link rel="apple-touch-icon" href="{PortraitURL-128}"/>
<link rel="alternate" type="application/rss+xml" href="{RSS}" />
<script type="text/javascript" src="http://static.tumblr.com/genyhlk/IJ4luevo0/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/genyhlk/77tluevoh/jquery.swfobject-1.1.1.js"></script>
<script type="text/javascript">
//
// Api docs: http://dev.vhx.tv/video-player.html
//
var color = "{color:Video player}";
color = color.substr(1);
var is_mobile = navigator.userAgent.match(/iPad|iPhone|iPod|Android/i) != null;
var cur_page = 0;
var username = "{Name}";
$(document).ready(
function() {
$(window).resize(redraw);
if (!is_mobile) {
$('#vhx_megaplaya').flash({
swf: 'http://vhx.tv/embed/megaplaya.swf',
width: '100%',
allowFullScreen: true,
allowScriptAccess: "always",
wmode: 'transparent',
height: '100%'
});
}
else {
load_videos();
}
$('#vhx_megaplaya').height($(window).height());
}
);
// Megaplaya calls this function when it's ready
var megaplaya = false;
function megaplaya_loaded()
{
megaplaya = $('#vhx_megaplaya').children()[0];
{block:IfHideVideoLetterbox}
megaplaya.api_disableLetterbox(1280, 720);
{/block:IfHideVideoLetterbox}
megaplaya.api_setColor(color);
megaplaya_addListeners();
load_videos();
redraw();
}
function redraw()
{
$('#info').width($(window).width() / 2 - 100);
$('.bar').height($('#info').outerHeight() + 10);
$('#vhx_megaplaya').css('top', $('.bar').outerHeight());
$('#vhx_megaplaya').height($(window).height() - $('.bar').outerHeight());
$('#vhx_megaplaya').width($(window).width());
}
function megaplaya_call(method)
{
// "pause" => megaplaya.api_pause();
(megaplaya["api_" + method])();
}
function megaplaya_addListeners()
{
var events = ['onVideoFinish', 'onVideoLoad', 'onError', 'onPause', 'onPlay', 'onFullscreen', 'onPlaybarShow', 'onPlaybarHide', 'onKeyboardDown'];
// Loop through and add in call the callback methods. Flash will automatically call megaplaya_callback
$.each(events, function(index, value) {
megaplaya.api_addListener(value, "function() { megaplaya_callback('" + value + "', arguments); }")
});
}
function megaplaya_callback(event_name, args)
{
switch (event_name) {
case 'onVideoLoad':
load_video_info();
// Load in more videos plz
if (megaplaya.api_getCurrentVideoIndex() > megaplaya.api_getQueue().length - 2) {
cur_page++;
load_videos(cur_page);
}
break;
}
}
function load_videos(page)
{
if (!page) {
page = 0;
}
var posts_per_page = 20;
var post_id = (/post\/([0-9]+)/).exec(location.href);
var url = "http://api.tumblr.com/v2/blog/" + username + ".tumblr.com/posts/video?api_key=zKa7HBvefLe0PcxMoojhQX4l0JcUSwa1sSAPGBvwh6VGVlxa3j&jsonp=load_videos_complete&limit=" + posts_per_page + "&offset=" + (page * posts_per_page);
if (post_id)
url += '&id=' + post_id[1];
$.ajax({
type: "GET",
url: url,
dataType: "jsonp"
});
}
var videos = [];
function load_videos_complete(obj) {
// For previewing the tumblr theme, load in some filler videos
if (username == "demo") {
obj.response.posts = [
{ permalink_url: 'http://vimeo.com/6045312', caption: 'Gorgeous visualization' },
{ permalink_url: 'http://www.youtube.com/watch?v=6yVhTyPaaLQ', caption: 'No paint brushes required.' },
{ permalink_url: 'http://vimeo.com/26906724' }
];
}
{block:IfShuffleVideos}
obj.response.posts = shuffle(obj.response.posts)
{/block:IfShuffleVideos}
var append_videos = videos.length > 0;
for (var i = 0; i < obj.response.posts.length; i++) {
videos.push({
url: obj.response.posts[i].permalink_url,
post: obj.response.posts[i]
});
}
if (!is_mobile) {
if (append_videos) {
var index = megaplaya.api_getCurrentVideoIndex();
megaplaya.api_loadQueue(videos);
megaplaya.api_setQueueAt(index);
}
else {
megaplaya.api_playQueue(videos);
}
}
else {
var video_urls = [];
for (i = 0; i < videos.length; i++)
video_urls.push(videos[i].url);
//console.log(video_urls, '<iframe src="http://vhx.tv/embed/megaplaya.html?videos=' + video_urls.join(',') + '" allowfullscreen frameborder="0" height="100%" width="100%" />');
load_video_info(videos[0]);
$('#vhx_megaplaya')[0].innerHTML = '<iframe src="http://vhx.tv/embed/megaplaya.html?videos=' + video_urls.join(',') + '" allowfullscreen frameborder="0" height="100%" width="100%" />';
load_video_info()
}
}
function load_video_info(vid)
{
var video = vid;
$("#info").hide();
if (!video && megaplaya)
video = megaplaya.api_getCurrentVideo();
var caption = video.post.caption.replace('<p>','').replace('</p>','');
// Todo: Use an html stripper
if (caption != "")
$('#video_caption')[0].innerHTML = caption;
else
$('#video_caption')[0].innerHTML = "";
$.ajax({
type: "GET",
url: "http://api.vhx.tv/videos/info.json?callback=test&url="+video.url,
dataType: "jsonp",
success: function(rsp) {
$('#info').fadeIn(300);
$('#video_title')[0].innerHTML = '<a href="' + video.post.post_url + '">' + rsp.video.title + '</a>';
if (video.post.note_count > 0) {
$('#note_count')[0].innerHTML = video.post.note_count + ' notes';
}
else {
$('#note_count')[0].innerHTML = '';
}
redraw();
}
});
try {
$('iframe')[0].src = "http://www.tumblr.com/dashboard/iframe?src=http%3A%2F%2F" + username + ".tumblr.com%2Fpost%2F" + video.post.id + "&name=" + username + "&pid=" + video.post.id + "&rk=" + video.post.reblog_key;
} catch(e) { }
redraw();
}
function shuffle(array) {
var tmp, current, top = array.length;
if(top) while(--top) {
current = Math.floor(Math.random() * (top + 1));
tmp = array[current];
array[current] = array[top];
array[top] = tmp;
}
return array;
}
</script>
<style>
body,html { margin: 0; padding: 0; background: #000; overflow: hidden; }
.bar {
padding: 5px;
text-align: center;
position: relative;
background: {Color:Background}; /* Old browsers */
background: {Color:Background}; /* Old browsers */
background: -moz-linear-gradient(top, {Color:Background} 0%, {Color:Background Fade} 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,{Color:Background}), color-stop(100%,{Color:Background Fade})); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, {Color:Background} 0%,{Color:Background Fade} 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, {Color:Background} 0%,{Color:Background Fade} 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, {Color:Background} 0%,{Color:Background Fade} 100%); /* IE10+ */
background: linear-gradient(top, {Color:Background} 0%,{Color:Background Fade} 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='{Color:Background}', endColorstr='{Color:Background Fade}',GradientType=0 ); /* IE6-9 */
min-height: 50px;
}
.bar .name { text-align: center; }
.bar .name a { font: bold 34px Helvetica, Arial; letter-spacing: -4px; color: {color:Title}; text-shadow:0px 0px 20px rgba(255, 255, 255, .3); -webkit-text-shadow: 0px 0px 20px rgba(255, 255, 255, .3); text-decoration: none; }
.bar #info { position: absolute; left: 20px; top: 10px;}
.bar #info .title { text-align: left; color: {Color:Text Alt}; font: normal 12px Helvetica, Arial; }
.bar #info .title #video_title a { font-weight: bold; color: {color:Title}; text-decoration: none; }
.bar #info .title #note_count { margin-left: 10px; font-style: italic; }
.bar #info #video_caption { color: {Color:Text}; padding: 0; margin: 0; padding: 0; margin: 0; text-align: left; color: {Color:Text}; font: normal 16px Helvetica, Arial; font-style: italic; max-width: 320px; }
.bar #info #video_caption a { color: {Color:Title}; text-decoration: none; }
#vhx_megaplaya { position: absolute; z-index: 2; }
.bar .right { position: absolute; right: 5px; top: 28px; }
.bar .right a { color: {color:Title}; font: normal 12px Helvetica, Arial; background: #000; padding: 3px 5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-decoration: none; }
/**/
</style>
</head>
<body>
<div class="bar">
<div id="info" style="display:none">
<div id="video_caption"></div>
<div class="title">You're watching <span id="video_title">Emotional landscapes</span><span id="note_count"></span></div>
</div>
<div class="name"><a href="/">{Title}</a></div>
{block:IfShowCredits}
<div class="right">
<a href="http://blog.vhx.tv/post/12562051017/hey-tumblr-users-do-you-run-a-video-only-blog-we" target="_blank">Theme by <b>VHX</b></a>
</div>
{/block:IfShowCredits}
</div>
<div id="vhx_megaplaya">Loading...</div>
</body>
</html>