-
Notifications
You must be signed in to change notification settings - Fork 141
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(player): add live stream support to default layout
- Loading branch information
Showing
23 changed files
with
372 additions
and
188 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
46 changes: 46 additions & 0 deletions
46
packages/react/src/components/layouts/default/audio-layout-large.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import * as React from 'react'; | ||
|
|
||
| import { Captions } from '../../ui/captions'; | ||
| import * as Controls from '../../ui/controls'; | ||
| import { DefaultAudioMenus } from './audio-menus'; | ||
| import { | ||
| DefaultCaptionButton, | ||
| DefaultChapterTitle, | ||
| DefaultMuteButton, | ||
| DefaultPlayButton, | ||
| DefaultSeekButton, | ||
| DefaultTimeInfo, | ||
| DefaultTimeSlider, | ||
| DefaultVolumeSlider, | ||
| } from './shared-layout'; | ||
|
|
||
| /* ------------------------------------------------------------------------------------------------- | ||
| * DefaultAudioLayoutLarge | ||
| * -----------------------------------------------------------------------------------------------*/ | ||
|
|
||
| function DefaultAudioLayoutLarge() { | ||
| return ( | ||
| <> | ||
| <Captions className="vds-captions" /> | ||
| <Controls.Root className="vds-controls"> | ||
| <Controls.Group className="vds-controls-group"> | ||
| <DefaultTimeSlider /> | ||
| </Controls.Group> | ||
| <Controls.Group className="vds-controls-group"> | ||
| <DefaultSeekButton seconds={-10} tooltip="top start" /> | ||
| <DefaultPlayButton tooltip="top center" /> | ||
| <DefaultSeekButton seconds={10} tooltip="top center" /> | ||
| <DefaultTimeInfo /> | ||
| <DefaultChapterTitle /> | ||
| <DefaultMuteButton tooltip="top center" /> | ||
| <DefaultVolumeSlider /> | ||
| <DefaultCaptionButton tooltip="top center" /> | ||
| <DefaultAudioMenus /> | ||
| </Controls.Group> | ||
| </Controls.Root> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| DefaultAudioLayoutLarge.displayName = 'DefaultAudioLayoutLarge'; | ||
| export { DefaultAudioLayoutLarge }; |
96 changes: 96 additions & 0 deletions
96
packages/react/src/components/layouts/default/audio-layout-small.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| import * as React from 'react'; | ||
|
|
||
| import { useMediaState } from '../../../hooks/use-media-state'; | ||
| import { Captions } from '../../ui/captions'; | ||
| import * as Controls from '../../ui/controls'; | ||
| import { Time } from '../../ui/time'; | ||
| import { DefaultAudioMenus } from './audio-menus'; | ||
| import { | ||
| DefaultCaptionButton, | ||
| DefaultChapterTitle, | ||
| DefaultLiveButton, | ||
| DefaultMuteButton, | ||
| DefaultPlayButton, | ||
| DefaultSeekButton, | ||
| DefaultTimeSlider, | ||
| } from './shared-layout'; | ||
|
|
||
| /* ------------------------------------------------------------------------------------------------- | ||
| * DefaultAudioLayoutSmall | ||
| * -----------------------------------------------------------------------------------------------*/ | ||
|
|
||
| function DefaultAudioLayoutSmall() { | ||
| return ( | ||
| <> | ||
| <Captions className="vds-captions" /> | ||
| <Controls.Root className="vds-controls"> | ||
| <Controls.Group className="vds-controls-group"> | ||
| <DefaultLivePlayButton /> | ||
| <DefaultMuteButton tooltip="top start" /> | ||
| <DefaultLiveButton /> | ||
| <DefaultChapterTitle /> | ||
| <DefaultCaptionButton tooltip="top center" /> | ||
| <DefaultAudioMenus /> | ||
| </Controls.Group> | ||
|
|
||
| <Controls.Group className="vds-controls-group"> | ||
| <DefaultTimeSlider /> | ||
| </Controls.Group> | ||
|
|
||
| <DefaultTimeControlsGroup /> | ||
| <DefaultBottomControlsGroup /> | ||
| </Controls.Root> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| DefaultAudioLayoutSmall.displayName = 'DefaultAudioLayoutSmall'; | ||
| export { DefaultAudioLayoutSmall }; | ||
|
|
||
| /* ------------------------------------------------------------------------------------------------- | ||
| * DefaultLivePlayButton | ||
| * -----------------------------------------------------------------------------------------------*/ | ||
|
|
||
| function DefaultLivePlayButton() { | ||
| const live = useMediaState('live'), | ||
| canSeek = useMediaState('canSeek'); | ||
| return live && !canSeek ? <DefaultPlayButton tooltip="top start" /> : null; | ||
| } | ||
|
|
||
| DefaultLivePlayButton.displayName = 'DefaultLivePlayButton'; | ||
|
|
||
| /* ------------------------------------------------------------------------------------------------- | ||
| * DefaultTimeControlsGroup | ||
| * -----------------------------------------------------------------------------------------------*/ | ||
|
|
||
| function DefaultTimeControlsGroup() { | ||
| const live = useMediaState('live'); | ||
| return !live ? ( | ||
| <Controls.Group className="vds-controls-group"> | ||
| <Time className="vds-time" type="current" /> | ||
| <div className="vds-controls-spacer" /> | ||
| <Time className="vds-time" type="duration" /> | ||
| </Controls.Group> | ||
| ) : null; | ||
| } | ||
|
|
||
| DefaultTimeControlsGroup.displayName = 'DefaultTimeControlsGroup'; | ||
|
|
||
| /* ------------------------------------------------------------------------------------------------- | ||
| * DefaultBottomControlsGroup | ||
| * -----------------------------------------------------------------------------------------------*/ | ||
|
|
||
| function DefaultBottomControlsGroup() { | ||
| const canSeek = useMediaState('canSeek'); | ||
| return canSeek ? ( | ||
| <Controls.Group className="vds-controls-group"> | ||
| <div className="vds-controls-spacer" /> | ||
| <DefaultSeekButton seconds={-10} tooltip="top center" /> | ||
| <DefaultPlayButton tooltip="top center" /> | ||
| <DefaultSeekButton seconds={10} tooltip="top center" /> | ||
| <div className="vds-controls-spacer" /> | ||
| </Controls.Group> | ||
| ) : null; | ||
| } | ||
|
|
||
| DefaultBottomControlsGroup.displayName = 'DefaultBottomControlsGroup'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 22 additions & 0 deletions
22
packages/react/src/components/layouts/default/audio-menus.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import * as React from 'react'; | ||
|
|
||
| import { DefaultLayoutContext } from './context'; | ||
| import { DefaultChaptersMenu, DefaultSettingsMenu } from './shared-layout'; | ||
|
|
||
| /* ------------------------------------------------------------------------------------------------- | ||
| * DefaultAudioMenus | ||
| * -----------------------------------------------------------------------------------------------*/ | ||
|
|
||
| function DefaultAudioMenus() { | ||
| const { isSmallLayout, noModal } = React.useContext(DefaultLayoutContext), | ||
| placement = noModal ? 'top end' : !isSmallLayout ? 'top end' : null; | ||
| return ( | ||
| <> | ||
| <DefaultChaptersMenu tooltip="top" placement={placement} portalClass="vds-audio-layout" /> | ||
| <DefaultSettingsMenu tooltip="top end" placement={placement} portalClass="vds-audio-layout" /> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| DefaultAudioMenus.displayName = 'DefaultAudioMenus'; | ||
| export { DefaultAudioMenus }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.