Show total duration of video in video info panel

[lehnerpat]

No description provided.

[Yash-Var]

Hlo Lehnerpat I want to fix this issue, can you give me some description about that ):....

[lehnerpat]

Hi @Yash-Var, thanks so much for taking an interest in this project :)

This issue was actually blocked by #8 until earlier (I had a lot of unpushed commits because I wanted to do before-after comparisons of the UI overhaul), but I just pushed all my changes to the main branch.

I'll take some time soon to add some more detail for you here, but if you want you can browse through the code and get familiar with it until then :)

(Just a note: this is a hobby project for me, so the time I spend on it varies a lot, and I can't promise when I get around to responding to issues or add more explanations, hope you understand ☺️)

[Yash-Var]

thanks @lehnerpat

…

On Mon, May 30, 2022 at 12:48 AM lehnerpat ***@***.***> wrote: Hi @Yash-Var <https://github.com/Yash-Var>, thanks so much for taking an interest in this project :) This issue was actually blocked by #8 <#8> until earlier (I had a lot of unpushed commits because I wanted to do before-after comparisons of the UI overhaul), but I just pushed all my changes to the main branch. I'll take some time soon to add some more detail for you here, but if you want you can browse through the code and get familiar with it until then :) (Just a note: this is a hobby project for me, so the time I spend on it varies a lot, and I can't promise when I get around to responding to issues or add more explanations, hope you understand ☺️) — Reply to this email directly, view it on GitHub <#15 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AW2UZ266JZ56GFJO44IHOULVMO7GVANCNFSM5XG75W2A> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[Yash-Var]

@lehnerpat can you give other issue which you want to fix ...

[lehnerpat]

@Yash-Var, so the idea here is to show the video's duration in the "Video Info" panel in editing mode:

To get the duration, you need to react to an event on the video player (I'm not sure which, you'd have to check the documentation of the player we use: cookpete/react-player), add it to the state of the surround component (probably TrackPlayer), and pass it to the video info panel.

The video player is integrated here:

train-ride-maps/src/track-player/VideoPlayer.tsx

Lines 10 to 19 in be748a8

	<ReactPlayer
	className="react-player"
	controls
	progressInterval={100}
	width="100%"
	height="100%"
	url={videoUrl}
	onProgress={onProgress}
	config={{ playerVars: { start: 1, fs: 0 } }}
	/>

The TrackPlayer component is over here:

train-ride-maps/src/track-player/index.tsx

Line 69 in be748a8

export const TrackPlayer: FC<TrackPlayerProps> = ({ initialTrack }) => {

---

BTW, #9 or #14 might be slightly easier issues to start with :)