diff --git a/web/pages/watch.js b/web/pages/watch.js index 4fc6e64..2294dd2 100644 --- a/web/pages/watch.js +++ b/web/pages/watch.js @@ -1,252 +1,254 @@ import React, { useEffect, useState } from 'react' import Page from '../components/Page' import Header from '../components/Header' import { withRouter } from 'next/router' import superagent from 'superagent' import { NextSeo } from 'next-seo' import Error, { NoVideoError, PrivateVideo } from './_error' import _ from 'lodash' import { connect } from 'react-redux' import withFetchUsernameIfNeededPage from '../services/withFetchUsernameIfNeededPage' import { fetchCodingSessionIfNeeded } from '../actions' import JoinGitDuck from '../components/JoinGitDuck' import dynamic from 'next/dynamic' import redirect from '../services/redirect' import { deleteCodingSession } from '../services/api' const CodingSession = dynamic(() => import('../components/CodingSession')) const deleteSession = async (id, currentUsername) => { const confirmation = confirm('Are you sure you want to permanently delete this video?') if (!confirmation) { return } await deleteCodingSession(id) redirect(null, `/${currentUsername}`) } const Uploading = ({isOwnCodingSession, id, currentUsername}) => { const [progress, setProgress] = useState(0) useEffect(() => { let interval = setInterval(() => setProgress(progress => { if (progress > 80) { clearInterval(interval) return progress + 5 } else if (progress < 30) { return progress + 0.3 + Math.random() } else { return progress + 0.1 } }), 100) return () => clearInterval(interval) }, []) return

Wait a sec while we load this streaming...

{isOwnCodingSession &&

}

} class Watch extends React.Component { state = { codingSession: this.props.codingSession, isLoading: this.props.isLoading, videoIsReady: this.props.videoIsReady, error: null, } static async getInitialProps (context) { const {id} = context.query const initialProps = { isLoading: true, sessionId: id, } try { initialProps.codingSession = await context.store.dispatch(fetchCodingSessionIfNeeded(context, id)) } catch (error) { console.error('Error fetching video /watch/', id, JSON.stringify(_.get(error, 'response.body', error))) const gdErrorCode = _.get(error, 'response.body.error.code') if (gdErrorCode && gdErrorCode === 'CANT_SEE_CODING_SESSION') { return { cantSeeCodingSession: true, } } if (context.isServer) { context.res.statusCode = error.status || error.statusCode || 404 return { statusCode: error.status || error.statusCode || 404 } } } if (initialProps.codingSession) { const {codingSession} = initialProps if (codingSession.commits && codingSession.commits.length > 0) { initialProps.firstCommitAuthor = _.get(codingSession, 'commits.0.authorName', null) initialProps.firstCommitTitle = _.get(codingSession, 'commits.0.message', null) } const videoURL = _.get(codingSession, 'videos.0.url') if (!videoURL) { if (context.isServer) { context.res.statusCode = 500 } return { noVideoURL: true, statusCode: 500, } } const videoIsFromYoutube = _.get(codingSession, 'videos.0.platform') === 'youtube' const videoIsReady = videoIsFromYoutube || await superagent.get(videoURL) .then(() => true) .catch(() => false) initialProps.videoIsReady = videoIsReady if (videoIsReady) { initialProps.isLoading = false } } return initialProps } checkVideoStatus = async () => { const {codingSession, videoIsReady} = this.state const hasVideoElements = _.get(codingSession, 'videos.length', 0) > 0 if (!hasVideoElements) { return this.setState({ error: 'There was an error fetching your session. Please try again later.' }) } this.setState({ isLoading: false }) if (videoIsReady) { return this.setState({videoIsReady}) } const videoUrl = codingSession.videos[0].url const newVideoIsReady = await superagent.get(videoUrl) .then(res => res.header['content-length'] > 0) .catch(() => false) if (!newVideoIsReady) { return setTimeout(async () => { await this.checkVideoStatus() }, 1000) } this.setState({ videoIsReady: true, }) } async componentDidMount () { await this.checkVideoStatus() } render () { const {videoIsReady, error} = this.state const {codingSession, isAuthenticated, noVideoURL, statusCode, currentUser, cantSeeCodingSession} = this.props if (cantSeeCodingSession) { return } if (noVideoURL) { return } if (!codingSession) { return } if (error) { return } const shouldShowCommit = videoIsReady const shouldShowUploading = !videoIsReady const description = _.get(codingSession, 'description', '') const finalDescriptionText = description.replace('\t', '').replace(/(\r\n|\n|\r)/gm, ' ').substring(0, 150) + (description.length > 150 ? '...' : '') const defaultThumbnailSrc = 'https://storage.googleapis.com/gitduck/img/default-gd-thumbnail.jpg' const thumbnailSrc = _.get(codingSession, 'thumbnails.2.url', defaultThumbnailSrc) const isOwnCodingSession = currentUser && currentUser.lowercaseUsername === _.get(codingSession, 'user.lowercaseUsername', '') + const shouldNotIndexVideo = !description && codingSession.title.startsWith('Coding session on ') + return

{shouldShowCommit && } {shouldShowUploading && } {!isAuthenticated && } } } const mapState = ({currentUser, codingSessions, auth}, {sessionId}) => { return ({ currentUser: currentUser.user, codingSession: _.get(codingSessions, `${sessionId}.payload`), isAuthenticated: auth.isAuthenticated, }) } export default connect(mapState)(withRouter(withFetchUsernameIfNeededPage(Watch)))

Small change on indexing

More coding videos

New UX/UI with sidebar

Hacking Jarvis from HackTheBox.eu

New instructions Part 2

How to share your screen and code at the same time with GitDuck

Use list view only when in mobile

Adding "Start video from time in URL query parameter"