Merge pull request #1243 from mmsharepoint/audio

New Modern Audio control

Author: AJIXuMuK

docs/documentation/docs/assets/ModernAudioDarkLime.png

@@ -0,0 +1,62 @@
+# Modern Audio
+
+This control renders an Audio Control in a modern and themable way. It is controllable with Fluent UI icons instead of old-fashioned standard HTML5 Audio control.
+
+!!! Note
+    Originally it's coming from the following community [Teams app sample](https://github.com/pnp/teams-dev-samples/tree/main/samples/tab-meeting-record-name).
+
+**Modern Audio control rendered with label and default label positioning**
+
+![Modern Audio](../assets/ModernAudioDefault.png)
+
+**Modern Audio control rendered with dark (lime) theme and label positioned BottomLeft**
+
+![Modern Audio dark](../assets/ModernAudioDarkLime.png)
+
+**Modern Audio control in action with label positioned at BottomCenter**
+
+![Modern Audio in action](../assets/ModernAudioInAction.gif)
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
+- Import the following modules to your component:
+
+```typescript
+import { ModernAudio, ModernAudioLabelPosition } from "@pnp/spfx-controls-react/lib/ModernAudio";
+```
+
+- Use the `ModernAudio` control in your code as follows:
+
+```typescript
+<ModernAudio 
+    audioUrl='https://www.winhistory.de/more/winstart/mp3/vista.mp3'
+    label="Audio Control"
+    labelPosition={ModernAudioLabelPosition.TopCenter} />
+```
+
+
+## Implementation
+
+The Modern Audio control can be configured with the following properties:
+
+| Property | Type | Required | Description | Default |
+| ---- | ---- | ---- | ---- | ---- |
+| audioUrl | string | yes | Url to the audio src | |
+| label | string | no | Label to use for the control. | blank |
+| labelPosition | ModernAudioLabelPosition | no | Define position of label: TopLeft, TopCenter, BottomLeft, BottomCenter. | TopLeft |
+
+Enum `ModernAudioLabelPosition`
+
+The `ModernAudioLabelPosition` enum can be used to specify the types of information you want to query: User, Security groups, and/or SharePoint groups.
+
+| Name | Value | Position
+| ---- | ---- | ---- |
+| TopLeft | 1 | On top, left aligned
+| TopCenter | 2 | On top, centered
+| BottomLeft | 3 | At bottom, left aligned
+| BottomCenter | 4 | At bottom, centered
+
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ModernAudio)
+

docs/documentation/docs/assets/ModernAudioDefault.png

@@ -0,0 +1 @@
+export * from './controls/modernAudio/index';

docs/documentation/docs/assets/ModernAudioInAction.gif

@@ -0,0 +1,7 @@
+import { ModernAudioLabelPosition } from "./ModernAudioLabelPosition";
+
+export interface IModernAudioProps {
+    audioUrl: string;
+    label?: string;
+    labelPosition?: ModernAudioLabelPosition;
+}

docs/documentation/docs/controls/ModernAudio.md

@@ -0,0 +1,13 @@
+.modernAudio {
+    display: table-cell;
+    padding: 8px;
+    .audioPanel {
+        border: 1px dotted;
+        border-radius: 8px;
+        padding: 8px;
+        display: inline-block;
+    }
+    .audioIcon {
+        cursor: pointer;
+    }
+}

src/ModernAudio.ts

@@ -0,0 +1,78 @@
+import * as React from "react";
+import styles from './ModernAudio.module.scss';
+import * as strings from 'ControlStrings';
+import { IModernAudioProps } from "./IModernAudioProps";
+import { IconButton } from "office-ui-fabric-react";
+import { ModernAudioLabelPosition } from './ModernAudioLabelPosition';
+
+export const ModernAudio: React.FC<IModernAudioProps> = (props: IModernAudioProps) => {
+    const audioComp = React.useRef<HTMLAudioElement>(new Audio(props.audioUrl));
+    const [muted, setMuted] = React.useState<boolean>(false);
+    const [playing, setPlaying] = React.useState<boolean>(false);
+
+    React.useEffect(() => {
+        audioComp.current.onended = () => { setPlaying(false); };
+    }, []);
+
+    const playAudio = () => {
+        setPlaying(true);
+        audioComp.current.play();
+    };
+    const pauseAudio = () => {
+        setPlaying(false);
+        audioComp.current.pause();
+    };
+    const incVolume = () => {
+        if (audioComp.current.volume <= 0.9) {
+            audioComp.current.volume += 0.1;
+        }
+        else {
+            audioComp.current.volume = 1;
+        }
+        if (audioComp.current.muted) {
+            audioComp.current.muted = false;
+            setMuted(false);
+        }
+    };
+    const decVolume = () => {
+        audioComp.current.volume -= 0.1;
+        if (audioComp.current.volume < 0.1) {
+            audioComp.current.volume = 0;
+            audioComp.current.muted = true;
+            setMuted(true);
+        }
+    };
+    const muteAudio = () => {
+        audioComp.current.muted = !muted;
+        setMuted(!muted);
+    };
+    return (
+        <div className={styles.modernAudio}>
+            {props.labelPosition === ModernAudioLabelPosition.TopLeft &&
+            props.label !== "" && 
+            <div><label>{props.label}</label></div>}
+            {props.labelPosition === ModernAudioLabelPosition.TopCenter && 
+            props.label !== "" &&
+            <div style={{textAlign: "center"}}><label>{props.label}</label></div>}
+            <div className={styles.audioPanel}>
+                {props.audioUrl !== "" && <audio ref={audioComp} src={props.audioUrl}></audio>}
+                <IconButton iconProps={{ iconName: 'Play' }} className={styles.audioIcon} title={strings.ModernAudioPlay} disabled={playing} onClick={playAudio} />
+                <IconButton iconProps={{ iconName: 'Pause' }} className={styles.audioIcon} title={strings.ModernAudioPause} disabled={!playing} onClick={pauseAudio} />    
+                <IconButton iconProps={{ iconName: 'Volume2' }} className={styles.audioIcon} title={strings.ModernAudioIncVol} onClick={incVolume} />
+                <IconButton iconProps={{ iconName: 'Volume0' }} className={styles.audioIcon} title={strings.ModernAudioDecVol} disabled={muted} onClick={decVolume} />
+                <IconButton iconProps={{ iconName: 'VolumeDisabled' }} className={styles.audioIcon} title={strings.ModernAudioMute} disabled={muted} onClick={muteAudio} />
+            </div>
+            {props.labelPosition === ModernAudioLabelPosition.BottomLeft &&
+            props.label !== "" &&
+            <div><label>{props.label}</label></div>}
+            {props.labelPosition === ModernAudioLabelPosition.BottomCenter &&
+            props.label !== "" &&
+            <div style={{textAlign: "center"}}><label>{props.label}</label></div>}
+        </div>
+    );
+};
+
+ModernAudio.defaultProps = {
+    label: "",
+    labelPosition: ModernAudioLabelPosition.TopLeft
+};

src/controls/modernAudio/IModernAudioProps.ts

@@ -0,0 +1,6 @@
+export enum ModernAudioLabelPosition {
+    TopLeft = 1,
+    TopCenter,
+    BottomLeft,
+    BottomCenter
+}

src/controls/modernAudio/ModernAudio.module.scss

@@ -0,0 +1,3 @@
+export * from './IModernAudioProps';
+export * from './ModernAudio';
+export * from './ModernAudioLabelPosition';