link: link previews for images and youtube

pkg/interface/link/src/css/custom.css

@@ -68,6 +68,21 @@ a {
   margin: 0 auto;
 }
 
+.embed-container {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  padding-bottom: 56.25%;
+}
+
+.embed-container iframe, .embed-container object, .embed-container embed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
 /* responsive */
 @media all and (max-width: 34.375em) {
   .dn-s {

pkg/interface/link/src/js/components/lib/link-detail-preview.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { Route, Link } from "react-router-dom";
+import { base64urlEncode } from "../../lib/util";
 import moment from "moment";
 
 export class LinkPreview extends Component {
@@ -58,6 +59,15 @@ export class LinkPreview extends Component {
       props.url
     );
 
+    let youTubeRegex = new RegExp(
+      "" +
+      /(?:https?:\/\/(?:[a-z]+.)?)/.source + // protocol
+      /(?:youtu\.?be(?:\.com)?\/)(?:embed\/)?/.source + // short and long-links
+        /(?:(?:(?:(?:watch\?)?(?:time_continue=(?:[0-9]+))?.+v=)?([a-zA-Z0-9_-]+))(?:\?t\=(?:[0-9a-zA-Z]+))?)/.source // id
+    );
+
+    let ytMatch = youTubeRegex.exec(props.url);
+
     let embed = "";
 
     if (imgMatch) {
@@ -66,19 +76,32 @@ export class LinkPreview extends Component {
                    style={{maxHeight: "100%", maxWidth: "500px", margin: "0 auto"}}/>
     }
 
+    if (ytMatch) {
+      embed = (
+        <iframe
+          ref="iframe"
+          width="560"
+          height="315"
+          src={`https://www.youtube.com/embed/${ytMatch[1]}`}
+          frameBorder="0"
+          allow="picture-in-picture, fullscreen"></iframe>
+      );
+    }
+
     let nameClass = props.nickname ? "inter" : "mono";
 
     return (
       <div className="pb6 w-100">
-      <div className="w-100"
-      style={{maxHeight: "500px"}}>{embed}</div>
+        <div
+          className={"w-100 " + (ytMatch ? "embed-container" : "")}
+          style={{ maxHeight: "500px" }}>
+          {embed}
+        </div>
         <div className="flex flex-column ml2 pt6">
           <a href={props.url} className="w-100 flex" target="_blank">
             <p className="f8 truncate">
               {props.title}
-              <span className="gray2 ml2 flex-shrink-0">
-                {hostname} ↗
-              </span>
+              <span className="gray2 ml2 flex-shrink-0">{hostname} ↗</span>
             </p>
           </a>
           <div className="w-100 pt1">
@@ -91,13 +114,13 @@ export class LinkPreview extends Component {
             <Link
               to={
                 "/~link" +
-                props.path +
+                props.groupPath +
                 "/" +
                 props.page +
                 "/" +
                 props.linkIndex +
                 "/" +
-                window.btoa(props.url)
+                base64urlEncode(props.url)
               }
               className="v-top">
               <span className="f9 inter gray2">{props.comments}</span>

pkg/interface/link/src/js/components/link.js

@@ -1,10 +1,10 @@
 import React, { Component } from 'react'
 import { LinksTabBar } from './lib/links-tabbar';
+import { LinkPreview } from './lib/link-detail-preview';
 import { SidebarSwitcher } from '/components/lib/icons/icon-sidebar-switch.js';
 import { api } from '../api';
 import { Route, Link } from 'react-router-dom';
 import { Comments } from './lib/comments';
-import { base64urlEncode } from '../lib/util';
 
 export class LinkDetail extends Component {
   constructor(props) {
@@ -80,9 +80,9 @@ export class LinkDetail extends Component {
     return (
       <div className="h-100 w-100 overflow-hidden flex flex-column">
         <div
-          className={`pl3 pt2 flex relative overflow-x-scroll
-      overflow-x-auto-l overflow-x-auto-xl flex-shrink-0
-      bb bn-m bn-l bn-xl b--gray4`}
+          className={"pl3 pt2 flex relative overflow-x-scroll " +
+      "overflow-x-auto-l overflow-x-auto-xl flex-shrink-0 " +
+      "bb bn-m bn-l bn-xl b--gray4"}
           style={{ height: 48 }}>
           <SidebarSwitcher
             sidebarShown={props.sidebarShown}
@@ -103,7 +103,7 @@ export class LinkDetail extends Component {
               comments={comments}
               nickname={nickname}
               ship={ship}
-              path={props.groupPath}
+              groupPath={props.groupPath}
               page={props.page}
               linkIndex={props.linkIndex}
               data={props.data}