diff --git a/src/Video/Video.tsx b/src/Video/Video.tsx new file mode 100644 index 000000000..c8102a77c --- /dev/null +++ b/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; + /** Oggetto contenente la nuova mappatura per le classi CSS. */ + cssModule?: CSSModule; + testId?: string; +} + +export const Video: FC = ({ 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 ( +
+ +
+
+

+ +

+
+
+ {label} +
+
+
+
+
+ ); +}; diff --git a/src/index.ts b/src/index.ts index 196137072..cc7ea5d98 100644 --- a/src/index.ts +++ b/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, diff --git a/stories/Components/Video.stories.tsx b/stories/Components/Video.stories.tsx new file mode 100644 index 000000000..7d3746dff --- /dev/null +++ b/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 = { + title: 'Documentazione/Componenti/Video', + component: Video, + parameters: { + docs: { + canvas: { sourceState: 'none' } + } + } +}; + +export default meta; + +type Story = StoryObj; + +const EsempiVideo = () => { + return ( +
+ +
+ ); +}; + +export const Esempi: Story = { + render: () => +}; + diff --git a/stories/Documentation/Video.mdx b/stories/Documentation/Video.mdx new file mode 100644 index 000000000..fdcc582d9 --- /dev/null +++ b/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'; + + + +# VIDEO + + + +#### Source + +```tsx + +``` + + + +## More + +Fare riferimento alla [documentazione Bootstrap per il video](https://italia.github.io/bootstrap-italia/docs/componenti/video-player/)