New Modern Audio control

docs/documentation/docs/controls/ModernAudio.md

@@ -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)
+

src/ModernAudio.ts

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

src/controls/modernAudio/IModernAudioProps.ts

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

src/controls/modernAudio/ModernAudio.module.scss

@@ -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/controls/modernAudio/ModernAudio.tsx

@@ -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/ModernAudioLabelPosition.ts

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

src/controls/modernAudio/index.ts

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

src/index.ts

@@ -40,3 +40,4 @@ export * from './DynamicForm';
 export * from './Carousel';
 export * from './ModernTaxonomyPicker';
 export * from './LivePersona';
+export * from './ModernAudio';

src/loc/de-de.ts

@@ -378,6 +378,11 @@ define([], () => {
   "ModernTaxonomyPickerRemoveButtonText": "Löschen",
   "ModernTaxonomyPickerPanelCloseButtonText": "Schließen",
   "ModernTaxonomyPickerNoResultsFound": "Keine Ergebnisse gefunden",
-  "ModernTaxonomyPickerSuggestionInLabel": "In"
+  "ModernTaxonomyPickerSuggestionInLabel": "In",
+  "ModernAudioPlay": "Abspielen",
+  "ModernAudioPause": "Pause",
+  "ModernAudioIncVol": "Lauter",
+  "ModernAudioDecVol": "Leiser",
+  "ModernAudioMute": "Ton aus"
 };
 });

src/loc/en-us.ts

@@ -398,6 +398,12 @@ define([], () => {
     ModernTaxonomyPickerRemoveButtonText: "Remove",
     ModernTaxonomyPickerPanelCloseButtonText: "Close",
     ModernTaxonomyPickerNoResultsFound: "No results found",
-    ModernTaxonomyPickerSuggestionInLabel: "in"
+    ModernTaxonomyPickerSuggestionInLabel: "in",
+
+    ModernAudioPlay: "Play",
+    ModernAudioPause: "Pause",
+    ModernAudioIncVol: "Increase Volume",
+    ModernAudioDecVol: "Decrease Volume",
+    ModernAudioMute: "Mute"
 };
 });

src/loc/mystrings.d.ts

@@ -374,6 +374,13 @@ declare interface IControlStrings {
   ModernTaxonomyPickerPanelCloseButtonText: string;
   ModernTaxonomyPickerNoResultsFound: string;
   ModernTaxonomyPickerSuggestionInLabel: string;
+
+  // Modern Audio control
+  ModernAudioPlay: string;
+  ModernAudioPause: string;
+  ModernAudioIncVol: string;
+  ModernAudioDecVol: string;
+  ModernAudioMute: string;
 }
 
 declare interface IDateTimeStrings {

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -185,7 +185,7 @@ import { VariantThemeProvider, VariantType } from "../../../controls/variantThem
 import { Label } from "office-ui-fabric-react/lib/Label";
 import { EnhancedThemeProvider } from "../../../EnhancedThemeProvider";
 import { ControlsTestEnhancedThemeProvider, ControlsTestEnhancedThemeProviderFunctionComponent } from "./ControlsTestEnhancedThemeProvider";
-
+import { ModernAudio, ModernAudioLabelPosition } from "../../../ModernAudio";
 
 
 // Used to render document card
@@ -1402,6 +1402,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
         //errorMessage="Hmmm, we do not have maps for Mars yet. Working on it..."
         />
 
+        <ModernAudio audioUrl='https://www.winhistory.de/more/winstart/mp3/vista.mp3' label="Audio Control" labelPosition={ModernAudioLabelPosition.BottomCenter} />
+
         <div className={styles.container}>
           <div className={`ms-Grid-row ms-bgColor-neutralLight ms-fontColor-neutralDark ${styles.row}`}>
             <div className="ms-Grid-col ms-lg10 ms-xl8 ms-xlPush2 ms-lgPush1">