feat(videodetail): implement share functionality

src/components/Video/Video.test.tsx

@@ -23,7 +23,17 @@ describe('<Video>', () => {
       title: 'Test item title',
       tracks: [],
     } as PlaylistItem;
-    const { container } = render(<Video item={item} startPlay={() => null} goBack={() => null} poster="fading" play />);
+    const { container } = render(
+      <Video
+        item={item}
+        startPlay={() => null}
+        goBack={() => null}
+        poster="fading"
+        play
+        hasShared={false}
+        onShareClick={() => null}
+      />,
+    );
 
     expect(container).toMatchSnapshot();
   });

src/components/Video/Video.tsx

@@ -9,6 +9,7 @@ import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint';
 import Favorite from '../../icons/Favorite';
 import PlayTrailer from '../../icons/PlayTrailer';
 import Share from '../../icons/Share';
+import Check from '../../icons/Check';
 import ArrowLeft from '../../icons/ArrowLeft';
 import Play from '../../icons/Play';
 import Button from '../Button/Button';
@@ -25,10 +26,21 @@ type Props = {
   startPlay: () => void;
   goBack: () => void;
   poster: Poster;
+  hasShared: boolean;
+  onShareClick: () => void;
   relatedShelf?: JSX.Element;
 };
 
-const Video: React.FC<Props> = ({ item, play, startPlay, goBack, poster, relatedShelf }: Props) => {
+const Video: React.FC<Props> = ({
+  item,
+  play,
+  startPlay,
+  goBack,
+  poster,
+  hasShared,
+  onShareClick,
+  relatedShelf,
+}: Props) => {
   const [isPlaying, setIsPlaying] = useState<boolean>(false);
   const [mouseActive, setMouseActive] = useState(false);
   const breakpoint: Breakpoint = useBreakpoint();
@@ -78,7 +90,12 @@ const Video: React.FC<Props> = ({ item, play, startPlay, goBack, poster, related
               fullWidth={breakpoint < Breakpoint.sm}
             />
             <Button label={t('video:favorite')} startIcon={<Favorite />} onClick={() => null} />
-            <Button label={t('video:share')} startIcon={<Share />} onClick={() => null} />
+            <Button
+              label={hasShared ? t('video:copied_url') : t('video:share')}
+              startIcon={hasShared ? <Check /> : <Share />}
+              onClick={onShareClick}
+              active={hasShared}
+            />
           </div>
         </div>
         <div

src/containers/Video/Video.tsx

@@ -1,8 +1,9 @@
 import { useHistory, useLocation } from 'react-router';
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import type { Config } from 'types/Config';
 import type { PlaylistItem } from 'types/playlist';
 
+import { copyToClipboard } from '../../utils/dom';
 import useBlurImageUpdater from '../../hooks/useBlurImageUpdater';
 import { ConfigContext } from '../../providers/ConfigProvider';
 import VideoComponent from '../../components/Video/Video';
@@ -24,6 +25,7 @@ const Video = ({ playlistId, videoType, episodeId, mediaId }: VideoProps): JSX.E
   const location = useLocation();
   const play = new URLSearchParams(location.search).get('play') === '1';
   const config: Config = useContext(ConfigContext);
+  const [hasShared, setHasShared] = useState<boolean>(false);
   const posterFading: boolean = config ? config.options.posterFading === true : false;
 
   const { isLoading, error, data: { playlist } = { playlist: [] } } = usePlaylist(playlistId);
@@ -40,6 +42,18 @@ const Video = ({ playlistId, videoType, episodeId, mediaId }: VideoProps): JSX.E
   const onCardClick = (item: PlaylistItem) => history.push(cardUrl(item));
   const onCardHover = (item: PlaylistItem) => updateBlurImage(item.image);
 
+  const onShareClick = (): void => {
+    if (!item) return;
+
+    if (typeof navigator.share === 'function') {
+      navigator.share({ title: item.title, text: item.description, url: window.location.href });
+    } else {
+      copyToClipboard(window.location.href);
+    }
+    setHasShared(true);
+    setTimeout(() => setHasShared(false), 2000);
+  };
+
   //temp:
   console.info({ episodeId });
 
@@ -55,6 +69,8 @@ const Video = ({ playlistId, videoType, episodeId, mediaId }: VideoProps): JSX.E
       startPlay={startPlay}
       goBack={goBack}
       poster={posterFading ? 'fading' : 'normal'}
+      hasShared={hasShared}
+      onShareClick={onShareClick}
       relatedShelf={
         config.recommendationsPlaylist ? (
           <Shelf

src/i18n/locales/en_US/video.json

@@ -2,5 +2,6 @@
   "favorite": "Favorite",
   "share": "Share",
   "start_watching": "Start watching",
-  "trailer": "Trailer"
+  "trailer": "Trailer",
+  "copied_url": "Copied url"
 }

src/i18n/locales/nl_NL/video.json

@@ -2,5 +2,6 @@
   "favorite": "",
   "share": "",
   "start_watching": "",
-  "trailer": ""
+  "trailer": "",
+  "copied_url": ""
 }

src/icons/Check.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import createIcon from './Icon';
+
+export default createIcon(
+  '0 0 24 24',
+  <g>
+    <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
+  </g>,
+);

src/utils/dom.ts

@@ -28,3 +28,16 @@ export const addScript = (src: string, callback: () => void): void => {
   script.onerror = (error) => console.info('Error loading external script', error);
   document.body.appendChild(script);
 };
+
+export const copyToClipboard = (value: string): void => {
+  const inputc = document.createElement('input');
+  inputc.style.zIndex = '-10';
+  inputc.style.position = 'absolute';
+  inputc.style.left = '-1000';
+  inputc.value = value;
+  document.body.appendChild(inputc);
+  inputc.select();
+  document.execCommand('copy');
+  inputc.blur();
+  document.body.removeChild(inputc);
+};