track and manage video state #890
Conversation
There was a problem hiding this comment.
Great stuff! I see you are tracking time when the video pauses, I was hoping that you would update the time using this listener instead https://www.w3schools.com/tags/av_event_timeupdate.asp
i.e. mediaElement.addEventListener("timeupdate", doUpdatePlayback);
|
Are we using the time for something other than starting back where the user left off? |
|
@daovist yes, exactly. There are going to be several features that depend on this |
| @@ -0,0 +1,15 @@ | |||
| import * as settings from "constants/settings"; | |||
There was a problem hiding this comment.
I noticed that /selectors/video.js has not been deleted. Are we still using it?
src/renderer/store.js
Outdated
| @@ -71,6 +72,7 @@ const reducers = combineReducers({ | |||
| shapeShift: shapeShiftReducer, | |||
| subscriptions: subscriptionsReducer, | |||
| video: videoReducer, | |||
There was a problem hiding this comment.
do we still need video: videoReducer,?
|
|
||
| export const makeSelectMediaPositionForUri = uri => | ||
| createSelector(_selectState, state => { | ||
| const id = uri.split("#")[1]; |
There was a problem hiding this comment.
will this work when the uri does not contain a # such as in the case of lbry://one?
src/renderer/redux/reducers/media.js
Outdated
|
|
||
| export type MediaState = { | ||
| paused: Boolean, | ||
| positions: Object, |
There was a problem hiding this comment.
can you define a type more specifically than Object? Maybe { [string]: number }?
| @@ -93,6 +96,9 @@ class Video extends React.PureComponent { | |||
| } | |||
| const poster = metadata.thumbnail; | |||
|
|
|||
| const mediaId = uri.split("#")[1]; | |||
There was a problem hiding this comment.
as I said in a comment below, does this work for lbry://one?
| @@ -93,6 +96,9 @@ class Video extends React.PureComponent { | |||
| } | |||
| const poster = metadata.thumbnail; | |||
|
|
|||
| const mediaId = uri.split("#")[1]; | |||
| console.log("mediaId:", mediaId); | |||
There was a problem hiding this comment.
please remove when ready to merge :)
| }); | ||
|
|
||
| const perform = dispatch => ({ | ||
| play: uri => dispatch(doPlayUri(uri)), | ||
| cancelPlay: () => dispatch(doSetPlayingUri(null)), | ||
| changeVolume: volume => dispatch(doChangeVolume(volume)), | ||
| setVideoPause: val => dispatch(setVideoPause(val)), | ||
| // setVideoPause: val => dispatch(setVideoPause(val)), |
There was a problem hiding this comment.
please remove this comment when ready to merge
| @@ -15,7 +16,11 @@ import { | |||
| } from "redux/selectors/file_info"; | |||
| import { makeSelectCostInfoForUri } from "redux/selectors/cost_info"; | |||
| import { selectShowNsfw } from "redux/selectors/settings"; | |||
| import { selectVideoPause } from "redux/selectors/video"; | |||
| // import { selectVideoPause } from "redux/selectors/video"; | |||
There was a problem hiding this comment.
please remove this comment when ready to merge
| @@ -3,7 +3,8 @@ import { connect } from "react-redux"; | |||
| import { doChangeVolume } from "redux/actions/app"; | |||
| import { selectVolume } from "redux/selectors/app"; | |||
| import { doPlayUri, doSetPlayingUri } from "redux/actions/content"; | |||
| import { setVideoPause } from "redux/actions/video"; | |||
| import { doPlay, doPause, savePosition } from "redux/actions/media"; | |||
| // import { setVideoPause } from "redux/actions/video"; | |||
There was a problem hiding this comment.
please remove this comment when ready to merge :)
| setVideoPause: val => dispatch(setVideoPause(val)), | ||
| doPlay: () => dispatch(doPlay()), | ||
| doPause: () => dispatch(doPause()), | ||
| savePosition: (id, position) => dispatch(savePosition(id, position)), |
There was a problem hiding this comment.
what kind of id? I assume this is a claimId, let's call it that
| doPause, | ||
| savePosition, | ||
| mediaPaused, | ||
| mediaPosition, |
There was a problem hiding this comment.
The fact that Video is receiving so many properties simply to pass them on to VideoPlayer makes me think VideoPlayer should just be a first-class component. Although perhaps the names should be clarified if this is the case.
There was a problem hiding this comment.
I was also thinking it should be its own component. Maybe as a separate issue along with displaying a paused video instead of the image wrapper when position has a value?
There was a problem hiding this comment.
I agree. #825 can work as a reference as the media component has been separated there. Also I think that Video and VideoPlayer names are very specific, we use the same component to render all other types of media as well, so IMO the variables and components should be refactored to reflect the same(also in the PR).
Thoughts?
| componentWillReceiveProps(next) { | ||
| const el = this.refs.media.children[0]; | ||
| if (!this.props.paused && next.paused && !el.paused) el.pause(); | ||
| // if (this.props.paused && !next.paused && el.paused) el.play(); |
This feature tracks play and pause actions on a video element. Below is a model of the parts.
blue = state
red = actions
purple = reducers
light blue = selectors
green = component lifecycle hooks
orange = distant component which can alter state
black = not React/Redux