Permalink
Browse files

Added new 'image.json' API.

  • Loading branch information...
marcomontalbano committed Sep 14, 2018
1 parent 502319e commit babd30ccbc3586789045ec19ac81fb84c91de60a
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
@@ -39,7 +39,11 @@ <h1 class="title"><a href="/">Video to <strong>markdown</strong>!</a></h1>
<div class="row site-app">
<section class="site-app--input">
<form>
<label>Video Url *<input class="width-100 input" type="url" name="url" placeholder="https://youtu.be/aqz-KE-bpKQ" required="required" /></label>
<label>
Video Url *
<input class="width-100 input" type="url" name="url" placeholder="https://youtu.be/aqz-KE-bpKQ" required="required" />
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" />
</label>
<label>Title<input class="width-100 input" type="text" name="title" /></label>
<div class="buttons">
<button class="button">convert to markdown</button>
@@ -93,12 +97,31 @@ <h2>Features</h2>
<section>
<h2>API</h2>
<pre class="language"><code class="language"><span class="token punctuation"><span class="method">[GET]</span> <span class="url">https://video-to-markdown.netlify.com/.netlify/functions/image</span>?<span class="param-name">url</span>=<span class="param-value">{video-url}</span></span></code></pre>
<p><code>output</code>:&nbsp;&nbsp;&nbsp;<i class="far fa-image"></i> <small>image</small></p>
<p>
The <code>image</code> API accept only one <code><b class="param-name">url</b></code> parameter.<br />
The value <code><b class="param-value">{video-url}</b></code> is a video url <small>(e.g. <a href="https://youtu.be/aqz-KE-bpKQ" rel="nofollow" target="_blank">https://youtu.be/aqz-KE-bpKQ</a>)</small>
</p>
<section>
<pre class="language"><code class="language"><span class="token punctuation"><span class="method">[GET]</span> <span class="url">https://video-to-markdown.netlify.com/.netlify/functions/<b>image.json</b></span>?<span class="param-name">url</span>=<span class="param-value">{video-url}</span></span></code></pre>
<p>
<pre class="language-javascript"><code>{
"provider": "youtube",
"url": "https://youtu.be/aqz-KE-bpKQ",
"mime": "image/jpeg",
"base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAlgCWAAD/2wBDAAYEBQYFBA..."
}</code></pre>
</p>
<p>
The <code>image.json</code> API accept only one <code><b class="param-name">url</b></code> parameter.<br />
The value <code><b class="param-value">{video-url}</b></code> is a video url <small>(e.g. <a href="https://youtu.be/aqz-KE-bpKQ" rel="nofollow" target="_blank">https://youtu.be/aqz-KE-bpKQ</a>)</small>
</p>
</section>
<section>
<pre class="language"><code class="language"><span class="token punctuation"><span class="method">[GET]</span> <span class="url">https://video-to-markdown.netlify.com/.netlify/functions/<b>image</b></span>?<span class="param-name">url</span>=<span class="param-value">{video-url}</span></span></code></pre>
<p><code>output</code>:&nbsp;&nbsp;&nbsp;<i class="far fa-image"></i>&nbsp;&nbsp;<small>image</small></p>
<p>
The <code>image</code> API accept only one <code><b class="param-name">url</b></code> parameter.<br />
The value <code><b class="param-value">{video-url}</b></code> is a video url <small>(e.g. <a href="https://youtu.be/aqz-KE-bpKQ" rel="nofollow" target="_blank">https://youtu.be/aqz-KE-bpKQ</a>)</small>
</p>
</section>
</section>
<footer>
View
@@ -6,6 +6,13 @@ import ClipboardJS from 'clipboard';
import imageNotFound from './images/not-found.jpg';
import imageLoading from './images/loading.jpg';
const videoIcons = {
dailymotion: require('./images/providers/dailymotion.png'),
facebook: require('./images/providers/facebook.png'),
vimeo: require('./images/providers/vimeo.png'),
youtube: require('./images/providers/youtube.png'),
};
NProgress.configure({
parent: '.preview',
showSpinner: false
@@ -48,7 +55,9 @@ $('form').on('submit', function(e) {
const title = $form.find('[name="title"]').val();
const videoUrl = $form.find('[name="url"]').val();
const imageUrl = `${location.protocol}//${location.host}/.netlify/functions/image?url=${videoUrl}`;
const lambdaUrl = `${location.protocol}//${location.host}/.netlify/functions`;
const jsonUrl = `${lambdaUrl}/image.json?url=${videoUrl}`;
const imageUrl = `${lambdaUrl}/image?url=${videoUrl}`;
if (videoUrl_memo === videoUrl) {
updateMarkdown(title, imageUrl, videoUrl);
@@ -58,17 +67,26 @@ $('form').on('submit', function(e) {
videoUrl_memo = videoUrl;
$form.find('[name="url"] ~ img').attr('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
$('.preview img').attr('src', imageLoading);
updateMarkdown();
loadImage(imageUrl, () => {
NProgress.done();
$('.preview img').attr('src', imageUrl);
updateMarkdown(title, imageUrl, videoUrl);
}, () => {
$.getJSON({
url: jsonUrl
})
.done((data) => {
loadImage(data.base64, () => {
NProgress.done();
$form.find('[name="url"] ~ img').attr('src', videoIcons[data.provider]);
$('.preview img').attr('src', data.base64);
updateMarkdown(title, imageUrl, videoUrl);
});
})
.fail(() => {
loadImage(imageNotFound, () => {
NProgress.done();
videoUrl_memo = imageNotFound;
$form.find('[name="url"] ~ img').attr('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
$('.preview img').attr('src', imageNotFound);
updateMarkdown();
});
View
@@ -0,0 +1,53 @@
import fileType from 'file-type';
import VideoWrapper from './classes/VideoWrapper';
const isDevelopment = process.env.NODE_ENV === 'development';
const throwException = (statusCode, message, callback) => {
callback = callback || (() => {});
const error = {
statusCode: statusCode,
body: JSON.stringify({
errors: [
{
message: message
}
]
})
};
callback(null, error);
return error;
};
exports.handler = (event, context, callback) => {
const url = event.queryStringParameters.url;
const video = VideoWrapper.create(url);
if (url === undefined) {
return throwException(422, 'param URL is mandatory.', callback);
}
video.log('GET', url);
video
.getThumbnail_asBuffer()
.then(buffer => {
callback(null, {
statusCode: 200,
body: JSON.stringify({
provider: video.providerName,
url: video.url,
mime: fileType(buffer).mime,
base64: `data:${fileType(buffer).mime};base64,${buffer.toString('base64')}`,
}),
});
})
.catch(error => {
callback(null, {
statusCode: 422,
body: JSON.stringify({ error })
});
});
};
View
@@ -48,6 +48,7 @@ form {
transform: translateY(-50%);
label {
position: relative;
color: $color-white;
font-weight: bold;
display: block;
@@ -59,6 +60,21 @@ form {
color: initial;
width: 100%;
margin: 0 0 15px;
height: 40px;
&[name="url"] {
padding-right: 40px;
~ img {
position: absolute;
bottom: 15px;
right: 0px;
width: 40px;
height: 40px;
padding: 9px;
border-left: 1px solid $header-background-color;
}
}
}
}
}
@@ -87,12 +103,18 @@ form {
}
.details {
section {
> section {
padding-bottom: 3em;
padding-top: 2em;
border-top: 1px solid #dcdcdc;
&:first-child {
border-top: none;
}
> section {
border-bottom: 2px solid #ededed;
margin-top: 2em;
padding: 0 .5em;
}
}
}

0 comments on commit babd30c

Please sign in to comment.