121 lines
2.9 KiB
TypeScript
121 lines
2.9 KiB
TypeScript
import React, { Component } from 'react';
|
|
import { connect } from 'react-redux';
|
|
|
|
import { IReduxState } from '../../../app/types';
|
|
import { getLocalParticipant } from '../../../base/participants/functions';
|
|
import { SOURCE_TYPES } from '../../constants';
|
|
import { isSharingStatus } from '../../functions';
|
|
import { SourceType } from '../../types';
|
|
|
|
import DirectAudioManager from './DirectAudioManager';
|
|
import EmbedPlayerManager from './EmbedPlayerManager';
|
|
import YouTubeMusicManager from './YouTubeMusicManager';
|
|
|
|
interface IProps {
|
|
|
|
/**
|
|
* Whether music is currently being shared.
|
|
*/
|
|
isMusicShared: boolean;
|
|
|
|
/**
|
|
* Whether the local participant is the owner.
|
|
*/
|
|
isOwner: boolean;
|
|
|
|
/**
|
|
* The music URL.
|
|
*/
|
|
musicUrl?: string;
|
|
|
|
/**
|
|
* The source type.
|
|
*/
|
|
sourceType?: SourceType;
|
|
}
|
|
|
|
/**
|
|
* Embedded source types that use iframe players.
|
|
*/
|
|
const EMBED_SOURCE_TYPES: readonly string[] = [
|
|
SOURCE_TYPES.VIMEO,
|
|
SOURCE_TYPES.SOUNDCLOUD,
|
|
SOURCE_TYPES.SPOTIFY,
|
|
SOURCE_TYPES.DAILYMOTION,
|
|
SOURCE_TYPES.TWITCH
|
|
];
|
|
|
|
/**
|
|
* Component that manages and renders the appropriate music player.
|
|
*/
|
|
class SharedMusicPlayer extends Component<IProps> {
|
|
|
|
/**
|
|
* Retrieves the manager to be used for playing the shared music.
|
|
*
|
|
* @returns {React.ReactNode}
|
|
*/
|
|
getManager() {
|
|
const { musicUrl, sourceType } = this.props;
|
|
|
|
if (!musicUrl) {
|
|
return null;
|
|
}
|
|
|
|
// YouTube has its own dedicated player
|
|
if (sourceType === SOURCE_TYPES.YOUTUBE) {
|
|
return <YouTubeMusicManager musicId = { musicUrl } />;
|
|
}
|
|
|
|
// Vimeo, SoundCloud, Spotify, Dailymotion, Twitch use iframe embeds
|
|
if (sourceType && EMBED_SOURCE_TYPES.includes(sourceType)) {
|
|
return <EmbedPlayerManager musicId = { musicUrl } />;
|
|
}
|
|
|
|
// Direct audio/video files use HTML5 audio element
|
|
return <DirectAudioManager musicId = { musicUrl } />;
|
|
}
|
|
|
|
/**
|
|
* Implements React's {@link Component#render()}.
|
|
*
|
|
* @inheritdoc
|
|
* @returns {React.ReactNode}
|
|
*/
|
|
override render() {
|
|
const { isMusicShared } = this.props;
|
|
|
|
if (!isMusicShared) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div id = 'sharedMusic'>
|
|
{this.getManager()}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Maps (parts of) the Redux state to the associated props.
|
|
*
|
|
* @param {Object} state - The Redux state.
|
|
* @private
|
|
* @returns {IProps}
|
|
*/
|
|
function _mapStateToProps(state: IReduxState) {
|
|
const { musicUrl, ownerId, status, sourceType } = state['features/shared-music'];
|
|
const localParticipant = getLocalParticipant(state);
|
|
const isMusicShared = isSharingStatus(status ?? '');
|
|
|
|
return {
|
|
isMusicShared,
|
|
isOwner: ownerId === localParticipant?.id,
|
|
musicUrl,
|
|
sourceType
|
|
};
|
|
}
|
|
|
|
export default connect(_mapStateToProps)(SharedMusicPlayer);
|