changes

yup
MartinMouritzen · Dec 20, 2020 · bc01b74 · bc01b74
1 parent c276b51
commit bc01b74
Show file tree

Hide file tree

Showing 26 changed files with 407 additions and 63 deletions.
diff --git a/app/components/Episode/EpisodePane.jsx b/app/components/Episode/EpisodePane.jsx
@@ -6,7 +6,7 @@ import styles from './EpisodePane.scss';
 
 // import Wave from 'podfriend-approot/images/design/blue-wave-1.svg';
 
-import { Link, useParams, useHistory } from "react-router-dom";
+import { Link, useParams, useHistory, useLocation } from "react-router-dom";
 
 import ChatPane from 'podfriend-approot/components/Chat/ChatPane.jsx';
 
@@ -28,10 +28,18 @@ import PodcastSubtitles from './Subtitles/PodcastSubtitles.jsx';
 
 import DOMPurify from 'dompurify';
 
+function useQuery() {
+	return new URLSearchParams(useLocation().search);
+}
+
 const EpisodePane = () => {
 	const dispatch = useDispatch();
 	let { podcastName, episodeId } = useParams();
 
+	// http://localhost:8080/podcast/someone-knows-something/499651292?t=60
+	let query = useQuery();
+	var timeStamp = query.get('t');
+
 	const [episode,setEpisode] = useState(false);
 	const [description,setDescription] = useState(false);
 	const [chapters,setChapters] = useState(false);
@@ -58,7 +66,7 @@ const EpisodePane = () => {
 			}
 		}
 		if (foundEpisode) {
-			dispatch(playEpisode(selectedPodcast,foundEpisode));
+			dispatch(playEpisode(selectedPodcast,foundEpisode,timeStamp ? timeStamp : false));
 			dispatch(showFullPlayer(true));
 		}
 	};
@@ -205,6 +213,11 @@ const EpisodePane = () => {
 									<FaPlay /> Play this episode
 							</div>
 						}
+						{ isActiveEpisode &&
+							<div onClick={onEpisodePlay} className={styles.playButton}>
+									<FaPlay /> Resume this episode
+							</div>
+						}
 					</>
 				}
 				<Tabs>

