("h3.status");
+
+ if (statusHeader) {
+ // Refer to above msw for the mocked response
+ statusHeader.innerHTML = response.status.toString();
+ }
+
+ videomailClient.replay(videomail, "viewVideo");
+
+ const startOverButton = document.getElementById("startOver");
+
+ if (startOverButton) {
+ startOverButton.onclick = function () {
+ videomailClient.startOver({ keepHidden: writingOption?.checked });
+ // Attach again as it has been removed
+ videomailClient.on("SUBMITTED", onSubmitted);
+ };
+ }
+ };
+
+ videomailClient.on("SUBMITTED", onSubmitted);
+
+ videomailClient.build();
+ },
+};
+
+// This records and submit a video, without any email addresses at all
+//
+// It is very similar to the contact_form.html example with the exception that it does
+// not submit any form data nor won't trigger an email being sent on the server.
+//
+// In the POST response you'll get data about the newly generated videomail,
+// i.E. its ID. It is up to you how to process it further.
+export const VideoSubmissionOnly: Story = {
+ args: {
+ enablePause: false,
+ video: {
+ limitSeconds: 80,
+ width: 640,
+ height: 340,
+ countdown: false,
+ },
+ selectors: {
+ containerId: "videomail3",
+ },
+ },
+ render: () => `
+
+
+
+
Permalink to view online
+
Permalink to WebM video
+
Permalink to MP4 video
+
+
+
`,
+ play: ({ args }) => {
+ const videomailClient = new VideomailClient(args);
+
+ function setAttribute(videomail: Videomail, name: string) {
+ if (videomail[name]) {
+ const element = document.querySelector(`a.${name}`);
+
+ if (element) {
+ element.innerHTML = videomail[name];
+ element.setAttribute("href", videomail[name]);
+
+ if (element.parentElement) {
+ element.parentElement.style.display = "block";
+ }
+ }
+ }
+ }
+
+ const onSubmitted = ({ videomail }: SubmittedParams) => {
+ setAttribute(videomail, "url");
+ setAttribute(videomail, "webm");
+ setAttribute(videomail, "mp4");
+
+ videomailClient.replay(videomail, "viewVideo");
+
+ const startOverButton = document.getElementById("startOver");
+
+ if (startOverButton) {
+ startOverButton.onclick = function () {
+ videomailClient.startOver();
+ // Attach again as it has been removed
+ videomailClient.on("SUBMITTED", onSubmitted);
+ };
+ }
+ };
+
+ videomailClient.on("SUBMITTED", onSubmitted);
+
+ videomailClient.show();
+ },
+};
+
+// Another form example where the videomail input itself is optional and takes
+// full width of the parent container (stretch = true)
+export const Stretch: Story = {
+ args: {
+ video: { limitSeconds: 120, width: 320, countdown: false, stretch: true },
+ enableAutoValidation: false,
+ selectors: {
+ submitButtonSelector: 'body input[value="Submit"]',
+ formId: "optionalVideomailForm",
+ containerId: "videomail4",
+ },
+ },
+ render: () => `
+
+
+
+
+
+ `,
+ play: ({ args }) => {
+ const videomailClient = new VideomailClient(args);
+
+ const onSubmitted = ({ videomail, response }: SubmittedParams) => {
+ const statusHeader = document.querySelector("h3.status");
+
+ if (statusHeader) {
+ statusHeader.innerHTML = response.status.toString();
+ }
+
+ videomailClient.replay(videomail, "viewVideo");
+
+ const startOverButton = document.getElementById("startOver");
+
+ if (startOverButton) {
+ startOverButton.onclick = function () {
+ videomailClient.startOver();
+ // Attach again as it has been removed
+ videomailClient.on("SUBMITTED", onSubmitted);
+ };
+ }
+ };
+
+ videomailClient.on("SUBMITTED", onSubmitted);
+
+ videomailClient.show();
+ },
+};
+
+// Another form example with optional CC and BCC input fields for email addresses
+export const WithCCAndBCC: Story = {
+ args: {
+ video: { limitSeconds: 120, width: 320, countdown: false },
+ selectors: {
+ submitButtonSelector: 'body input[value="Submit"]',
+ formId: "videomailFormWithCcAndBcc",
+ containerId: "videomail5",
+ },
+ },
+ render: () => `
+
+
+ `,
+ play: ({ args }) => {
+ const videomailClient = new VideomailClient(args);
+
+ const onSubmitted = ({ videomail, response }: SubmittedParams) => {
+ const statusHeader = document.querySelector("h3.status");
+
+ if (statusHeader) {
+ statusHeader.innerHTML = response.status.toString();
+ }
+
videomailClient.replay(videomail, "viewVideo");
const startOverButton = document.getElementById("startOver");
@@ -63,15 +479,13 @@ export const DirectSubmission: Story = {
if (startOverButton) {
startOverButton.onclick = function () {
videomailClient.startOver();
+ // Attach again as it has been removed
+ videomailClient.on("SUBMITTED", onSubmitted);
};
}
};
- // @ts-ignore Fix later
- videomailClient.on(
- videomailClient.events.SUBMITTED,
- onSubmitted.bind(videomailClient),
- );
+ videomailClient.on("SUBMITTED", onSubmitted);
videomailClient.show();
},
diff --git a/src/stories/Player.stories.ts b/src/stories/Player.stories.ts
index 1fff173d..0eab5115 100644
--- a/src/stories/Player.stories.ts
+++ b/src/stories/Player.stories.ts
@@ -33,8 +33,7 @@ export const PlayVideomailWithForm: Story = {
keyInputName: "key",
},
},
- render: () => {
- return `
-
-
- Contact Form Integration
- A JSON based contact form embracing Sign Language!
- With the `submitWithVideomail` option, all videomail data is posted as well.
-
- This example does not work on Netlify. If you clone and run that locally or on your
- own server it works fine ;)
-
-
-
-
-
-
-
-
-
-
-
-
-
-