Skip to content

Commit 752278d

Browse files
mmsharepointmmsharepoint
committed
New Modern Audio control
1 parent 99ffea4 commit 752278d

File tree

13 files changed

+197
-3
lines changed

13 files changed

+197
-3
lines changed

‎docs/documentation/docs/assets/ModernAudioDefault.png

3.7 KB
Loading

‎docs/documentation/docs/assets/ModernAudioInAction.gif

66.3 KB
Loading

‎docs/documentation/docs/controls/ModernAudio.md

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
# Modern Audio
2+
3+
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.
4+
5+
!!! Note
6+
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).
7+
8+
**Modern Audio control rendered with label and default label positioning**
9+
10+
![Modern Audio](../assets/ModernAudioDefault.png)
11+
12+
**Modern Audio control in action with label positioned at BottomCenter**
13+
14+
![Modern Audio in action](../assets/ModernAudioInAction.gif)
15+
16+
## How to use this control in your solutions
17+
18+
- 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.
19+
- Import the following modules to your component:
20+
21+
```typescript
22+
import { ModernAudio, ModernAudioLabelPosition } from "@pnp/spfx-controls-react/lib/ModernAudio";
23+
```
24+
25+
- Use the `ModernAudio` control in your code as follows:
26+
27+
```typescript
28+
<ModernAudio
29+
audioUrl='https://www.winhistory.de/more/winstart/mp3/vista.mp3'
30+
label="Audio Control"
31+
labelPosition={ModernAudioLabelPosition.TopCenter} />
32+
```
33+
34+
35+
## Implementation
36+
37+
The Modern Audio control can be configured with the following properties:
38+
39+
| Property | Type | Required | Description | Default |
40+
| ---- | ---- | ---- | ---- | ---- |
41+
| audioUrl | string | yes | Url to the audio src | |
42+
| label | string | no | Label to use for the control. | blank |
43+
| labelPosition | ModernAudioLabelPosition | no | Define position of label: TopLeft, TopCenter, BottomLeft, BottomCenter. | TopLeft |
44+
45+
Enum `ModernAudioLabelPosition`
46+
47+
The `ModernAudioLabelPosition` enum can be used to specify the types of information you want to query: User, Security groups, and/or SharePoint groups.
48+
49+
| Name | Value | Position
50+
| ---- | ---- | ---- |
51+
| TopLeft | 1 | On top, left aligned
52+
| TopCenter | 2 | On top, centered
53+
| BottomLeft | 3 | At bottom, left aligned
54+
| BottomCenter | 4 | At bottom, centered
55+
56+
57+
![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ModernAudio)
58+

‎src/ModernAudio.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './controls/modernAudio/index';

‎src/controls/modernAudio/IModernAudioProps.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { ModernAudioLabelPosition } from "./ModernAudioLabelPosition";
2+
3+
export interface IModernAudioProps {
4+
audioUrl: string;
5+
label?: string;
6+
labelPosition?: ModernAudioLabelPosition;
7+
}

‎src/controls/modernAudio/ModernAudio.module.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.modernAudio {
2+
display: table-cell;
3+
padding: 8px;
4+
.audioPanel {
5+
border: 1px dotted;
6+
border-radius: 8px;
7+
padding: 8px;
8+
display: inline-block;
9+
}
10+
.audioIcon {
11+
cursor: pointer;
12+
}
13+
}

