Skip to content

Commit

Permalink
updating terminal demo and theming site
Browse files Browse the repository at this point in the history
  • Loading branch information
@bgrins
bgrins committed Nov 14, 2013
1 parent 66f8785 commit 15d8140
Show file tree
Hide file tree
Showing 5 changed files with 221 additions and 28 deletions.
63 changes: 54 additions & 9 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,31 @@
<link rel="shortcut icon" href="../site/favicon.ico">
<link href="../site/site.css" rel="stylesheet">
<style type="text/css">
#terminal {
background: #ddd;
border: solid 1px;
padding: 10px;
margin-bottom: 10px;
}
#input {
width: 500px;
width: 80%;
}
#run {

width: 15%
}
#output {
white-space: pre-wrap;
word-break: break-all;
}
#output.closed {
max-height: 200px;
overflow-y: scroll;
}
#files {
text-align: center;
}
#files img {
max-width: 80%;
}
</style>
</head>
Expand All @@ -21,26 +41,51 @@
<div class="container-fluid">
<div class='content'>
<div class='inner-content'>
<div class="clearfix">
<div class="header clearfix">
<div class="pull-left">
<H1><a href='../'><img src='../site/logo.png' width="30" /><span>videoconverter.js</span></a>
</H1>
</div>
<div class="pull-right"><a href='http://github.com/bgrins/videoconverter.js'>source code on github</a></div>
<div class="pull-right links">
<a href='/demo'>demo</a>
<a href='http://github.com/bgrins/videoconverter.js'>source code on github</a>
</div>
</div>

<div class="clearfix">
<h2>Terminal Demo</h2>
<p>
Imagine that you have installed FFmpeg on your computer. Also imagine that you have files called input.webm and input.jpeg in the current directory. Feel free to run whatever commands you want.
Imagine that you have installed FFmpeg on your computer. Also imagine that you have files called <code>input.webm</code> and <code>input.jpeg</code> in the current directory. Feel free to run whatever commands you want.
</p>

<p>
Try these sample commands: <a href="#" class="sample">-i input.jpeg -vf vflip output.jpeg</a>
Try these sample commands:

<button class="sample" data-command="-help">Help</button>

<button class="sample" data-command="-codecs">List Codecs</button>

<button class="sample" data-command="-i input.jpeg -vf vflip output.jpeg">Vertical Flip Image</button>

<button class="sample" data-command="-i input.jpeg -vf hflip output.jpeg">Horizontal Flip Image</button>

<button class="sample" data-command="-i input.webm -vf showinfo -strict -2 output.mp4">Convert Video to .mp4</button>

<button class="sample" data-command="-t 5 -i input.webm -vf showinfo -strict -2 output.gif">Convert Video to .gif</button>

<button class="sample" data-command="-i input.webm -s 100x100 -f image2 -vf fps=fps=1,showinfo -an out%d.jpeg">Convert Video to screenshots</button>


</p>
<input id="input" value="-help" />
<button id="run">Run Command</button>
<pre id="output"></pre>
<div id="terminal">
<input id="input" value="-help" />
<button id="run">Run Command</button>
<img id="image-loader" src="../site/load.gif" />
<pre id="output"></pre>
</div>
<div id="files">

</div>
</div>
</div>
</div>
Expand Down
35 changes: 25 additions & 10 deletions demo/terminal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,26 @@ var worker;
var sampleImageData;
var sampleVideoData;
var outputElement;
var filesElement;
var running = false;
var isWorkerLoaded = false;
var isSupported = (function() {
return document.querySelector && window.URL && window.Worker;
})();

function isReady() {
return isWorkerLoaded && sampleImageData && sampleVideoData;
return !running && isWorkerLoaded && sampleImageData && sampleVideoData;
}

