+ {props.labelPosition === ModernAudioLabelPosition.TopLeft &&
+ props.label !== "" &&
+
}
+ {props.labelPosition === ModernAudioLabelPosition.TopCenter &&
+ props.label !== "" &&
+
}
+
+ {props.audioUrl !== "" &&
}
+
+
+
+
+
+
+ {props.labelPosition === ModernAudioLabelPosition.BottomLeft &&
+ props.label !== "" &&
+
}
+ {props.labelPosition === ModernAudioLabelPosition.BottomCenter &&
+ props.label !== "" &&
+
}
+
+ );
+};
+
+ModernAudio.defaultProps = {
+ label: "",
+ labelPosition: ModernAudioLabelPosition.TopLeft
+};
diff --git a/src/controls/modernAudio/ModernAudioLabelPosition.ts b/src/controls/modernAudio/ModernAudioLabelPosition.ts
new file mode 100644
index 000000000..ae7198dde
--- /dev/null
+++ b/src/controls/modernAudio/ModernAudioLabelPosition.ts
@@ -0,0 +1,6 @@
+export enum ModernAudioLabelPosition {
+ TopLeft = 1,
+ TopCenter,
+ BottomLeft,
+ BottomCenter
+}
\ No newline at end of file
diff --git a/src/controls/modernAudio/index.ts b/src/controls/modernAudio/index.ts
new file mode 100644
index 000000000..e613dd841
--- /dev/null
+++ b/src/controls/modernAudio/index.ts
@@ -0,0 +1,3 @@
+export * from './IModernAudioProps';
+export * from './ModernAudio';
+export * from './ModernAudioLabelPosition';
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index 6c280d078..c5999c33f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -40,3 +40,4 @@ export * from './DynamicForm';
export * from './Carousel';
export * from './ModernTaxonomyPicker';
export * from './LivePersona';
+export * from './ModernAudio';
\ No newline at end of file
diff --git a/src/loc/de-de.ts b/src/loc/de-de.ts
index 8134464de..f7c60a51f 100644
--- a/src/loc/de-de.ts
+++ b/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"
};
});
diff --git a/src/loc/en-us.ts b/src/loc/en-us.ts
index bb5fbbe5a..98cb66466 100644
--- a/src/loc/en-us.ts
+++ b/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"
};
});
diff --git a/src/loc/mystrings.d.ts b/src/loc/mystrings.d.ts
index 4383b1a72..9f7ecf2bf 100644
--- a/src/loc/mystrings.d.ts
+++ b/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 {
diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
index 090a99426..0190c26d1 100644
--- a/src/webparts/controlsTest/components/ControlsTest.tsx
+++ b/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