-
Notifications
You must be signed in to change notification settings - Fork 414
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
track and manage video state #890
Changes from 10 commits
6c4a4e5
7d29c4b
11a5f9d
61b8e8e
a8988d9
bfe5fe8
ecd2207
345badb
504c546
0cfc9ab
566fb2e
5765c6c
7bc2f88
d3047a7
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -20,11 +20,10 @@ class VideoPlayer extends React.PureComponent { | |
this.togglePlayListener = this.togglePlay.bind(this); | ||
} | ||
|
||
componentWillReceiveProps(nextProps) { | ||
if (nextProps.videoPause) { | ||
this.refs.media.children[0].pause(); | ||
this.props.setVideoPause(false); | ||
} | ||
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(); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. remove comment please |
||
} | ||
|
||
componentDidMount() { | ||
|
@@ -35,7 +34,11 @@ class VideoPlayer extends React.PureComponent { | |
mediaType, | ||
changeVolume, | ||
volume, | ||
position, | ||
claim, | ||
uri, | ||
} = this.props; | ||
|
||
const loadedMetadata = e => { | ||
this.setState({ hasMetadata: true, startedPlaying: true }); | ||
this.refs.media.children[0].play(); | ||
|
@@ -68,6 +71,12 @@ class VideoPlayer extends React.PureComponent { | |
document.addEventListener("keydown", this.togglePlayListener); | ||
const mediaElement = this.refs.media.children[0]; | ||
if (mediaElement) { | ||
mediaElement.currentTime = position || 0; | ||
mediaElement.addEventListener("play", () => this.props.doPlay()); | ||
mediaElement.addEventListener("pause", () => this.props.doPause()); | ||
mediaElement.addEventListener("timeupdate", () => | ||
this.props.savePosition(claim.claim_id, mediaElement.currentTime) | ||
); | ||
mediaElement.addEventListener("click", this.togglePlayListener); | ||
mediaElement.addEventListener( | ||
"loadedmetadata", | ||
|
@@ -93,6 +102,7 @@ class VideoPlayer extends React.PureComponent { | |
if (mediaElement) { | ||
mediaElement.removeEventListener("click", this.togglePlayListener); | ||
} | ||
this.props.doPause(); | ||
} | ||
|
||
renderAudio(container, autoplay) { | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -55,9 +55,13 @@ class Video extends React.PureComponent { | |
contentType, | ||
changeVolume, | ||
volume, | ||
claim, | ||
uri, | ||
videoPause, | ||
setVideoPause, | ||
doPlay, | ||
doPause, | ||
savePosition, | ||
mediaPaused, | ||
mediaPosition, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The fact that There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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). |
||
} = this.props; | ||
|
||
const isPlaying = playingUri === uri; | ||
|
@@ -112,8 +116,13 @@ class Video extends React.PureComponent { | |
downloadCompleted={fileInfo.completed} | ||
changeVolume={changeVolume} | ||
volume={volume} | ||
videoPause={videoPause} | ||
setVideoPause={setVideoPause} | ||
doPlay={doPlay} | ||
doPause={doPause} | ||
savePosition={savePosition} | ||
claim={claim} | ||
uri={uri} | ||
paused={mediaPaused} | ||
position={mediaPosition} | ||
/> | ||
))} | ||
{!isPlaying && ( | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
// @flow | ||
import * as actions from "constants/action_types"; | ||
import type { Action, Dispatch } from "redux/reducers/media"; | ||
import lbry from "lbry"; | ||
import { makeSelectClaimForUri } from "redux/selectors/claims"; | ||
|
||
export const doPlay = () => (dispatch: Dispatch) => | ||
dispatch({ | ||
type: actions.MEDIA_PLAY, | ||
}); | ||
|
||
export const doPause = () => (dispatch: Dispatch) => | ||
dispatch({ | ||
type: actions.MEDIA_PAUSE, | ||
}); | ||
|
||
export function savePosition(claimId: String, position: Number) { | ||
return function(dispatch: Dispatch, getState: Function) { | ||
const state = getState(); | ||
const claim = state.claims.byId[claimId]; | ||
const outpoint = `${claim.txid}:${claim.nout}`; | ||
dispatch({ | ||
type: actions.MEDIA_POSITION, | ||
data: { | ||
outpoint, | ||
position, | ||
}, | ||
}); | ||
}; | ||
} |
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
// @flow | ||
import * as actions from "constants/action_types"; | ||
import { handleActions } from "util/redux-utils"; | ||
|
||
export type MediaState = { | ||
paused: Boolean, | ||
positions: { | ||
[string]: number, | ||
}, | ||
}; | ||
|
||
export type Action = any; | ||
export type Dispatch = (action: Action) => any; | ||
|
||
const defaultState = { paused: true, positions: {} }; | ||
|
||
export default handleActions( | ||
{ | ||
[actions.MEDIA_PLAY]: (state: MediaState, action: Action) => ({ | ||
...state, | ||
paused: false, | ||
}), | ||
|
||
[actions.MEDIA_PAUSE]: (state: MediaState, action: Action) => ({ | ||
...state, | ||
paused: true, | ||
}), | ||
|
||
[actions.MEDIA_POSITION]: (state: MediaState, action: Action) => { | ||
const { outpoint, position } = action.data; | ||
return { | ||
...state, | ||
positions: { | ||
...state.positions, | ||
[outpoint]: position, | ||
}, | ||
}; | ||
}, | ||
}, | ||
defaultState | ||
); |
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import * as settings from "constants/settings"; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I noticed that |
||
import { createSelector } from "reselect"; | ||
import lbryuri from "lbryuri"; | ||
import { makeSelectClaimForUri } from "redux/selectors/claims"; | ||
|
||
const _selectState = state => state.media || {}; | ||
|
||
export const selectMediaPaused = createSelector( | ||
_selectState, | ||
state => state.paused | ||
); | ||
|
||
export const makeSelectMediaPositionForUri = uri => | ||
createSelector(_selectState, makeSelectClaimForUri(uri), (state, claim) => { | ||
const outpoint = `${claim.txid}:${claim.nout}`; | ||
return state.positions[outpoint] || null; | ||
}); |
This file was deleted.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
what kind of id? I assume this is a
claimId
, let's call it that