feat: support embedly player (#31)

extension/manifest.common.json

@@ -33,6 +33,7 @@
       ],
       "js": [
         "vendors/youtube-iframe-api.js",
+        "vendors/embedly.js",
         "browser-polyfill.js",
         "content.js"
       ],

extension/playground/components/Embedly.js

@@ -0,0 +1,28 @@
+import React, { useLayoutEffect } from 'react';
+import styled from 'styled-components';
+
+const StyledContainer = styled.div`
+  & iframe {
+    position: absolute;
+    top: 0;
+    width: 600px;
+    height: 100%;
+  }
+`;
+
+const Embedly = ({ onRender }) => {
+  useLayoutEffect(() => {
+    onRender();
+  }, [onRender]);
+
+  return (
+    <StyledContainer>
+      <iframe
+        frameBorder="0"
+        src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F159048928&url=https%3A%2F%2Fvimeo.com%2F159048928&image=http%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F560697717_1280.jpg&key=1d5c48f7edc34c54bdae4c37b681ea2b&type=text%2Fhtml&schema=vimeo"
+      />
+    </StyledContainer>
+  );
+};
+
+export default Embedly;

extension/playground/components/YoutubeIframe.js

@@ -1,17 +1,20 @@
-import React, { useLayoutEffect } from 'react'
+import React, { useLayoutEffect } from 'react';
 
-export default ({ onRender }) => {
+const YoutubeIframe = ({ onRender }) => {
   useLayoutEffect(() => {
-    onRender()
-  }, [])
+    onRender();
+  }, [onRender]);
 
   return (
-    <iframe 
-      width="560" 
-      height="315" 
-      src="https://www.youtube.com/embed/-rD541GWdDM" 
-      frameBorder="0" 
+    <iframe
+      width="560"
+      height="315"
+      src="https://www.youtube.com/embed/-rD541GWdDM"
+      frameBorder="0"
       allow="accelerometer;autoplay;encrypted-media;gyroscope;"
-      allowFullScreen />
-  )
-}
+      allowFullScreen
+    />
+  );
+};
+
+export default YoutubeIframe;

extension/playground/index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
 import HTML5Video from './components/HTML5Video';
 import YoutubIframeVideo from './components/YoutubeIframe';
+import EmbedlyVideo from './components/Embedly';
 import YiNote from '../src/ui';
 
 const yiNote = new YiNote();
@@ -32,6 +33,9 @@ const App = () => {
             <li>
               <Link to="/youtube-iframe">Youtube Iframe Video</Link>
             </li>
+            <li>
+              <Link to="/embedly">Embedly Video</Link>
+            </li>
           </ul>
         </nav>
         <Switch>
@@ -45,6 +49,11 @@ const App = () => {
             path="/youtube-iframe"
             render={() => <YoutubIframeVideo onRender={renderYiNote} />}
           />
+          <Route
+            exact
+            path="/embedly"
+            render={() => <EmbedlyVideo onRender={renderYiNote} />}
+          />
         </Switch>
       </Router>
     </>

extension/src/ui/services/player/EmbedlyPlayer.js

@@ -0,0 +1,49 @@
+import Player from './Player';
+
+// For Embedly API details, please refer to https://docs.embed.ly/docs/playerjs
+export default class YoutubeIframePlayer extends Player {
+  #videoEl;
+  #player;
+
+  constructor(options = {}) {
+    super(options);
+
+    this.#videoEl = options.videoEl;
+    // eslint-disable-next-line no-undef
+    this.#player = new embedly.Player(this.#videoEl);
+    this.#player.on('ready', () => {
+      logger.info('Embedly player ready');
+    });
+  }
+
+  getVideoElement() {
+    return this.#videoEl;
+  }
+
+  play() {
+    this.#player.play();
+  }
+
+  pause() {
+    this.#player.pause();
+  }
+
+  seek(timestamp) {
+    const timeToSeek = timestamp - this.seekSeconds;
+    this.#player.setCurrentTime(timeToSeek);
+  }
+
+  getCurrentTime() {
+    return new Promise(resolve => {
+      this.#player.getCurrentTime(currentTime => {
+        resolve(Math.floor(currentTime));
+      });
+    });
+  }
+
+  getDuration() {
+    return new Promise(resolve => {
+      this.#player.getDuration(resolve);
+    });
+  }
+}

extension/src/ui/services/player/PlayerFactory.js

@@ -1,6 +1,7 @@
 import videoUrlParser from 'js-video-url-parser';
 import YoutubePlayer from './YoutubePlayer';
 import YoutubeIframePlayer from './YoutubeIframePlayer';
+import EmbedlyPlayer from './EmbedlyPlayer';
 import HTML5Player from './HTML5Player';
 import { retry } from '../../../common/utils';
 import isHidden from '../dom/isHidden';
@@ -13,6 +14,10 @@ const playersToTry = [
   {
     selector: 'iframe[src*="youtube"]',
     player: YoutubeIframePlayer
+  },
+  {
+    selector: 'iframe[src*="embedly.com"]',
+    player: EmbedlyPlayer
   }
 ];