‎src/controls/modernAudio/ModernAudio.tsx

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
// import { PauseIcon, PlayIcon, SpeakerMuteIcon, VolumeDownIcon, VolumeUpIcon } from "@fluentui/react-northstar";
2+
import { initializeIcons } from '@uifabric/icons';
3+
initializeIcons();
4+
import * as React from "react";
5+
import styles from './ModernAudio.module.scss';
6+
import * as strings from 'ControlStrings';
7+
import { IModernAudioProps } from "./IModernAudioProps";
8+
import { IconButton } from "office-ui-fabric-react";
9+
import { ModernAudioLabelPosition } from './ModernAudioLabelPosition';
10+
11+
export const ModernAudio: React.FC<IModernAudioProps> = (props: IModernAudioProps) => {
12+
const audioComp = React.useRef<HTMLAudioElement>(new Audio(props.audioUrl));
13+
const [muted, setMuted] = React.useState<boolean>(false);
14+
const [playing, setPlaying] = React.useState<boolean>(false);
15+
16+
React.useEffect(() => {
17+
audioComp.current.onended = () => { setPlaying(false); };
18+
}, []);
19+
20+
const playAudio = () => {
21+
setPlaying(true);
22+
audioComp.current.play();
23+
};
24+
const pauseAudio = () => {
25+
setPlaying(false);
26+
audioComp.current.pause();
27+
};
28+
const incVolume = () => {
29+
if (audioComp.current.volume <= 0.9) {
30+
audioComp.current.volume += 0.1;
31+
}
32+
else {
33+
audioComp.current.volume = 1;
34+
}
35+
if (audioComp.current.muted) {
36+
audioComp.current.muted = false;
37+
setMuted(false);
38+
}
39+
};
40+
const decVolume = () => {
41+
audioComp.current.volume -= 0.1;
42+
if (audioComp.current.volume < 0.1) {
43+
audioComp.current.volume = 0;
44+
audioComp.current.muted = true;
45+
setMuted(true);
46+
}
47+
};
48+
const muteAudio = () => {
49+
audioComp.current.muted = !muted;
50+
setMuted(!muted);
51+
};
52+
return (
53+
<div className={styles.modernAudio}>
54+
{props.labelPosition === ModernAudioLabelPosition.TopLeft &&
55+
props.label !== "" &&
56+
<div><label>{props.label}</label></div>}
57+
{props.labelPosition === ModernAudioLabelPosition.TopCenter &&
58+
props.label !== "" &&
59+
<div style={{textAlign: "center"}}><label>{props.label}</label></div>}
60+
<div className={styles.audioPanel}>
61+
{props.audioUrl !== "" && <audio ref={audioComp} src={props.audioUrl}></audio>}
62+
{/* <PlayIcon className={styles.audioIcon} size={props.size} disabled={playing} onClick={playAudio} /> */}
63+
<IconButton iconProps={{ iconName: 'Play' }} className={styles.audioIcon} title={strings.ModernAudioPlay} disabled={playing} onClick={playAudio} />
64+
{/* <PauseIcon className={styles.audioIcon} size={props.size} disabled={!playing} onClick={pauseAudio} /> */}
65+
<IconButton iconProps={{ iconName: 'Pause' }} className={styles.audioIcon} title={strings.ModernAudioPause} disabled={!playing} onClick={pauseAudio} />
66+
{/* <VolumeUpIcon className={styles.audioIcon} size={props.size} title="Increase volume" onClick={incVolume} /> */}
67+
<IconButton iconProps={{ iconName: 'Volume2' }} className={styles.audioIcon} title={strings.ModernAudioIncVol} onClick={incVolume} />
68+
{/* <VolumeDownIcon className={styles.audioIcon} size={props.size} title="Decrease volume" disabled={muted} onClick={decVolume} /> */}
69+
<IconButton iconProps={{ iconName: 'Volume0' }} className={styles.audioIcon} title={strings.ModernAudioDecVol} disabled={muted} onClick={decVolume} />
70+
{/* <SpeakerMuteIcon className={styles.audioIcon} size={props.size} title="Mute" disabled={muted} onClick={muteAudio} /> */}
71+
<IconButton iconProps={{ iconName: 'VolumeDisabled' }} className={styles.audioIcon} title={strings.ModernAudioMute} disabled={muted} onClick={muteAudio} />
72+
</div>
73+
{props.labelPosition === ModernAudioLabelPosition.BottomLeft &&
74+
props.label !== "" &&
75+
<div><label>{props.label}</label></div>}
76+
{props.labelPosition === ModernAudioLabelPosition.BottomCenter &&
77+
props.label !== "" &&
78+
<div style={{textAlign: "center"}}><label>{props.label}</label></div>}
79+
</div>
80+
);
81+
};
82+
83+
ModernAudio.defaultProps = {
84+
label: "",
85+
labelPosition: ModernAudioLabelPosition.TopLeft
86+
};

‎src/controls/modernAudio/ModernAudioLabelPosition.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export enum ModernAudioLabelPosition {
2+
TopLeft = 1,
3+
TopCenter,
4+
BottomLeft,
5+
BottomCenter
6+
}

‎src/controls/modernAudio/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export * from './IModernAudioProps';
2+
export * from './ModernAudio';
3+
export * from './ModernAudioLabelPosition';

‎src/loc/de-de.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -378,6 +378,11 @@ define([], () => {
378378
"ModernTaxonomyPickerRemoveButtonText": "Löschen",
379379
"ModernTaxonomyPickerPanelCloseButtonText": "Schließen",
380380
"ModernTaxonomyPickerNoResultsFound": "Keine Ergebnisse gefunden",
381-
"ModernTaxonomyPickerSuggestionInLabel": "In"
381+
"ModernTaxonomyPickerSuggestionInLabel": "In",
382+
"ModernAudioPlay": "Abspielen",
383+
"ModernAudioPause": "Pause",
384+
"ModernAudioIncVol": "Lauter",
385+
"ModernAudioDecVol": "Leiser",
386+
"ModernAudioMute": "Ton aus"
382387
};
383388
});

0 commit comments

Comments
 (0)