feat: video component

src/Video/Video.tsx

@@ -0,0 +1,55 @@
+import React, { ElementType, FC, ReactNode, useEffect } from 'react';
+
+import { CSSModule } from 'reactstrap/types/lib/utils';
+import { InputProps } from '../Input/Input';
+
+import { VideoPlayer } from 'bootstrap-italia'
+
+export interface VideoProps extends InputProps {
+  /** Label da mostrare per il componente */
+  label: string | ReactNode;
+  /** Dimensioni ammissibili per il componente */
+  bsSize?: 'lg' | 'sm';
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Da utilizzare per impostare un riferimento all'elemento DOM */
+  innerRef?: React.Ref<HTMLInputElement>;
+  /** Oggetto contenente la nuova mappatura per le classi CSS. */
+  cssModule?: CSSModule;
+  testId?: string;
+}
+
+export const Video: FC<VideoProps> = ({ label, testId }) => {
+  let vpInstance:VideoPlayer;
+  useEffect(() => {
+    const el = document.querySelector('video');
+    if (el) {
+      vpInstance = new VideoPlayer(el);
+      setTimeout(() => {
+        console.log(vpInstance.player.log) // Con .player puoi usare play(), stop() ecc ..
+      }, 3000);
+    }
+  });
+  return (
+    <div className="row" data-testid={testId}>
+      <video controls data-bs-video>
+        <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
+        <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm" />
+      </video>
+      <div className="vjs-transcription accordion">
+        <div className="accordion-item">
+          <h2 className="accordion-header " id="transcription-head1">
+            <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#transcription1" aria-expanded="true" aria-controls="transcription">
+              {label}
+            </button>
+          </h2>
+          <div id="transcription1" className="accordion-collapse collapse" role="region" aria-labelledby="transcription-head1">
+            <div className="accordion-body">
+              {label}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

src/index.ts

@@ -143,6 +143,7 @@ export { Toggle } from './Toggle/Toggle';
 export { Toolbar } from './Toolbar/Toolbar';
 export { ToolbarDividerItem } from './Toolbar/ToolbarDividerItem';
 export { ToolbarItem } from './Toolbar/ToolbarItem';
+export { Video } from './Video/Video'
 
 // Types
 export type { AccordionProps } from './Accordion/Accordion';
@@ -248,6 +249,7 @@ export type { TimelineProps } from './Timeline/TimelineWrapper';
 export type { ToggleProps } from './Toggle/Toggle';
 export type { ToolbarProps } from './Toolbar/Toolbar';
 export type { ToolbarItemBadge, ToolbarItemProps } from './Toolbar/ToolbarItem';
+export type { VideoProps } from "./Video/Video"
 
 export type {
   BreadcrumbItemProps,

stories/Components/Video.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { Video } from '../../src';
+
+const meta: Meta<typeof Video> = {
+  title: 'Documentazione/Componenti/Video',
+  component: Video,
+  parameters: {
+    docs: {
+      canvas: { sourceState: 'none' }
+    }
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Video>;
+
+const EsempiVideo = () => {
+  return (
+    <div className='bd-example tooltip-demo'>
+      <Video label="boh"></Video>
+    </div>
+  );
+};
+
+export const Esempi: Story = {
+  render: () => <EsempiVideo />
+};
+

stories/Documentation/Video.mdx

@@ -0,0 +1,22 @@
+import { Canvas, Controls, Meta, Story } from '@storybook/blocks';
+import { Code } from '@storybook/components';
+import { Callout, CalloutText, CalloutTitle } from '../../src';
+import * as VideoStories from '../Components/Video.stories';
+
+<Meta of={VideoStories} />
+
+# VIDEO
+
+<Canvas of={VideoStories.Esempi} />
+
+#### Source
+
+```tsx
+
+```
+
+
+
+## More
+
+Fare riferimento alla [documentazione Bootstrap per il video](https://italia.github.io/bootstrap-italia/docs/componenti/video-player/)