Merge pull request #301 from streamich/audio-formats

Audio formats

Author: streamich

README.md

@@ -4,6 +4,10 @@
   </h1>
 </div>
 
+<div align="center">
+  <pre>import Embed from 'react-embed';</pre>
+</div>
+
 <br />
 <br />
 
@@ -28,23 +32,39 @@
   <img src="https://user-images.githubusercontent.com/9773803/53292170-e6fa7b80-37be-11e9-87ab-8b16ab696412.png">
 </div>
 
-
 <br />
 <br />
 
+<div align="center">
+  <h2>
+    Dark mode
+  </h2>
+</div>
+
+<div align="center">
+  <pre>&#x3C;Embed isDark url=&#x27;https://twitter.com/hercuppacoffee/status/911958476678561792&#x27; /&#x3E;</pre>
+  <img src="https://user-images.githubusercontent.com/9773803/80277289-44a19500-86ee-11ea-8dc7-0d12888cbc2d.png">
+</div>
 
 <div align="center">
   <h2>
-    Usage
+    Responsive
   </h2>
-  <pre>import Embed from 'react-embed';</pre>
 </div>
 
+<div align="center">
+  <pre>&#x3C;Embed url=&#x27;...&#x27; /&#x3E;</pre>
+  <img src="https://user-images.githubusercontent.com/9773803/80277360-b548b180-86ee-11ea-9b25-3eaa10027ca6.png">
+</div>
+
+<div align="center">
+  <pre>&#x3C;Embed width={300} url=&#x27;...&#x27; /&#x3E;</pre>
+  <img src="https://user-images.githubusercontent.com/9773803/80277394-e923d700-86ee-11ea-80da-9ff0aaab9d8f.png">
+</div>
 
 <br />
 <br />
 
-
 <div align="center">
   <h2>
     Supported
@@ -70,3 +90,5 @@
 - Twitter Tweet
 - Vimeo
 - YouTube
+- Audio files: `.mp3`, `.wav`, `.weba`, `.aac`, `.oga`, `.m4a`, `.mp4`, `.ogg`, `.opus`, `.ts`, `.wma`, `.mp4a`, `.mpga`, `.mp2`, `.mp2a`, `.m2a`, `.m3a`,
+- Video files: `.spx`, `.mp4`, `.og`, `.ogv`, `.webm`, `.mov`, `.m4v`, `.m3u8`, `.mpd`

src/ReactEmbed.tsx

