fix: adds support for shortened youtube share links

Adds support for shortened YouTube share links with hostnames like youtu.be.
streamich · Mar 17, 2020 · f78f13f · f78f13f
1 parent 5d8de5f
commit f78f13f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/src/__story__/youtube.story.tsx b/src/__story__/youtube.story.tsx
@@ -13,4 +13,11 @@ storiesOf('youtube', module)
         <Embed url={'https://www.youtube.com/watch?v=soICQ3B2kEk'} />
       </Box>
     );
+  })
+  .add('Shortened URL', () => {
+    return (
+      <Box>
+        <Embed url={'https://youtu.be/soICQ3B2kEk'} />
+      </Box>
+    );
   });
diff --git a/src/routeToBlock.ts b/src/routeToBlock.ts
@@ -7,10 +7,16 @@ const routeTwitter: ReactEmbedRouter = (blocks, {pathname}) => {
   return [blocks.tweet, steps[steps.length - 1]];
 };
 
-const routeYouTube: ReactEmbedRouter = (blocks, {search}) => {
-  const matches = search.match(/v=([^\&]+)(&|$)/);
-  if (!matches) return undefined;
-  return [blocks.youtube, matches[1]];
+const routeYouTube: ReactEmbedRouter = (blocks, parsed) => {
+  const searchMatch = parsed.search.match(/v=([^\&]+)(&|$)/);
+  const urlMatch = parsed.pathname.replace('/', '');
+  if (searchMatch) {
+    return [blocks.youtube, searchMatch[1]];
+  } else if (urlMatch) {
+    return [blocks.youtube, urlMatch];
+  } else {
+    return undefined;
+  }
 };
 
 const routeJsFiddle: ReactEmbedRouter = (blocks, {pathname}) => {
@@ -56,11 +62,11 @@ const routeGfycat: ReactEmbedRouter = (blocks, {pathname}) => {
 
 const routeToBlock: ReactEmbedRouter = (blocks: Blocks, parsed: ParsedUrl) => {
   const {hostname, url} = parsed;
-
   switch (hostname) {
     case 'twitter.com':
       return routeTwitter(blocks, parsed);
     case 'www.youtube.com':
+    case 'youtu.be':
     case 'youtube.com':
       return routeYouTube(blocks, parsed);
     case 'soundcloud.com':