lbry-desktop/ui/component/viewers/videoViewer/index.js
saltrafael 64cbd4ae8d
Expanded Playback and List controls (#6921)
* Dont show countdown on Lists

* Add Repeat icon

* Add Shuffle icon

* Add Replay Icon

* Add Replay Option to autoplayCountdown

* Add Loop Control for Lists

* Add Shuffle control for Lists

* Improve View List Link and Fetch action

* Add Play Button to List page

* Add Shuffle Play Option on List Page and Menus

* Fix Modal Remove Collection I18n

* CSS: Fix Large list titles

* Fix List playback on Floating Player

* Add Theater Mode to its own class and fix bar text display

* Add Play Next VJS component

* Add Play Next Button

* Add Play Previous VJS Component

* Add Play Previous Button

* Add Autoplay Next Button

* Add separate control for autoplay next in list

* Bump redux

* Update CHANGELOG.md
2021-09-02 16:05:32 -04:00

85 lines
4 KiB
JavaScript

import { connect } from 'react-redux';
import {
makeSelectClaimForUri,
makeSelectFileInfoForUri,
makeSelectThumbnailForUri,
SETTINGS,
COLLECTIONS_CONSTS,
makeSelectNextUrlForCollectionAndUrl,
makeSelectPreviousUrlForCollectionAndUrl,
} from 'lbry-redux';
import { doChangeVolume, doChangeMute, doAnalyticsView, doAnalyticsBuffer } from 'redux/actions/app';
import { selectVolume, selectMute } from 'redux/selectors/app';
import { savePosition, clearPosition, doPlayUri, doSetPlayingUri } from 'redux/actions/content';
import {
makeSelectContentPositionForUri,
makeSelectIsPlayerFloating,
makeSelectNextUnplayedRecommended,
selectPlayingUri,
} from 'redux/selectors/content';
import VideoViewer from './view';
import { withRouter } from 'react-router';
import { doClaimEligiblePurchaseRewards } from 'redux/actions/rewards';
import { selectDaemonSettings, makeSelectClientSetting, selectHomepageData } from 'redux/selectors/settings';
import { toggleVideoTheaterMode, toggleAutoplayNext, doSetClientSetting } from 'redux/actions/settings';
import { selectUserVerifiedEmail, selectUser } from 'redux/selectors/user';
const select = (state, props) => {
const { search } = props.location;
const urlParams = new URLSearchParams(search);
const autoplay = urlParams.get('autoplay');
const uri = props.uri;
// TODO: eventually this should be received from DB and not local state (https://github.com/lbryio/lbry-desktop/issues/6796)
const position = urlParams.get('t') !== null ? urlParams.get('t') : makeSelectContentPositionForUri(uri)(state);
const userId = selectUser(state) && selectUser(state).id;
const playingUri = selectPlayingUri(state);
const collectionId = urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID) || (playingUri && playingUri.collectionId);
let nextRecommendedUri;
let previousListUri;
if (collectionId) {
nextRecommendedUri = makeSelectNextUrlForCollectionAndUrl(collectionId, uri)(state);
previousListUri = makeSelectPreviousUrlForCollectionAndUrl(collectionId, uri)(state);
} else {
nextRecommendedUri = makeSelectNextUnplayedRecommended(uri)(state);
}
return {
autoplayIfEmbedded: Boolean(autoplay),
autoplayMedia: Boolean(makeSelectClientSetting(SETTINGS.AUTOPLAY_MEDIA)(state)),
autoplayNext: Boolean(makeSelectClientSetting(SETTINGS.AUTOPLAY_NEXT)(state)),
volume: selectVolume(state),
muted: selectMute(state),
videoPlaybackRate: makeSelectClientSetting(SETTINGS.VIDEO_PLAYBACK_RATE)(state),
position: position,
hasFileInfo: Boolean(makeSelectFileInfoForUri(uri)(state)),
thumbnail: makeSelectThumbnailForUri(uri)(state),
claim: makeSelectClaimForUri(uri)(state),
homepageData: selectHomepageData(state),
authenticated: selectUserVerifiedEmail(state),
userId: userId,
shareTelemetry: IS_WEB || selectDaemonSettings(state).share_usage_data,
isFloating: makeSelectIsPlayerFloating(props.location)(state),
collectionId,
nextRecommendedUri,
previousListUri,
videoTheaterMode: makeSelectClientSetting(SETTINGS.VIDEO_THEATER_MODE)(state),
};
};
const perform = (dispatch) => ({
changeVolume: (volume) => dispatch(doChangeVolume(volume)),
savePosition: (uri, position) => dispatch(savePosition(uri, position)),
clearPosition: (uri) => dispatch(clearPosition(uri)),
changeMute: (muted) => dispatch(doChangeMute(muted)),
doAnalyticsView: (uri, timeToStart) => dispatch(doAnalyticsView(uri, timeToStart)),
doAnalyticsBuffer: (uri, bufferData) => dispatch(doAnalyticsBuffer(uri, bufferData)),
claimRewards: () => dispatch(doClaimEligiblePurchaseRewards()),
toggleVideoTheaterMode: () => dispatch(toggleVideoTheaterMode()),
toggleAutoplayNext: () => dispatch(toggleAutoplayNext()),
setVideoPlaybackRate: (rate) => dispatch(doSetClientSetting(SETTINGS.VIDEO_PLAYBACK_RATE, rate)),
doPlayUri: (uri) => dispatch(doPlayUri(uri)),
doSetPlayingUri: (uri, collectionId) => dispatch(doSetPlayingUri({ uri, collectionId })),
});
export default withRouter(connect(select, perform)(VideoViewer));