@@ -15,6 +15,8 @@ export interface ParsedUrl {
 export type EmbedBlockId = string;
 export interface BlockProps extends ParsedUrl {
   id: EmbedBlockId;
+  width: number;
+  isDark: boolean;
   renderVoid: (error?: Error) => React.ReactElement<any> | null;
   renderWrap: ReactEmbedWrapRenderer;
 }
@@ -58,11 +60,28 @@ const renderNull = () => null;
 const renderWrap = (children) => children;
 
 export interface ReactEmbedProps {
+  /**
+   * URL to display.
+   */
   url: string;
+
+  /**
+   * True if dark mode enable. In that case will try to render content on dark
+   * background.
+   */
+  isDark?: boolean;
+
+  /**
+   * Number of pixels the maximum space available to the component. If not provided
+   * defaults to window width.
+   */
+  width?: number;
+
   blocks?: Blocks;
   router?: ReactEmbedRouter;
   render?: ReactEmbedRenderer;
   fallback?: NonNullable<React.ReactNode> | null;
+
   /**
    * Called on error or when `react-embed` does not know how render a URL.
    * If called on on error, error will available in `error` argument.
@@ -78,6 +97,8 @@ export interface ReactEmbedState {
 
 export class ReactEmbed extends React.PureComponent<ReactEmbedProps, ReactEmbedState> {
   static defaultProps = {
+    width: typeof window === 'object' ? window.innerWidth : 0,
+    isDark: false,
     blocks: defaultBlocks,
     router: defaultRouter,
     render: defaultRender,

src/__story__/react-simple-player.story.tsx

@@ -2,6 +2,54 @@ import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import Embed from '..';
 
-storiesOf('react-simple-player', module).add('.mp3', () => {
-  return <Embed url={'https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3'} />;
+storiesOf('react-simple-player/format', module)
+  .add('.mp3', () => {
+    return <Embed url={'https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3'} />;
+  })
+  .add('.wav', () => {
+    return <Embed url={'https://file-examples.com/wp-content/uploads/2017/11/file_example_WAV_1MG.wav'} />;
+  })
+  .add('.aac', () => {
+    return <Embed url={'https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.aac'} />;
+  })
+  .add('.m4a', () => {
+    return <Embed url={'https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.m4a'} />;
+  })
+  .add('.mp4', () => {
+    return <Embed url={'https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.mp4'} />;
+  })
+  .add('.ogg', () => {
+    return <Embed url={'https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.ogg'} />;
+  })
+  .add('.opus', () => {
+    return <Embed url={'https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.opus'} />;
+  })
+  .add('.wma', () => {
+    return <Embed url={'https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.wma'} />;
+  })
+  .add('.mpga', () => {
+    return <Embed url={'https://example-files.online-convert.com/audio/mpga/example.mpga'} />;
+  })
+  .add('.mp2', () => {
+    return <Embed url={'https://filesamples.com/samples/audio/mp2/sample1.mp2'} />;
+  });
+
+storiesOf('react-simple-player/widths', module)
+  .add('300px', () => {
+    return (
+      <div style={{width: 300}}>
+        <Embed url={'https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3'} width={300} />
+      </div>
+    );
+  })
+  .add('500px', () => {
+    return (
+      <div style={{width: 500}}>
+        <Embed url={'https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3'} width={500} />
+      </div>
+    );
+  });
+
+storiesOf('react-simple-player', module).add('dark mode', () => {
+  return <Embed isDark url={'https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3'} />;
 });

src/__story__/tweet.story.tsx

@@ -13,4 +13,7 @@ storiesOf('tweet', module)
         <Embed url={'https://twitter.com/hercuppacoffee/status/911958476678561792'} />
       </Box>
     );
+  })
+  .add('[isDark]', () => {
+    return <Embed url={'https://twitter.com/hercuppacoffee/status/911958476678561792'} isDark />;
   });

src/blocks/react-simple-player/canPlay.ts

@@ -1,4 +1,4 @@
-const MATCH_AUDIO_FILE = /\.(mp3|wav|weba|aac|oga)($|\?)/i;
+const MATCH_AUDIO_FILE = /\.(mp3|wav|weba|aac|oga|m4a|mp4|ogg|opus|ts|wma|mpga)($|\?)/i;
 const canPlay = (url: string): boolean => MATCH_AUDIO_FILE.test(url);
 
 export default canPlay;

src/blocks/react-simple-player/index.tsx

@@ -2,8 +2,10 @@ import * as React from 'react';
 import {BlockProps} from '../..';
 import {Player} from 'react-simple-player';
 
-const SimplePlayerWrapper: React.SFC<BlockProps> = ({url, renderWrap}) => {
-  return renderWrap(<Player src={url} height={50} />);
+const SimplePlayerWrapper: React.FC<BlockProps> = ({url, isDark, width, renderWrap}) => {
+  return renderWrap(
+    <Player src={url} height={50} hideVolume={width < 500} grey={isDark ? [20, 23, 26] : [240, 243, 246]} />,
+  );
 };
 
 export default SimplePlayerWrapper;

src/blocks/tweet/index.tsx

@@ -22,7 +22,7 @@ class TwitterTweet extends React.PureComponent<BlockProps, {}> {
         console.error('Failed to load Twitter lib.');
         return;
       }
-      wnd.twttr.widgets.createTweet(this.props.id, this.refs.ref);
+      wnd.twttr.widgets.createTweet(this.props.id, this.refs.ref, {theme: this.props.isDark ? 'dark' : 'light'});
     });
   }
 

src/renderer.tsx

@@ -4,7 +4,16 @@ import {ReactEmbedRenderer} from '.';
 const renderer: ReactEmbedRenderer = (Block: any, id, props, state) => {
   const renderVoid = (error) => props.renderVoid!(props, state, error);
 
-  return <Block {...state.url} id={id} renderWrap={props.renderWrap!} renderVoid={renderVoid} />;
+  return (
+    <Block
+      {...state.url}
+      id={id}
+      width={props.width}
+      isDark={props.isDark!}
+      renderWrap={props.renderWrap!}
+      renderVoid={renderVoid}
+    />
+  );
 };
 
 export default renderer;