From 9d2241df272686b4153e719599c19f693f57fa7d Mon Sep 17 00:00:00 2001 From: jessop Date: Thu, 5 Sep 2019 20:26:03 -0400 Subject: [PATCH 1/2] autoplay first related --- src/ui/component/fileRender/index.js | 5 +++- src/ui/component/fileRender/view.jsx | 19 ++++++++++-- src/ui/component/viewers/videoViewer/index.js | 3 +- src/ui/component/viewers/videoViewer/view.jsx | 30 ++++++++++++++++++- 4 files changed, 51 insertions(+), 6 deletions(-) diff --git a/src/ui/component/fileRender/index.js b/src/ui/component/fileRender/index.js index d61441e01..5d007bc0f 100644 --- a/src/ui/component/fileRender/index.js +++ b/src/ui/component/fileRender/index.js @@ -7,8 +7,9 @@ import { makeSelectMediaTypeForUri, makeSelectDownloadPathForUri, makeSelectFileNameForUri, + makeSelectFirstRecommendedFileForUri, } from 'lbry-redux'; -import { THEME } from 'constants/settings'; +import { THEME, AUTOPLAY } from 'constants/settings'; import { makeSelectClientSetting } from 'redux/selectors/settings'; import FileRender from './view'; @@ -21,6 +22,8 @@ const select = (state, props) => ({ downloadPath: makeSelectDownloadPathForUri(props.uri)(state), fileName: makeSelectFileNameForUri(props.uri)(state), streamingUrl: makeSelectStreamingUrlForUri(props.uri)(state), + nextFileToPlay: makeSelectFirstRecommendedFileForUri(props.uri)(state), + autoplay: makeSelectClientSetting(AUTOPLAY)(state), }); export default connect(select)(FileRender); diff --git a/src/ui/component/fileRender/view.jsx b/src/ui/component/fileRender/view.jsx index 024cbfb6f..9c8dfa498 100644 --- a/src/ui/component/fileRender/view.jsx +++ b/src/ui/component/fileRender/view.jsx @@ -6,6 +6,8 @@ import VideoViewer from 'component/viewers/videoViewer'; import ImageViewer from 'component/viewers/imageViewer'; import AppViewer from 'component/viewers/appViewer'; import Button from 'component/button'; +import { withRouter } from 'react-router-dom'; +import { formatLbryUriForWeb } from 'util/uri'; // @if TARGET='web' import { generateStreamUrl } from 'util/lbrytv'; // @endif @@ -67,6 +69,9 @@ type Props = { currentTheme: string, downloadPath: string, fileName: string, + autoplay: boolean, + nextFileToPlay: string, + history: { push: string => void }, }; class FileRender extends React.PureComponent { @@ -74,6 +79,7 @@ class FileRender extends React.PureComponent { super(props); (this: any).escapeListener = this.escapeListener.bind(this); + (this: any).onEndedCb = this.onEndedCb.bind(this); } componentDidMount() { @@ -98,6 +104,13 @@ class FileRender extends React.PureComponent { remote.getCurrentWindow().setFullScreen(false); } + onEndedCb() { + const { autoplay, nextFileToPlay, history } = this.props; + if (autoplay && nextFileToPlay) { + history.push(formatLbryUriForWeb(nextFileToPlay)); + } + } + renderViewer() { const { mediaType, currentTheme, claim, contentType, downloadPath, fileName, streamingUrl, uri } = this.props; const fileType = fileName && path.extname(fileName).substring(1); @@ -117,8 +130,8 @@ class FileRender extends React.PureComponent { application: , // @endif - video: , - audio: , + video: , + audio: , image: , // Add routes to viewer... }; @@ -201,4 +214,4 @@ class FileRender extends React.PureComponent { } } -export default FileRender; +export default withRouter(FileRender); diff --git a/src/ui/component/viewers/videoViewer/index.js b/src/ui/component/viewers/videoViewer/index.js index 0f84ca5a3..1238ee8a4 100644 --- a/src/ui/component/viewers/videoViewer/index.js +++ b/src/ui/component/viewers/videoViewer/index.js @@ -2,7 +2,7 @@ import { connect } from 'react-redux'; import { makeSelectFileInfoForUri } from 'lbry-redux'; import { doChangeVolume, doChangeMute } from 'redux/actions/app'; import { selectVolume, selectMute } from 'redux/selectors/app'; -import { savePosition } from 'redux/actions/content'; +import { savePosition, doSetPlayingUri } from 'redux/actions/content'; import { makeSelectContentPositionForUri } from 'redux/selectors/content'; import VideoViewer from './view'; @@ -17,6 +17,7 @@ const perform = dispatch => ({ changeVolume: volume => dispatch(doChangeVolume(volume)), savePosition: (uri, position) => dispatch(savePosition(uri, position)), changeMute: muted => dispatch(doChangeMute(muted)), + setPlayingUri: uri => dispatch(doSetPlayingUri(uri)), }); export default connect( diff --git a/src/ui/component/viewers/videoViewer/view.jsx b/src/ui/component/viewers/videoViewer/view.jsx index e38fbcb35..0ad6720c5 100644 --- a/src/ui/component/viewers/videoViewer/view.jsx +++ b/src/ui/component/viewers/videoViewer/view.jsx @@ -14,16 +14,44 @@ const VIDEO_JS_OPTIONS = { }; type Props = { + volume: number, + position: number, + muted: boolean, + hasFileInfo: boolean, + changeVolume: number => void, + savePosition: (string, number) => void, + changeMute: boolean => void, + setPlayingUri: (string | null) => void, source: string, contentType: string, hasFileInfo: boolean, + onEndedCB: any, }; function VideoViewer(props: Props) { - const { contentType, source } = props; + const { contentType, source, setPlayingUri, onEndedCB } = props; const videoRef = useRef(); const [requireRedraw, setRequireRedraw] = useState(false); + useEffect(() => { + const currentVideo: HTMLVideoElement | null = document.querySelector('video'); + + function doEnded() { + setPlayingUri(null); + onEndedCB(); + } + + if (currentVideo) { + currentVideo.addEventListener('ended', doEnded); + } + // cleanup function: + return () => { + if (currentVideo) { + currentVideo.removeEventListener('ended', doEnded); + } + }; + }, []); + useEffect(() => { const videoNode = videoRef.current; const videoJsOptions = { From a99867971f997a069982aa49dcb0c255150b3854 Mon Sep 17 00:00:00 2001 From: jessop Date: Mon, 9 Sep 2019 13:31:00 -0400 Subject: [PATCH 2/2] next unplayed --- src/ui/component/fileRender/index.js | 4 ++-- src/ui/component/fileRender/view.jsx | 7 ++++--- src/ui/component/viewers/videoViewer/view.jsx | 11 +++++++++++ src/ui/redux/selectors/content.js | 16 ++++++++++++++++ 4 files changed, 33 insertions(+), 5 deletions(-) diff --git a/src/ui/component/fileRender/index.js b/src/ui/component/fileRender/index.js index 5d007bc0f..189d23550 100644 --- a/src/ui/component/fileRender/index.js +++ b/src/ui/component/fileRender/index.js @@ -7,10 +7,10 @@ import { makeSelectMediaTypeForUri, makeSelectDownloadPathForUri, makeSelectFileNameForUri, - makeSelectFirstRecommendedFileForUri, } from 'lbry-redux'; import { THEME, AUTOPLAY } from 'constants/settings'; import { makeSelectClientSetting } from 'redux/selectors/settings'; +import { makeSelectNextUnplayedRecommended } from 'redux/selectors/content'; import FileRender from './view'; const select = (state, props) => ({ @@ -22,8 +22,8 @@ const select = (state, props) => ({ downloadPath: makeSelectDownloadPathForUri(props.uri)(state), fileName: makeSelectFileNameForUri(props.uri)(state), streamingUrl: makeSelectStreamingUrlForUri(props.uri)(state), - nextFileToPlay: makeSelectFirstRecommendedFileForUri(props.uri)(state), autoplay: makeSelectClientSetting(AUTOPLAY)(state), + nextUnplayed: makeSelectNextUnplayedRecommended(props.uri)(state), }); export default connect(select)(FileRender); diff --git a/src/ui/component/fileRender/view.jsx b/src/ui/component/fileRender/view.jsx index 9c8dfa498..ddc831c2e 100644 --- a/src/ui/component/fileRender/view.jsx +++ b/src/ui/component/fileRender/view.jsx @@ -71,6 +71,7 @@ type Props = { fileName: string, autoplay: boolean, nextFileToPlay: string, + nextUnplayed: string, history: { push: string => void }, }; @@ -105,9 +106,9 @@ class FileRender extends React.PureComponent { } onEndedCb() { - const { autoplay, nextFileToPlay, history } = this.props; - if (autoplay && nextFileToPlay) { - history.push(formatLbryUriForWeb(nextFileToPlay)); + const { autoplay, nextUnplayed, history } = this.props; + if (autoplay && nextUnplayed) { + history.push(formatLbryUriForWeb(nextUnplayed)); } } diff --git a/src/ui/component/viewers/videoViewer/view.jsx b/src/ui/component/viewers/videoViewer/view.jsx index 0ad6720c5..ac90cf0aa 100644 --- a/src/ui/component/viewers/videoViewer/view.jsx +++ b/src/ui/component/viewers/videoViewer/view.jsx @@ -37,17 +37,28 @@ function VideoViewer(props: Props) { const currentVideo: HTMLVideoElement | null = document.querySelector('video'); function doEnded() { + // clear position setPlayingUri(null); onEndedCB(); } + function doPause(e: Event) { + // store position e.target.currentTime + } + function doVolume(e: Event) { + // store volume e.target.volume + } if (currentVideo) { currentVideo.addEventListener('ended', doEnded); + currentVideo.addEventListener('pause', doPause); + currentVideo.addEventListener('volumechange', doVolume); } // cleanup function: return () => { if (currentVideo) { currentVideo.removeEventListener('ended', doEnded); + currentVideo.removeEventListener('pause', doPause); + currentVideo.removeEventListener('volumechange', doVolume); } }; }, []); diff --git a/src/ui/redux/selectors/content.js b/src/ui/redux/selectors/content.js index 1c99061b1..5c2d6c5db 100644 --- a/src/ui/redux/selectors/content.js +++ b/src/ui/redux/selectors/content.js @@ -5,6 +5,7 @@ import { selectClaimsByUri, makeSelectClaimsInChannelForCurrentPageState, makeSelectClaimIsNsfw, + makeSelectRecommendedContentForUri, } from 'lbry-redux'; import { selectShowMatureContent } from 'redux/selectors/settings'; @@ -76,6 +77,21 @@ export const makeSelectHasVisitedUri = (uri: string) => history => Boolean(history) ); +export const makeSelectNextUnplayedRecommended = (uri: string) => + createSelector( + makeSelectRecommendedContentForUri(uri), + selectHistory, + (possibleNext, history) => { + if (possibleNext) { + for (let i = 0; i < possibleNext.length; i++) { + if (!history.find(item => item.uri === possibleNext[i])) { + return possibleNext[i]; + } + } + } + } + ); + export const selectRecentHistory = createSelector( selectHistory, history => {