function showLoader() {

function startRunning() {
document.querySelector("#image-loader").style.visibility = "visible";
outputElement.className = "";
filesElement.innerHTML = "";
running = true;
}
function stopRunning() {
document.querySelector("#image-loader").style.visibility = "hidden";
running = false;
}

function retrieveSampleImage() {
Expand Down Expand Up @@ -49,6 +58,7 @@ function retrieveSampleVideo() {

function runCommand(text) {
if (isReady()) {
startRunning();
var args = text.split(" ");
worker.postMessage({
type: "command",
Expand All @@ -68,7 +78,7 @@ function runCommand(text) {
}

function getDownloadLink(fileData, fileName) {
if (fileName.indexOf(".jpeg") > -1) {
if (fileName.match(/\.jpeg|\.gif|\.jpg|\.png/)) {
var blob = new Blob([fileData]);
var src = window.URL.createObjectURL(blob);
var img = document.createElement('img');
Expand All @@ -93,17 +103,22 @@ function initWorker() {
var message = event.data;
if (message.type == "ready") {
isWorkerLoaded = true;
worker.postMessage({
type: "command",
arguments: ["-help"]
});
} else if (message.type == "stdout") {
outputElement.textContent += message.data + "\r\n";
} else if (message.type == "start") {
outputElement.textContent = "Worker has received command\r\n";
showLoader();
} else if (message.type == "done") {
stopRunning();
var buffers = message.data;
console.log(buffers);
if (buffers.length) {
outputElement.className = "closed";
}
buffers.forEach(function(file) {
console.log(file);
document.body.appendChild(getDownloadLink(file.data, file.name));
filesElement.appendChild(getDownloadLink(file.data, file.name));
});
} else if (message.type == "ready") {
workerReady();
Expand All @@ -119,9 +134,9 @@ document.addEventListener("DOMContentLoaded", function() {

var inputElement = document.querySelector("#input");
outputElement = document.querySelector("#output");
filesElement = document.querySelector("#files");

inputElement.addEventListener("keydown", function(e) {
console.log(e, e.keyCode);
if (e.keyCode === 13) {
runCommand(inputElement.value);
}
Expand All @@ -132,7 +147,7 @@ document.addEventListener("DOMContentLoaded", function() {

[].forEach.call(document.querySelectorAll(".sample"), function(link) {
link.addEventListener("click", function(e) {
inputElement.value = this.textContent;
inputElement.value = this.getAttribute("data-command");
runCommand(inputElement.value);
e.preventDefault();
});
Expand Down
40 changes: 33 additions & 7 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,40 +13,66 @@
<div class="container-fluid">
<div class='content'>
<div class='inner-content'>
<div class="clearfix">
<div class="header clearfix">
<div class="pull-left">
<H1><a href='./'><img src='site/logo.png' width="30" /><span>videoconverter.js</span></a>
</H1>
</div>
<div class="pull-right"><a href='http://github.com/bgrins/videoconverter.js'>source code on github</a></div>
<div class="pull-right links">
<a href='demo/'>demo</a>
<a href='http://github.com/bgrins/videoconverter.js'>source code on github</a>
</div>
</div>

<div class="clearfix">
<p>
<p class="tagline">
videoconverter.js is a program that lets you <strong>process videos in your browser</strong>.
</p>
<p>
<hr />
<center>
<button>View a Demo</button>
<a class="big" href="demo/">View a Demonstration</a>
<a class="big" href="http://devcomo.2013.nodeknockout.com">View a Sample Application</a>
</center>
<hr />
</p>
<h2>About</h2>
<p>
It was originally conceived and implemented for Node Knockout 2013 for the application <a href="http://2013.nodeknockout.com/teams/devcomo">Video Funhouse</a>.
The project was originally conceived and implemented for a project in Node Knockout 2013 called <a href="http://2013.nodeknockout.com/teams/devcomo">Video Funhouse</a>.
</p>
<p>
The idea for the application was to try and convert any video file into another video format, while allowing filters to be applied to the video – <strong>all inside of the browser, without uploading anything</strong>.
The idea for the application was to try and convert any video file into another video format, while allowing filters to be applied to the video – <strong>all inside of the browser, without uploading anything</strong>. And to build it in a single weekend.
</p>
<p>
This is a gargantuan task, and we knew that existing libraries like FFmpeg would do a great job. But, FFmpeg is not written in JavaScript. Luckily, there is a project called <a href="https://github.com/kripken/emscripten">Emscripten</a>, which is an LLVM to JavaScript compiler, so we were able to compile FFmpeg into JavaScript.
</p>

<p>
Watch a video demonstrating the application we made with this library over the weekend:
Watch a video demonstrating the sample application we made with this library over the weekend:
</p>
<center>
<iframe src="//www.youtube.com/embed/TR_RGeRBroI" allowfullscreen="" frameborder="0" height="315" width="560"></iframe>
</center>
<!--
<h2 id="why">Why Would You Compile FFmpeg Into JavaScript?</h2>
<p>
</p>
<h2 id="how">How Do You Compile FFmpeg Into JavaScript?</h2>
<p>
</p>
<h2 id="uses">Potential Uses</h2>
<p>
</p>
<h2 id="docs">Documentation</h2>
<p>
</p>
-->
</div>
</div>
</div>
Expand Down
Binary file added site/light_toast.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
111 changes: 109 additions & 2 deletions site/site.css
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,124 @@

html { height: 100%; }
html, body { padding: 0; margin: 0; }
body { position: relative;}
body {
min-height: 100%;
background: #eee url(light_toast.png);
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
line-height: 1.5;
font-weight: 300;
color: #4D4D4D;
}
.container-fluid {
width: 90%;
margin: 0 auto;
height: 100%;
min-height: 100%;
font-size: 14px;
background: rgba(255, 255, 255, .8); padding: 0 10px;
}
p {
font-size: 16px;
}
.header { margin: 0 -5.6%; padding: 5px 5.6%;

background-image: -webkit-repeating-linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,.5) 1px, rgba(255,255,255,.95) 2px, rgba(255,255,255,.95) 2px, rgba(255,255,255,.5) 3px);
background-image: -moz-repeating-linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,.5) 1px, rgba(255,255,255,.95) 2px, rgba(255,255,255,.95) 2px, rgba(255,255,255,.5) 3px);
background-image: -o-repeating-linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,.5) 1px, rgba(255,255,255,.95) 2px, rgba(255,255,255,.95) 2px, rgba(255,255,255,.5) 3px);
background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,.5) 1px, rgba(255,255,255,.95) 2px, rgba(255,255,255,.95) 2px, rgba(255,255,255,.5) 3px);
-webkit-background-size: 4px 4px;
-moz-background-size: 4px 4px;
background-size: 4px 4px;

}
h2 {
text-transform: uppercase;
margin: 5px 0;
font-size: 24px;
font-weight: lighter;
}
h1 {
margin: 0;
padding: 0;
font-size: 32px;
line-height: 32px;
font-weight: 300;
}

h1 a, h1 a:visited {
color: #333;
text-decoration: none;
}
h1 a:hover {
text-decoration: underline;
}
h1 span {
vertical-align: top;
margin-left: 3px;
margin-left: 5px;
}

code {
color: #33e;
background: #fff;
font-family: inherit;
}

.tagline {
font-size: 24px;
}
a.big {
-moz-box-shadow:inset 0px 1px 0px 0px #9acc85;
-webkit-box-shadow:inset 0px 1px 0px 0px #9acc85;
box-shadow:inset 0px 1px 0px 0px #9acc85;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #74ad5a), color-stop(1, #68a54b));
background:-moz-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
background:-webkit-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
background:-o-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
background:-ms-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
background:linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#74ad5a', endColorstr='#68a54b',GradientType=0);
background-color:#74ad5a;
border:1px solid #3b6e22;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:20px;
padding: 8px 12px;
text-decoration:none;
}
a.big:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #68a54b), color-stop(1, #74ad5a));
background:-moz-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
background:-webkit-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
background:-o-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
background:-ms-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
background:linear-gradient(to bottom, #68a54b 5%, #74ad5a 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#68a54b', endColorstr='#74ad5a',GradientType=0);
background-color:#68a54b;
}
a.big:active {
position:relative;
top:1px;
}


.links a {
background: #333;
color: #fff;
padding: 10px;
padding-top: 12px;
text-decoration: none;
transition: top linear .05s;
position: relative;
top: -2px;
}

.links a:hover {
padding-top: 10px;
top: 0;
}
.links a:visited {
color: #ddd;
}

.pull-left { float: left; }
Expand Down

0 comments on commit 15d8140

Please sign in to comment.