Permalink
Browse files

Added 'music.youtube.com' and 'gaming.youtube.com'.

  • Loading branch information...
marcomontalbano committed Sep 14, 2018
1 parent 4cca5a0 commit 362bac7fad3791bb35cfc6eb7524b36008602436
View
@@ -0,0 +1,5 @@
module.exports = {
includePaths: [
'node_modules/'
]
}
View
@@ -1,4 +1,9 @@
# Video to Markdown
Video to Markdown
=================
[![Build Status](https://travis-ci.org/marcomontalbano/video-to-markdown.svg?branch=master)](https://travis-ci.org/marcomontalbano/video-to-markdown)
Add videos to your markdown files easier - [https://video-to-markdown.netlify.com](https://video-to-markdown.netlify.com).
## Why?
@@ -35,8 +40,6 @@ List of supported video providers:
## Hosting
The project is hosted here: [https://video-to-markdown.netlify.com](https://video-to-markdown.netlify.com).
If you want your own copy, just
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/marcomontalbano/video-to-markdown)
View
@@ -55,8 +55,11 @@
"webpack-dev-server": "^3.1.3"
},
"dependencies": {
"clipboard": "^2.0.1",
"file-type": "^9.0.0",
"jquery": "^3.3.1",
"nprogress": "^0.2.0",
"primer-tooltips": "^1.5.7",
"prismjs": "^1.15.0"
},
"scripts": {
View
@@ -0,0 +1,7 @@
language: node_js
node_js:
- "8"
script:
- yarn test
View
@@ -36,7 +36,7 @@
<h1 class="title"><a href="/">Video to <strong>markdown</strong>!</a></h1>
</header>
<div class="row with-more-padding site-app">
<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>
@@ -49,10 +49,11 @@ <h1 class="title"><a href="/">Video to <strong>markdown</strong>!</a></h1>
<section class="site-app--output">
<div class="output-frame">
<div class="preview">
<include src="./spinner.html"></include>
<img src="./images/placeholder.jpg" />
</div>
<div class="markdown"><pre class="language"><code class="language">&nbsp;</code></pre></div>
<div class="markdown tooltipped-n border p-2 mb-2 mr-2 float-left" aria-label="Click below to copy the markdown to clipboard.">
<pre class="language"><code class="language">&nbsp;</code></pre>
</div>
</div>
</section>
</div>
View
@@ -1,9 +1,18 @@
import $ from 'jquery';
import Prism from 'prismjs';
import NProgress from 'nprogress';
import ClipboardJS from 'clipboard';
import imageNotFound from './images/not-found.jpg';
import imageLoading from './images/loading.jpg';
NProgress.configure({
parent: '.preview',
showSpinner: false
});
new ClipboardJS('.markdown');
const loadImage = (src, success = () => { }, error = () => { }) => {
$('<img>')
.on('load', () => {
@@ -15,34 +24,53 @@ const loadImage = (src, success = () => { }, error = () => { }) => {
.attr('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>`
;
$('.markdown').toggleClass('tooltipped', title !== undefined);
$('.markdown').attr('data-clipboard-text', $('.markdown code').html(markdown).text());
};
loadImage(imageLoading);
loadImage(imageNotFound);
let videoUrl_memo;
$('form').on('submit', function(e) {
e.preventDefault();
NProgress.start();
const $form = $(this);
const url = $form.find('[name="url"]').val();
const title = $form.find('[name="title"]').val();
const imageUrl = `${location.protocol}//${location.host}/.netlify/functions/image?url=${url}`;
const videoUrl = $form.find('[name="url"]').val();
const imageUrl = `${location.protocol}//${location.host}/.netlify/functions/image?url=${videoUrl}`;
if (videoUrl_memo === videoUrl) {
updateMarkdown(title, imageUrl, videoUrl);
NProgress.done();
return false;
}
videoUrl_memo = videoUrl;
$('.preview').addClass('loading');
$('.preview img').attr('src', imageLoading);
$('.markdown code').html('&nbsp;');
updateMarkdown();
loadImage(imageUrl, () => {
$('.preview').removeClass('loading');
NProgress.done();
$('.preview img').attr('src', imageUrl);
$('.markdown code').html(
`<span class="token punctuation">[![<span class="token attr-value">${title}</span>](<span class="token attr-value">${imageUrl}</span>)](<span class="token attr-value">${url}</span> "<span class="token attr-value">${title}</span>")</span>`
// `[![${title}](${imageUrl})](${url} "${title}")`
);
updateMarkdown(title, imageUrl, videoUrl);
}, () => {
loadImage(imageNotFound, () => {
$('.preview').removeClass('loading');
NProgress.done();
videoUrl_memo = imageNotFound;
$('.preview img').attr('src', imageNotFound);
$('.markdown code').html('&nbsp;');
updateMarkdown();
});
});
});
@@ -16,8 +16,14 @@ export default class Youtube extends VideoProvider {
/https?\:\/\/www\.youtube\.com\/embed\/([a-zA-Z0-9\_\-]+)/,
// - //youtube.com/embed/oRdzL2DX0yU
/https?\:\/\/youtube\.com\/embed\/([a-zA-Z0-9\_\-]+)/
];
/https?\:\/\/youtube\.com\/embed\/([a-zA-Z0-9\_\-]+)/,
// - //gaming.youtube.com/watch?v=CLdvw87teRc
/https?\:\/\/gaming\.youtube\.com\/watch\?v\=([a-zA-Z0-9\_\-]+)/,
// - //music.youtube.com/watch?v=i3MKTm-49uI&feature=share
/https?\:\/\/music\.youtube\.com\/watch\?v\=([a-zA-Z0-9\_\-]+)/,
];
}
getThumbnail_asUrl() {
@@ -6,6 +6,9 @@ describe('Youtube', () => {
expect(Youtube.getVideoId('https://youtu.be/oRdzL2DX0yU')).toBe('oRdzL2DX0yU');
expect(Youtube.getVideoId('https://www.youtube.com/embed/oRdzL2DX0yU')).toBe('oRdzL2DX0yU');
expect(Youtube.getVideoId('https://youtube.com/embed/oRdzL2DX0yU')).toBe('oRdzL2DX0yU');
expect(Youtube.getVideoId('https://gaming.youtube.com/watch?v=CLdvw87teRc')).toBe('CLdvw87teRc');
expect(Youtube.getVideoId('https://gaming.youtube.com/watch?v=CLdvw87teRc&feature=share')).toBe('CLdvw87teRc');
expect(Youtube.getVideoId('https://music.youtube.com/watch?v=i3MKTm-49uI&feature=share')).toBe('i3MKTm-49uI');
});
it('all methods must work.', () => {
View

This file was deleted.

Oops, something went wrong.
View
@@ -1,5 +1,6 @@
.row {
@include grid-row();
padding: 2em 0;
}
.container {
View
@@ -19,10 +19,7 @@
}
&.markdown {
background: #fff;
white-space: nowrap;
text-overflow: ellipsis;
margin-top: 1px;
overflow: hidden;
margin-top: 2px;
> pre {
margin: 0;
> code {
@@ -44,23 +41,7 @@
}
}
.spinner {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.preview.loading {
.spinner {
display: block;
}
}
form {
display: block;
width: 100%;
position: relative;
top: 50%;
@@ -90,26 +71,21 @@ form {
}
}
.markdown {
overflow: auto;
}
.providers {
@include grid-row();
.provider {
@include grid-column((xxsmall: 1 of 1, small: 1 of 2, large: 1 of 3));
cursor: default;
display: block;
.fa-check {
color: #8bc34a;
}
span {
padding-left: 8px;
}
}
}
.fas.fa-check {
color: #8bc34a;
}
.details {
section {
padding-bottom: 3em;
View
@@ -1,7 +1,8 @@
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-size: $rem-base;
font-size: 16px;
line-height: 2rem;
}
body {
@@ -16,15 +17,6 @@ body {
box-sizing: border-box;
}
main,
li {
display: block;
}
strong {
font-weight: bold;
}
a,
button {
color: inherit;
@@ -55,23 +47,15 @@ button {
};
img {
width: 100%;
max-width: 100%;
height: auto;
border: 0;
// ie 11 bug fix
min-height: 2px;
}
svg:not(:root) {
overflow: hidden;
}
button,
input,
optgroup,
select,
textarea {
input {
color: inherit;
font: inherit;
margin: 0;
@@ -87,9 +71,7 @@ select {
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
html input[type="button"] {
-webkit-appearance: button;
cursor: pointer;
}
@@ -108,37 +90,3 @@ input::-moz-focus-inner {
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
}
Oops, something went wrong.

0 comments on commit 362bac7

Please sign in to comment.