Skip to content
Permalink
Browse files

Remove api section. Update markdown.

  • Loading branch information...
marcomontalbano committed Sep 20, 2019
1 parent ec7b3e5 commit aa75384cd2454133f05acc453333c5d6e2fa8120
Showing with 61 additions and 37 deletions.
  1. +2 −2 src/index.html
  2. +43 −26 src/index.js
  3. +11 −5 src/lambda/classes/VideoProvider.js
  4. +3 −2 src/lambda/image-json.js
  5. +2 −2 src/lambda/image.js
@@ -143,7 +143,7 @@ <h2>Functions</h2>
</section>
</section>

<section>
<!-- <section>
<h2>API</h2>
<section class="bordered">
@@ -170,7 +170,7 @@ <h2>API</h2>
The value <code><b class="param-value">{video-url}</b></code> is a video url <small>(e.g. <a rel="noopener noreferrer" href="https://youtu.be/aqz-KE-bpKQ" rel="nofollow" target="_blank">https://youtu.be/aqz-KE-bpKQ</a>)</small>
</p>
</section>
</section>
</section> -->

<footer>
<a rel="noopener noreferrer" href="https://marcomontalbano.com" target="_blank">Marco Montalbano</a>
@@ -36,18 +36,31 @@ const loadImage = (src, success = () => { }, error = () => { }) => {
img.src = src;
};

const updateMarkdown = (title, imageUrl, videoUrl) => {
const markdown =
title === undefined ? '&nbsp;' :
`<span class="token punctuation">[![<span class="token attr-value">${title}</span>](<span class="token attr-value">${imageUrl}</span>)](<span class="token attr-value">${videoUrl}</span> "<span class="token attr-value">${title}</span>")</span>`
;

const markdownElement = document.querySelector('.markdown');
const markdownCodeElement = markdownElement.querySelector('code');
markdownCodeElement.innerHTML = markdown;
markdownElement.classList.toggle('hint--top', title !== undefined);
markdownElement.setAttribute('data-clipboard-text', markdownCodeElement.textContent);
};
const updateMarkdown = (() => {
let imageUrl_memo, videoUrl_memo;

return (title, imageUrl = imageUrl_memo, videoUrl = videoUrl_memo) => {

if (title === undefined) {
imageUrl_memo = undefined;
videoUrl_memo = undefined;
}

imageUrl_memo = imageUrl ? imageUrl : imageUrl_memo;
videoUrl_memo = videoUrl ? videoUrl : videoUrl_memo;

const markdown =
title === undefined ? '&nbsp;' :
`<span class="token punctuation">[![<span class="token attr-value">${title}</span>](<span class="token attr-value">${imageUrl}</span>)](<span class="token attr-value">${videoUrl}</span> "<span class="token attr-value">${title}</span>")</span>`
;

const markdownElement = document.querySelector('.markdown');
const markdownCodeElement = markdownElement.querySelector('code');
markdownCodeElement.innerHTML = markdown;
markdownElement.classList.toggle('hint--top', title !== undefined);
markdownElement.setAttribute('data-clipboard-text', markdownCodeElement.textContent);
};
})();

loadImage(imageLoading);
loadImage(imageNotFound);
@@ -93,6 +106,15 @@ document.querySelectorAll('a').forEach(function (a) {
});
})

const loadErrorImage = (formElement) => {
loadImage(imageNotFound, () => {
NProgress.done();
formElement.querySelector('[name="url"] ~ img').setAttribute('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
document.querySelector('.preview img').setAttribute('src', imageNotFound);
updateMarkdown();
});
}

document.querySelector('form').addEventListener('submit', function (e) {
e.preventDefault();

@@ -107,11 +129,9 @@ document.querySelector('form').addEventListener('submit', function (e) {

const title = formElement.querySelector('[name="title"]').value;
const videoUrl = formElement.querySelector('[name="url"]').value;
const jsonUrl = `${lambdaUrl}/image-json?url=${encodeURIComponent(videoUrl)}`;
const imageUrl = `${lambdaUrl}/image?url=${encodeURIComponent(videoUrl)}`;

if (videoUrl_memo === videoUrl) {
updateMarkdown(title, imageUrl, videoUrl);
updateMarkdown(title);
NProgress.done();
return false;
}
@@ -122,23 +142,20 @@ document.querySelector('form').addEventListener('submit', function (e) {
document.querySelector('.preview img').setAttribute('src', imageLoading);
updateMarkdown();

fetch(jsonUrl).then(r => r.json())
fetch(`${lambdaUrl}/image-json?url=${encodeURIComponent(videoUrl)}`).then(r => r.json())
.then(data => {
if (data.error) {
return loadErrorImage(formElement);
}

loadImage(data.base64, () => {
NProgress.done();
formElement.querySelector('[name="url"] ~ img').setAttribute('src', videoIcons[data.provider]);
document.querySelector('.preview img').setAttribute('src', data.base64);
updateMarkdown(title, imageUrl, videoUrl);
updateMarkdown(title, data.image, videoUrl);
});
})
.catch(() => {
loadImage(imageNotFound, () => {
NProgress.done();
videoUrl_memo = imageNotFound;
formElement.querySelector('[name="url"] ~ img').setAttribute('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
document.querySelector('.preview img').setAttribute('src', imageNotFound);
updateMarkdown();
});
})
;
loadErrorImage(formElement);
});
});
@@ -39,19 +39,25 @@ export default class VideoProvider {
}

getThumbnail_asImgbbUrl() {
return this.getThumbnail_asCloudinaryUrl().then(url => {
return fetch(`https://api.imgbb.com/1/upload?key=${IMGBB_API_KEY}&image=${this.getThumbnail_validateUrl(url)}`)
return this.getThumbnail_asCloudinaryUrl().then(cloudinaryUrl => {
return fetch(`https://api.imgbb.com/1/upload?key=${IMGBB_API_KEY}&image=${this.getThumbnail_validateUrl(cloudinaryUrl)}`)
.then(response => response.json())
.then(json => json.data.image.url);
.then(({
data: {
image: {
url: imgbbUrl
} = {}
} = {}
}) => imgbbUrl ? imgbbUrl : cloudinaryUrl);
});
}

getThumbnail_asBuffer() {
getThumbnail() {
return this.getThumbnail_asImgbbUrl()
.then(url => {
this.log('getThumbnail', url);

return fetch(url).then(response => response.buffer());
return fetch(url).then(response => response.buffer()).then(buffer => ({ buffer, url }));
})
}

@@ -34,13 +34,14 @@ exports.handler = (event, context, callback) => {
video.log('GET', url);

video
.getThumbnail_asBuffer()
.then(buffer => {
.getThumbnail()
.then(({ buffer, url }) => {
callback(null, {
statusCode: 200,
body: JSON.stringify({
provider: video.providerName,
url: video.url,
image: url,
mime: fileType(buffer).mime,
base64: `data:${fileType(buffer).mime};base64,${buffer.toString('base64')}`,
}),
@@ -53,8 +53,8 @@ exports.handler = (event, context, callback) => {
});

// video
// .getThumbnail_asBuffer()
// .then(buffer => {
// .getThumbnail()
// .then(({ buffer }) => {
// callback(null, {
// statusCode: 200,
// headers: {

0 comments on commit aa75384

Please sign in to comment.
You can’t perform that action at this time.