diff --git a/app/components/Lists/LatestEpisodes.jsx b/app/components/Lists/LatestEpisodes.jsx
@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from 'react';
+
+import { useSelector } from 'react-redux';
+
+import PodcastMatrix from './PodcastMatrix.jsx';
+
+const LatestVisitedPodcasts = () => {
+	const subscribedPodcasts = useSelector((state) => state.podcast.subscribedPodcasts);
+	const [latestEpisodes,setLatestEpisodes] = useState(false);
+	const [error,setError] = useState(false);
+
+	const retrieveLatestEpisodes = async () => {
+		// console.log(subscribedPodcasts);
+		var feedPaths = [];
+		for(var i=0;i<subscribedPodcasts.length;i++) {
+			feedPaths.push(subscribedPodcasts[i].path);
+		}
+
+		try {
+			var result = await fetch('https://api.podfriend.com/podcast/episodes/?feedPaths=' + feedPaths.join(',') + '&max=14');
+			var episodes = await result.json();
+
+			if (episodes.error) {
+				setError(true);
+			}
+			else {		
+				setLatestEpisodes(episodes);
+			}
+
+		}
+		catch (exception) {
+			console.log('Error fetching latest episodes');
+			console.log(exception);
+		}
+	};
+
+	useEffect(() => {
+		retrieveLatestEpisodes();
+	},[]);
+
+	if (error) {
+		return null;
+	}
+	return (
+		<div className='section'>
+			<div className='sectionInner'>
+				<div className='sectionSubTitle'>Your</div>
+				<div className='sectionTitle'>Latest episodes</div>
+			</div>
+			{ latestEpisodes !== false && 
+				<PodcastMatrix type='scrollList' episodes={latestEpisodes} showLoadMore={true} />
+			}
+		</div>
+	);
+}
+
+export default React.memo(LatestVisitedPodcasts);
diff --git a/app/components/Lists/LatestVisitedPodcasts.jsx b/app/components/Lists/LatestVisitedPodcasts.jsx
@@ -12,7 +12,7 @@ const LatestVisitedPodcasts = () => {
 			<div className='section'>
 				<div className='sectionInner'>
 					<div className='sectionSubTitle'>Your</div>
-					<div className='sectionTitle'>latest podcasts</div>
+					<div className='sectionTitle'>Latest podcasts</div>
 				</div>
 				<PodcastMatrix type='scrollList' podcasts={lastVisitedPodcasts} showLoadMore={true} />
 			</div>

diff --git a/app/components/Lists/PodcastMatrix.jsx b/app/components/Lists/PodcastMatrix.jsx
@@ -5,11 +5,12 @@ import PodcastMatrixUI from 'podfriend-ui/PodcastMatrix/PodcastMatrixUI.jsx';
 /**
 *
 */
-const PodcastMatrix = React.memo(({type,podcasts}) => {
+const PodcastMatrix = React.memo(({type,podcasts,episodes}) => {
 	return (
 		<PodcastMatrixUI
 			type={type}
 			podcasts={podcasts}
+			episodes={episodes}
 		/>
 	);
 })

diff --git a/app/components/Pages/ForPodcasters.jsx b/app/components/Pages/ForPodcasters.jsx
@@ -10,17 +10,17 @@ const ForPodcasters = () => {
 			<Grid container spacing={3}>
 				<Grid item xs={12}>
 					<div className="hero">
-					<Grid container spacing={3} alignItems="center" justify="center">
-						<Grid item xs={12} lg="6" alignItems="center" justify="center">
-							<h2>Widgets</h2>
-							<h1>Show your potential listeners what they can expect from your podcast</h1>
-							<p>Grow your listenerbase by giving them an easy way to preview your podcast</p>
-							<button>It's free</button>
-							https://business.trustpilot.com/features/product-reviews
-						</Grid>
-						<Grid item xs={12} lg="6" alignItems="center" justify="center">
-						<iframe width="400" height="400" src="https://widget.podfriend.com/#/podcast/920666?showPodcastInfo=false&amp;episodeCount=5&amp;widgetType=list&amp;primaryColor=0176e5&amp;secondaryColor=FFFFFF&amp;textColor=000000&amp;backgroundColor=FFFFFF" title="Podcast widget"></iframe>
-						</Grid>
+						<Grid container spacing={3} alignItems="center" justify="center">
+							<Grid item xs={12} lg="6" alignItems="center" justify="center">
+								<h2>Website widgets</h2>
+								<h1>Show your potential listeners what they can expect from your podcast</h1>
+								<p>Grow your listenerbase by giving them an easy way to preview your podcast</p>
+								<button>It's free</button>
+								https://business.trustpilot.com/features/product-reviews
+							</Grid>
+							<Grid item xs={12} lg="6" alignItems="center" justify="center">
+								<iframe width="400" height="400" src="https://widget.podfriend.com/#/podcast/920666?showPodcastInfo=false&amp;episodeCount=5&amp;widgetType=list&amp;primaryColor=0176e5&amp;secondaryColor=FFFFFF&amp;textColor=000000&amp;backgroundColor=FFFFFF" title="Podcast widget"></iframe>
+							</Grid>
 						</Grid>
 					</div>
 				</Grid>

diff --git a/app/components/Player.jsx b/app/components/Player.jsx
@@ -56,6 +56,7 @@ class Player extends Component {
 
 		this.onProgressSliderChange = this.onProgressSliderChange.bind(this);
 		this.onLoadedMetadata = this.onLoadedMetadata.bind(this);
+		this.onLoadedData = this.onLoadedData.bind(this);
 		this.onTimeUpdate = this.onTimeUpdate.bind(this);
 		this.onEnded = this.onEnded.bind(this);
 		this.onNextEpisode = this.onNextEpisode.bind(this);
@@ -220,6 +221,9 @@ class Player extends Component {
 	*
 	*/
 	onCanPlay(event) {
+		// alert('set time: ' + this.props.activeEpisode.currentTime);
+		// this.setCurrentTime(this.props.activeEpisode.currentTime);
+
 		this.props.audioCanPlay();
 	}
 	/**
@@ -246,6 +250,14 @@ class Player extends Component {
 	onLoadedMetadata(event) {
 		let newDuration = this.props.audioController.getDuration();
 		console.log('OnloadedMetaData. duration: ' + newDuration + ', episodeid: ' + this.props.activeEpisode.id);
+
+		// alert(this.props.audioController.audioElement.current.currentTime);
+
+		// alert('set time: ' + this.props.activeEpisode.currentTime);
+		this.setCurrentTime(this.props.activeEpisode.currentTime);
+
+		// alert(this.props.audioController.audioElement.current.currentTime);
+
 		this.props.updateEpisodeDuration(newDuration);
 		this.setState({
 			duration: newDuration
@@ -256,6 +268,12 @@ class Player extends Component {
 	/**
 	*
 	*/
+	onLoadedData(event) {
+		// this.setCurrentTime(this.props.activeEpisode.currentTime);
+	}
+	/**
+	*
+	*/
 	onTimeUpdate() {
 		var currentTime = this.props.audioController.getCurrentTime();
 
@@ -460,6 +478,7 @@ class Player extends Component {
 				onCanPlay={this.onCanPlay}
 				onBuffering={this.onBuffering}
 				onLoadedMetadata={this.onLoadedMetadata}
+				onLoadedData={this.onLoadedData}
 
 				isBuffering={this.props.isBuffering}
 

diff --git a/app/components/Player.scss b/app/components/Player.scss
@@ -478,6 +478,7 @@
 	.controls {
 		width: 100%;
 		margin-bottom: 20px;
+		flex: 0 1 auto;
 	}
 	.progressText {
 		margin-left: 10px;
@@ -494,6 +495,7 @@
 		width: 100%;
 		background-color: #FFFFFF;
 		padding-bottom: 60px;
+		flex: 2;
 	}
 	.coverContainer {
 		position: relative;

diff --git a/app/components/Player/PlayerUI.jsx b/app/components/Player/PlayerUI.jsx
@@ -4,7 +4,7 @@ import { useSelector, useDispatch } from 'react-redux';
 
 import { showFullPlayer } from "podfriend-approot/redux/actions/uiActions";
 
-import { Link, useHistory } from 'react-router-dom';
+import { Link, useHistory, useLocation } from 'react-router-dom';
 
 import { Range } from 'react-range';
 
@@ -42,7 +42,7 @@ import EpisodeChapterList from 'podfriend-approot/components/Episode/Chapters/Ep
 import EpisodeChapters from 'podfriend-approot/components/Episode/Chapters/EpisodeChapters.jsx';
 import PodcastSubtitles from 'podfriend-approot/components/Episode/Subtitles/PodcastSubtitles.jsx';
 
-import { showSpeedSettingWindow } from 'podfriend-approot/redux/actions/uiActions';
+import { showSpeedSettingWindow, showShareWindow } from 'podfriend-approot/redux/actions/uiActions';
 
 import { Tabs, Tab } from 'podfriend-approot/components/wwt/Tabs/Tabs.jsx';
 
@@ -51,7 +51,8 @@ import DraggablePane from 'podfriend-approot/components/UI/common/DraggablePane.
 /**
 *
 */
-const PlayerUI = ({ audioController, activePodcast, activeEpisode, title, progress, duration, playing, hasEpisode, pause, play, canPlay, isBuffering, onCanPlay, onBuffering, onLoadedMetadata, onPlay, onPause, onSeek, onTimeUpdate, onEnded, onPrevEpisode, onBackward, onNextEpisode, onForward, onProgressSliderChange, onAudioElementReady }) => {
+
+const PlayerUI = ({ audioController, activePodcast, activeEpisode, title, progress, duration, playing, hasEpisode, pause, play, canPlay, isBuffering, onCanPlay, onBuffering, onLoadedMetadata, onLoadedData, onPlay, onPause, onSeek, onTimeUpdate, onEnded, onPrevEpisode, onBackward, onNextEpisode, onForward, onProgressSliderChange, onAudioElementReady }) => {
 	const dispatch = useDispatch();
 	const history = useHistory();
 	const audioElement = useRef(null);
@@ -122,6 +123,7 @@ const PlayerUI = ({ audioController, activePodcast, activeEpisode, title, progre
 			const resourceUrl = new URL(fileUrl);
 			resourceUrl.searchParams.delete('_from');
 			resourceUrl.searchParams.append('_from','podfriend.com');
+			resourceUrl.searchParams.append('_guid',activeEpisode.statsId);
 			return resourceUrl.toString();
 		}
 		catch (exception) {
@@ -130,11 +132,12 @@ const PlayerUI = ({ audioController, activePodcast, activeEpisode, title, progre
 			try {
 				var fallbackUrl = fileUrl;
 				if (fallbackUrl.includes('?')) {
-					fallbackUrl += '&_from=podfriend.com';
+					fallbackUrl += '&_from=podfriend.com&_guid=' + activeEpisode.statsId;
 				}
 				else {
-					fallbackUrl += '?_from=podfriend.com';
+					fallbackUrl += '?_from=podfriend.com&_guid=' + activeEpisode.statsId;
 				}
+				return fallbackUrl;
 			}
 			catch (exception2) {
 				return fileUrl;
@@ -168,6 +171,7 @@ const PlayerUI = ({ audioController, activePodcast, activeEpisode, title, progre
 		onSeeked: onSeek,
 		onTimeUpdate: onTimeUpdate,
 		onEnded: onEnded,
+		onLoadedData: () => { onLoadedData },
 
 		preload: "auto",
 		disableremoteplayback: "true",
@@ -284,6 +288,10 @@ const PlayerUI = ({ audioController, activePodcast, activeEpisode, title, progre
 		dispatch(showFullPlayer(false));
 	};
 
+	const generateTimeHash = () => {
+		return '#t=' + Math.round(activeEpisode.currentTime ? activeEpisode.currentTime : 0);
+	};
+
 	return (
 		<>
 			<div className={styles.openPlayerBackground} style={{ display: (fullPlayerOpen ? 'block' : 'none') }} onClick={() => { dispatch(showFullPlayer(false)); }} />
@@ -297,14 +305,14 @@ const PlayerUI = ({ audioController, activePodcast, activeEpisode, title, progre
 							<>
 								<div className={styles.fullscreenIcon} onClick={videoFullscreen}><FullScreenIcon /></div>
 								<video {...audioElementProps}>
-									<source src={addUserAgentToUrl(activeEpisode.url)} type={activeEpisode.type ? activeEpisode.type : 'audio/mpeg'} />
+									<source src={addUserAgentToUrl(activeEpisode.url) + generateTimeHash()} type={activeEpisode.type ? activeEpisode.type : 'audio/mpeg'} />
 								</video>
 							</>
 						}
 						{ isVideo === false &&
 							<>
 								<audio {...audioElementProps}>
-									<source src={addUserAgentToUrl(activeEpisode.url)} type={activeEpisode.type ? activeEpisode.type : 'audio/mpeg'} />
+									<source src={addUserAgentToUrl(activeEpisode.url) + generateTimeHash()} type={activeEpisode.type ? activeEpisode.type : 'audio/mpeg'} />
 								</audio>
 
 								{ chapters !== false &&
@@ -456,12 +464,10 @@ const PlayerUI = ({ audioController, activePodcast, activeEpisode, title, progre
 				</div>
 				{ fullPlayerOpen &&
 					<div className={styles.episodeInfo}>
-						<div className={styles.blueFiller}>
-							<div style={{ height: '80px', overflow: 'hidden' }} >
-								<svg viewBox="0 0 500 150" preserveAspectRatio="none" style={{ height: '150px', width: '100%', backgroundColor: '#0176e5' }}>
-									<path d="M-0.90,34.83 C167.27,-67.79 269.41,126.60 500.78,16.08 L503.61,86.15 L-0.33,87.14 Z" style={{ stroke: 'none', fill: '#FFFFFF' }} />
-								</svg>
-							</div>
+						<div style={{ height: '80px', overflow: 'hidden' }} >
+							<svg viewBox="0 0 500 150" preserveAspectRatio="none" style={{ height: '150px', width: '100%', backgroundColor: '#0176e5' }}>
+								<path d="M-0.90,34.83 C167.27,-67.79 269.41,126.60 500.78,16.08 L503.61,86.15 L-0.33,87.14 Z" style={{ stroke: 'none', fill: '#FFFFFF' }} />
+							</svg>
 						</div>
 						{ chapters !== false &&
 							<div style={{ padding: 20 }}>
@@ -482,8 +488,8 @@ const PlayerUI = ({ audioController, activePodcast, activeEpisode, title, progre
 			}
 			<ContextMenu element={moreIconElement} showTrigger="click" position='top'>
 				<ContextMenuItem onClick={() => { dispatch(showSpeedSettingWindow()); }}><SpeedIcon /> Set audio speed</ContextMenuItem>
+				<ContextMenuItem onClick={() => { dispatch(showShareWindow()); }}><ShareIcon /> Share episode</ContextMenuItem>
 				{/*
-				<ContextMenuItem><ShareIcon /> Share episode</ContextMenuItem>
 				<ContextMenuItem><ClockIcon /> Set sleep timer</ContextMenuItem>
 				<ContextMenuItem><ChromecastIcon /> Chromecast</ContextMenuItem>
 				*/}