Merge pull request #12 from streamich/video

Video

README.md

@@ -47,6 +47,7 @@
      <br/>
 - [__UI__](./docs/UI.md)
    - [`useAudio`](./docs/useAudio.md) &mdash; plays audio and exposes its controls.
+   - [`useSpeech`](./docs/useSpeech.md) &mdash; synthesizes speech from a text string.
      <br/>
      <br/>
 - [__Animations__](./docs/Animations.md)

docs/UI.md

@@ -0,0 +1,3 @@
+# UI
+
+*"UI Hooks"* allow you to control and subscribe to state changes of UI elements.

docs/useAudio.md

@@ -8,11 +8,9 @@ Creates `<audio>` element, tracks its state and exposes playback conrols.
 ```jsx
 import {useAudio} from 'react-use';
 
-const src = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3';
-
 const Demo = () => {
   const [audio, state, controls, ref] = useAudio({
-    src,
+    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
     autoPlay: true,
   });
 

docs/useSpeech.md

@@ -0,0 +1,20 @@
+# `useSpeech`
+
+React UI hook that synthesizes human voice that speaks a given string.
+
+
+## Usage
+
+```jsx
+import {useSpeech} from 'react-use';
+
+const Demo = () => {
+  const state = useSpeech('Hello world!');
+
+  return (
+    <pre>
+      {JSON.stringify(state, null, 2)}
+    </pre>  
+  );
+};
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-use",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Collection of React Hooks",
   "main": "lib/index.js",
   "files": [

src/__stories__/useAudio.story.tsx

@@ -2,11 +2,9 @@ import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useAudio} from '..';
 
-const src = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3';
-
 const Demo = () => {
-  const [audio, state, controls] = useAudio({
-    src,
+  const [audio, state, controls, ref] = useAudio({
+    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
     autoPlay: true,
   });
 

src/__stories__/useSpeech.story.tsx

@@ -0,0 +1,18 @@
+import {storiesOf} from '@storybook/react';
+import * as React from 'react';
+import {useSpeech} from '..';
+
+const Demo = () => {
+  const state = useSpeech('Hello world!');
+
+  return (
+    <pre>
+      {JSON.stringify(state, null, 2)}
+    </pre>  
+  );
+};
+
+storiesOf('useSpeech', module)
+  .add('Example', () =>
+    <Demo/>
+  )

src/index.ts

@@ -22,6 +22,7 @@ import useOrientation from './useOrientation';
 import useRaf from './useRaf';
 import useSetState from './useSetState';
 import useSize from './useSize';
+import useSpeech from './useSpeech';
 import useSpring from './useSpring';
 import useTimeout from './useTimeout';
 import useTitle from './useTitle';
@@ -55,6 +56,7 @@ export {
   useRaf,
   useSetState,
   useSize,
+  useSpeech,
   useSpring,
   useTimeout,
   useTitle,

src/react.ts

@@ -12,3 +12,6 @@ export const useRef: UseRef = (React as any).useRef;
 
 export type UseCallback = <T extends ((...args: any[]) => any)>(callback: T, args: any[]) => T;
 export const useCallback: UseCallback = (React as any).useCallback;
+
+export type UseMemo = <T>(fn: Function, args: any[]) => T;
+export const useMemo: UseMemo = (React as any).useMemo;

src/useLifecycles.ts

@@ -1,6 +1,6 @@
 import {useEffect} from './react';
 
-const useLifecycles = (mount, unmount) => {
+const useLifecycles = (mount, unmount?) => {
   useEffect(() => {
     if (mount) mount();
     return () => {

src/useMount.ts

@@ -1,9 +1,5 @@
 import {useEffect} from './react';
 
-const useMount = (mount) => {
-  useEffect(() => {
-    if (mount) mount();
-  }, []);
-};
+const useMount = (mount) => useEffect(mount, []);
 
 export default useMount;

src/useSpeech.ts

@@ -0,0 +1,40 @@
+import {useRef} from './react';
+import useSetState from './useSetState';
+import useMount from './useMount';
+
+export interface SpeechState {
+  isPlaying: boolean;
+  volume: number;
+}
+
+export interface SpeechOptions {
+  lang?: any;
+  pitch?: number;
+  rate?: number;
+  voice?: any;
+  volume?: number;
+}
+
+const useSpeech = (text: string, opts: SpeechOptions = {}): SpeechState => {
+  const [state, setState] = useSetState<SpeechState>({
+    isPlaying: false,
+    volume: opts.volume || 1,
+  });
+
+  const uterranceRef = useRef<SpeechSynthesisUtterance | null>(null);
+
+  useMount(() => {
+    const utterance = new SpeechSynthesisUtterance(text);
+    utterance.volume = opts.volume || 1;
+    utterance.onstart = () => setState({isPlaying: true});
+    utterance.onresume = () => setState({isPlaying: true});
+    utterance.onend = () => setState({isPlaying: false});
+    utterance.onpause = () => setState({isPlaying: false});
+    uterranceRef.current = utterance;
+    window.speechSynthesis.speak(uterranceRef.current);
+  });
+
+  return state;
+};
+
+export default useSpeech;