mobeigi
/
filebot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

* simplify and unify getting started pages & js

This commit is contained in:
Reinhard Pointner 2015-06-05 16:52:57 +00:00
parent 9745647987
commit 5f3289a7f6
5 changed files with 176 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
website/getting-started/embed.html
View File

@ -1,58 +1,13 @@
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="galleria/galleria-1.4.2.min.js"></script>
<script src="galleria/themes/classic/galleria.classic.min.js"></script>
<script src="index.js"></script>
<link rel="stylesheet" href="galleria/themes/classic/galleria.classic.css">
<style>
body{ margin: 0; padding: 0; background: #000; }
div.galleria{ width: 100%; height: 100%; background: #000; position: absolute; top: 0; bottom: 0; }
div.galleria-thumbnails { margin: auto; }
div.galleria-thumbnails-list div.galleria-image { max-height: 20px; }
</style>
<title>Getting Started</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<body onload="runGalleria()">
<div class="galleria"></div>
<script>
var data = [
{ link: 'https://www.youtube.com/watch?v=RRq2_Pjyko8&index=1&list=PLdPvEJhzxLMCEJJpb1mJtVkOpS7FfALnd', image: 'images/rename.png', thumb: 'images/rename.thumb.png' },
{ link: 'https://www.youtube.com/watch?v=btNSv7AnMMw&index=2&list=PLdPvEJhzxLMCEJJpb1mJtVkOpS7FfALnd', image: 'images/episodes.png', thumb: 'images/episodes.thumb.png' },
{ link: 'https://www.youtube.com/watch?v=q-oZ_hovsTY&index=3&list=PLdPvEJhzxLMCEJJpb1mJtVkOpS7FfALnd', image: 'images/subtitle-hash-lookup.png', thumb: 'images/subtitle-hash-lookup.thumb.png' },
{ link: 'https://www.youtube.com/watch?v=R80tKtHf4zw&index=4&list=PLdPvEJhzxLMCEJJpb1mJtVkOpS7FfALnd', image: 'images/subtitle-search.png', thumb: 'images/subtitle-search.thumb.png' },
{ link: 'https://www.youtube.com/watch?v=4KWkSPr3fQY&index=5&list=PLdPvEJhzxLMCEJJpb1mJtVkOpS7FfALnd', image: 'images/sfv.png', thumb: 'images/sfv.thumb.png' }
];
if (location.hash == '#mas') {
data.splice(1, 0, { image: 'images/permissions.png', thumb: 'images/permissions.thumb.png' }) // sandbox permissions
} else if (location.hash == '#usc') {
data[0].link = 'https://www.youtube.com/watch?v=sEFP3CsntNs&index=6&list=PLdPvEJhzxLMCEJJpb1mJtVkOpS7FfALnd' // ubuntu video
}
Galleria.run('.galleria', {
popupLinks: true,
dataSource: data,
maxScaleRatio: 1,
youtube: {
VQ: 'HD1080'
},
thumbnails: 'lazy'
});
var loaded = true
Galleria.ready(function() {
this.bind("image", function(e) {
if (loaded) {
loaded = false
this.lazyLoadChunks( data.length )
}
});
this.attachKeyboard({
left: this.prev,
right: this.next
});
});
</script>
</body>
</html>

33
website/getting-started/fullscreen.js
View File

@ -1,33 +0,0 @@
function isFullScreen() {
return (document.fullScreenElement && document.fullScreenElement !== null) || document.mozFullScreen || document.webkitIsFullScreen;
}
function requestFullScreen(element) {
if (element.requestFullscreen)
element.requestFullscreen();
else if (element.msRequestFullscreen)
element.msRequestFullscreen();
else if (element.mozRequestFullScreen)
element.mozRequestFullScreen();
else if (element.webkitRequestFullscreen)
element.webkitRequestFullscreen();
}
function exitFullScreen() {
if (document.exitFullscreen)
document.exitFullscreen();
else if (document.msExitFullscreen)
document.msExitFullscreen();
else if (document.mozCancelFullScreen)
document.mozCancelFullScreen();
else if (document.webkitExitFullscreen)
document.webkitExitFullscreen();
}
function toggleFullScreen(element) {
if (isFullScreen())
exitFullScreen();
else
requestFullScreen(element || document.documentElement);
}

31
website/getting-started/index.css Normal file
View File

@ -0,0 +1,31 @@
body {
margin: 0;
padding: 0;
background: #000;
}
div.galleria {
width: 100%;
height: 100%;
background: #000;
position: absolute;
top: 0;
bottom: 0;
}
div.galleria-thumbnails {
margin: auto;
}
div.galleria-thumbnails-list div.galleria-image {
max-height: 20px;
}
img.fullscreen {
position: absolute;
top: 5px;
right: 5px;
z-index: 10;
cursor: pointer;
opacity: 0.3
}

52
website/getting-started/index.html
View File

@ -1,61 +1,15 @@
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="galleria/galleria-1.4.2.min.js"></script>
<script src="galleria/themes/classic/galleria.classic.min.js"></script>
<script src="fullscreen.js"></script>
<script src="index.js"></script>
<link rel="stylesheet" href="galleria/themes/classic/galleria.classic.css">
<style>
body{ margin: 0; padding: 0; background: #000; }
div.galleria{ width: 100%; height: 100%; background: #000; position: absolute; top: 0; bottom: 0; }
div.galleria-thumbnails { margin: auto; }
div.galleria-thumbnails-list div.galleria-image { max-height: 20px; }
img.fullscreen { position: absolute; top: 5px; right: 5px; z-index: 10; cursor: pointer; opacity: 0.3 }
</style>
<link rel="stylesheet" href="index.css">
<title>Getting Started</title>
</head>
<body>
<body onload="runGalleria()">
<img class="fullscreen" src="fullscreen.png" width="16" height="16" onclick="toggleFullScreen()" />
<div class="galleria"></div>
<script>
var data = [
{ iframe: 'videos/rename.mp4', image: 'images/rename.png', thumb: 'images/rename.thumb.png' },
{ iframe: 'videos/episodes.mp4', image: 'images/episodes.png', thumb: 'images/episodes.thumb.png' },
{ iframe: 'videos/subtitle-lookup.mp4', image: 'images/subtitle-hash-lookup.png', thumb: 'images/subtitle-hash-lookup.thumb.png' },
{ iframe: 'videos/subtitle-search.mp4', image: 'images/subtitle-search.png', thumb: 'images/subtitle-search.thumb.png' },
{ iframe: 'videos/sfv.mp4', image: 'images/sfv.png', thumb: 'images/sfv.thumb.png' },
{ image: 'images/rename.screenshot.png', thumb: 'images/rename.screenshot.thumb.png' },
{ image: 'images/format.screenshot.png', thumb: 'images/format.screenshot.thumb.png' },
{ image: 'images/subtitle-hash-lookup.screenshot.png', thumb: 'images/subtitle-hash-lookup.screenshot.thumb.png' },
{ image: 'images/subtitle-search.screenshot.png', thumb: 'images/subtitle-search.screenshot.thumb.png' },
{ image: 'images/sfv.screenshot.png', thumb: 'images/sfv.screenshot.thumb.png' },
{ image: 'images/cli.screenshot.png', thumb: 'images/cli.screenshot.thumb.png' },
{ image: 'images/node.screenshot.png', thumb: 'images/node.screenshot.thumb.png' }
];
Galleria.run('.galleria', {
dataSource: data,
maxScaleRatio: 1,
youtube: {
VQ: 'HD1080'
},
thumbnails: 'lazy'
});
var loaded = true
Galleria.ready(function() {
this.bind("image", function(e) {
if (loaded) {
loaded = false
this.lazyLoadChunks( data.length )
}
});
this.attachKeyboard({
left: this.prev,
right: this.next
});
});
</script>
</body>
</html>

139
website/getting-started/index.js Normal file
View File

@ -0,0 +1,139 @@
function getData() {
var data = [{
link: 'https://www.youtube.com/watch?v=RRq2_Pjyko8&index=1&list=PLdPvEJhzxLMCEJJpb1mJtVkOpS7FfALnd',
video: 'http://app.filebot.net/getting-started/videos/rename.mp4',
image: 'images/rename.png',
thumb: 'images/rename.thumb.png'
}, {
link: 'https://www.youtube.com/watch?v=btNSv7AnMMw&index=2&list=PLdPvEJhzxLMCEJJpb1mJtVkOpS7FfALnd',
video: 'http://app.filebot.net/getting-started/videos/episodes.mp4',
image: 'images/episodes.png',
thumb: 'images/episodes.thumb.png'
}, {
link: 'https://www.youtube.com/watch?v=q-oZ_hovsTY&index=3&list=PLdPvEJhzxLMCEJJpb1mJtVkOpS7FfALnd',
video: 'http://app.filebot.net/getting-started/videos/subtitle-lookup.mp4',
image: 'images/subtitle-hash-lookup.png',
thumb: 'images/subtitle-hash-lookup.thumb.png'
}, {
link: 'https://www.youtube.com/watch?v=R80tKtHf4zw&index=4&list=PLdPvEJhzxLMCEJJpb1mJtVkOpS7FfALnd',
video: 'http://app.filebot.net/getting-started/videos/subtitle-search.mp4',
image: 'images/subtitle-search.png',
thumb: 'images/subtitle-search.thumb.png'
}, {
link: 'https://www.youtube.com/watch?v=4KWkSPr3fQY&index=5&list=PLdPvEJhzxLMCEJJpb1mJtVkOpS7FfALnd',
video: 'http://app.filebot.net/getting-started/videos/sfv.mp4',
image: 'images/sfv.png',
thumb: 'images/sfv.thumb.png'
}, {
image: 'images/rename.screenshot.png',
thumb: 'images/rename.screenshot.thumb.png'
}, {
image: 'images/format.screenshot.png',
thumb: 'images/format.screenshot.thumb.png'
}, {
image: 'images/subtitle-hash-lookup.screenshot.png',
thumb: 'images/subtitle-hash-lookup.screenshot.thumb.png'
}, {
image: 'images/subtitle-search.screenshot.png',
thumb: 'images/subtitle-search.screenshot.thumb.png'
}, {
image: 'images/sfv.screenshot.png',
thumb: 'images/sfv.screenshot.thumb.png'
}, {
image: 'images/cli.screenshot.png',
thumb: 'images/cli.screenshot.thumb.png'
}, {
image: 'images/node.screenshot.png',
thumb: 'images/node.screenshot.thumb.png'
}]
var links = location.hash.length > 0
var youtube = navigator.language != 'zh-cn' // YouTube is blocked in China (mainland)
if (links) {
data = data.slice(0, 5) // use only tutorial images
if (location.hash == '#mas') {
data.splice(1, 0, {
image: 'images/permissions.png',
thumb: 'images/permissions.thumb.png'
}) // sandbox permissions
} else if (location.hash == '#usc') {
data[0].link = 'https://www.youtube.com/watch?v=sEFP3CsntNs&index=6&list=PLdPvEJhzxLMCEJJpb1mJtVkOpS7FfALnd' // ubuntu video
}
}
if (!links) {
data.forEach(function(it) {
it.video = it[youtube ? 'link' : 'video']
})
}
if (!youtube) {
data.forEach(function(it) {
it[links ? 'link' : 'iframe'] = it.video
delete it.video
})
}
return data
}
function runGalleria() {
var data = getData()
Galleria.run('.galleria', {
dataSource: data,
popupLinks: true,
maxScaleRatio: 1,
youtube: {
VQ: 'HD1080'
},
thumbnails: 'lazy'
})
Galleria.ready(function() {
this.bind("image", function(e) {
if (this.doLazyLoadChunks !== false) {
this.doLazyLoadChunks = false
this.lazyLoadChunks(data.length)
}
})
this.attachKeyboard({
left: this.prev,
right: this.next
})
})
}
function isFullScreen() {
return (document.fullScreenElement && document.fullScreenElement !== null) || document.mozFullScreen || document.webkitIsFullScreen
}
function requestFullScreen(element) {
if (element.requestFullscreen)
element.requestFullscreen()
else if (element.msRequestFullscreen)
element.msRequestFullscreen()
else if (element.mozRequestFullScreen)
element.mozRequestFullScreen()
else if (element.webkitRequestFullscreen)
element.webkitRequestFullscreen()
}
function exitFullScreen() {
if (document.exitFullscreen)
document.exitFullscreen()
else if (document.msExitFullscreen)
document.msExitFullscreen()
else if (document.mozCancelFullScreen)
document.mozCancelFullScreen()
else if (document.webkitExitFullscreen)
document.webkitExitFullscreen()
}
function toggleFullScreen(element) {
if (isFullScreen())
exitFullScreen()
else
requestFullScreen(element || document.documentElement)
}