diff --git a/src/components/FlowPlayer/FlowPlayer.internal.tsx b/src/components/FlowPlayer/FlowPlayer.internal.tsx index b9de6e24..7f21532d 100644 --- a/src/components/FlowPlayer/FlowPlayer.internal.tsx +++ b/src/components/FlowPlayer/FlowPlayer.internal.tsx @@ -54,6 +54,7 @@ const FlowPlayerInternal: FunctionComponent = ({ speed, dataPlayerId, autoplay, + muted, plugins = ALL_FLOWPLAYER_PLUGINS, start, end, @@ -351,6 +352,7 @@ const FlowPlayerInternal: FunctionComponent = ({ // CONFIGURATION autoplay: autoplay ? flowplayerWithPlugins.autoplay.ON : flowplayerWithPlugins.autoplay.OFF, + muted, multiplay: false, ui: ui || diff --git a/src/components/FlowPlayer/FlowPlayer.mock.tsx b/src/components/FlowPlayer/FlowPlayer.mock.tsx index eb90cea8..e8363c38 100644 --- a/src/components/FlowPlayer/FlowPlayer.mock.tsx +++ b/src/components/FlowPlayer/FlowPlayer.mock.tsx @@ -1,8 +1,11 @@ import { AvoContentTypeEnglish } from '@viaa/avo2-types'; import type { FlowPlayerProps, FlowplayerSourceList } from './FlowPlayer.types'; +const MOCK_VIDEO_SRC = + 'https://cdn.flowplayer.com/token:eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIwMTM3NDAyYi1jNDVjLTQ2ODUtODEwMy1hZTgyMDNlMmJlMjkiLCJuYmYiOjE3ODM1MDAzNjYsImlzcyI6Imh0dHBzOi8vd3d3LmZsb3dwbGF5ZXIuY29tIiwiZXhwIjoxNzgzNTg2NzY2LCJpYXQiOjE3ODM1MDAzNjZ9.GtS9ThnGVbtqgbkUc0-ECYQIEl_MIKKjkrvHRxa69pSIN2JAbGXcZPcbC1uFLAY02kdDYOq2HEzN0gtTyWjcQI3KFBGdiXNH5YppB0NoHcuAPciW73qMg1vNG8nMT8XkQxlBKg_NmPq_1DLPooMX9jBik4mF3Sd6eeEtqgSl0V8CZ9B3qGWxofjhD5wG6iteIJWmg_7cOOK3w3lUPMkIUyZp9exyJeLHgg7owYivmWu8j0DRohruoeiSe2em5Iy8dNAc3jv_HSWsrUsINexWZZ_tSkl6eoNFAcF-qOGnt8wQkonl8gELPnqAjGQUQra4urFZVNtukE0esyIBFsH__w6csiyMeWUGBQhBTHW7yK5Cby_Ph7s-vi_8AliYERX1zkhrkI3RpnJJ4YCSs2PRZj8mKE8u8z3wUKc5ECbxQfL1KgW07Ex380UvTwG_1VPZ7NJtX8K3gOMw6RYe2TAQHqbHm9Wlv5FtJIsk24t2IXZiJ8uvm28yHfiniuDVJ6tN6D6iy9xyhRUXxOEmR8o2fAnU950bqM5r9V0QqTP5OLzE2DQOZzp9YjUWwcTTbU0tFPQTzrOorbTCj0kPBWkBCkt5Yum3dPUs9tzBt_fbAu3EoojynF656DHga-l1nNiVDGj_jmVWC8Mz5bE4sTr2meziv1qH1rLgtSNTKtLLjY4/bacec074-242b-499f-9ca8-38e382b6e179/v-0137402b-c45c-4685-8103-ae8203e2be29_original.mp4'; + const MOCK_FLOW_PLAYER_PROPS: FlowPlayerProps = { - src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4', + src: MOCK_VIDEO_SRC, title: 'Title', autoplay: false, type: AvoContentTypeEnglish.VIDEO, @@ -43,7 +46,7 @@ export const MOCK_PLAYLIST_SOURCE: FlowplayerSourceList = { cuepoints: [{ startTime: 15, endTime: 17 }], }, { - src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4', + src: MOCK_VIDEO_SRC, title: 'Elephant dream', category: AvoContentTypeEnglish.VIDEO, provider: 'VRT', @@ -75,7 +78,7 @@ export const MOCK_PLAYLIST_SOURCE: FlowplayerSourceList = { cuepoints: [{ startTime: 5, endTime: 25 }], }, { - src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4', + src: MOCK_VIDEO_SRC, title: 'Elephant dream 2', category: AvoContentTypeEnglish.VIDEO, provider: 'VRT', diff --git a/src/components/FlowPlayer/FlowPlayer.stories.tsx b/src/components/FlowPlayer/FlowPlayer.stories.tsx index 31cadb13..c1a2baf6 100644 --- a/src/components/FlowPlayer/FlowPlayer.stories.tsx +++ b/src/components/FlowPlayer/FlowPlayer.stories.tsx @@ -140,6 +140,15 @@ export const AudioWithFallbackPeak: Story = { render: Template, }; +export const MutedAutoplay: Story = { + args: { + ...MOCK_FLOW_PLAYER_PROPS_FULL, + autoplay: true, + muted: true, + }, + render: Template, +}; + export const HlsSourceUrl: Story = { args: { ...MOCK_FLOW_PLAYER_PROPS_FULL, diff --git a/src/components/FlowPlayer/FlowPlayer.types.ts b/src/components/FlowPlayer/FlowPlayer.types.ts index 29f6171b..1478e305 100644 --- a/src/components/FlowPlayer/FlowPlayer.types.ts +++ b/src/components/FlowPlayer/FlowPlayer.types.ts @@ -109,6 +109,7 @@ export interface FlowPlayerProps extends DefaultComponentProps { token?: string; dataPlayerId?: string; autoplay?: boolean; + muted?: boolean; pause?: boolean; fullscreen?: boolean; onPlay?: (src: string) => void;