lots of updates

app/components/Chat/Chat.scss

@@ -0,0 +1,69 @@
+.messagePane {
+	min-height: 200px;
+	padding-top: 5px;
+	/*
+	overflow-y: scroll;
+	-webkit-overflow-scrolling: touch;
+	*/
+
+	.messageLine {
+		padding: 5px;
+		padding-left: 7px;
+		font-size: 15px;
+
+		.messageUsername {
+			margin-right: 5px;
+			font-weight: bold;
+		}
+		.messageText {
+
+		}
+	}
+}
+.textInputPane {
+	max-height: 50px;
+	height: 50px;
+	padding: 5px;
+
+	display: flex;
+	justify-content: center;
+
+	input[type=text] {
+		background-color: #EEEEEE;
+		border-radius: 5px;
+		border: 0px;
+		outline: 0px;
+		padding-left: 10px;
+		padding-right: 5px;
+
+		color: #333333;
+		font-size: 16px;
+
+		flex: 1;
+
+		&::placeholder {
+			color: #999999;
+		}
+	}
+	.sendButton {
+		height: 40px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		svg {
+			height: 30px;
+			fill: #0176e5;
+		}
+		&.hasMessage {
+			width: 35px;
+			overflow: hidden;
+		}
+		&.noMessage {
+			width: 0px;
+			padding: 0px;
+			margin: 0px;
+			overflow: hidden;
+		}
+	}
+}

app/components/Chat/ChatMessageInput.jsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+
+import SVG from 'react-inlinesvg';
+const SendIcon = () => <SVG src={require('podfriend-approot/images/design/icons/send.svg')} />;
+
+import styles from './Chat.scss';
+
+const ChatMessageInput = ({ onMessageSubmit }) => {
+	const [currentMessage,setCurrentMessage] = useState('');
+
+	const onChatMessageTextChange = (event) => {
+		setCurrentMessage(event.target.value);
+	};
+	const sendChatMessage = (event) => {
+		event.preventDefault();
+		onMessageSubmit(currentMessage);
+		setCurrentMessage('');
+	};
+
+	return (
+		<form className={styles.textInputPane} onSubmit={sendChatMessage}>
+			<input type="text" value={currentMessage} placeholder="Send a chat message" onChange={onChatMessageTextChange} />
+			<div className={styles.sendButton + ' ' + (currentMessage.length > 0 ? styles.hasMessage : styles.noMessage)} onClick={sendChatMessage}>
+				<SendIcon />
+			</div>
+		</form>
+	);
+};
+export default ChatMessageInput;

app/components/Chat/ChatMessagePane.jsx

@@ -0,0 +1,34 @@
+import React, { useRef, useEffect } from 'react';
+
+import styles from './Chat.scss';
+
+const ChatMessagePane = ({ messages = [] }) => {
+	const messagePane = useRef(null);
+
+	useEffect(() => {
+		/*
+		if (messagePane) {
+			messagePane.current.scrollTop = messagePane.current.scrollHeight;
+		}
+		*/
+		var bottomSheetContent = document.querySelector('[data-rsbs-content]');
+		if (bottomSheetContent) {
+			// bottomSheetContent.style.maxHeight = '50vh';
+			bottomSheetContent.scrollTop = bottomSheetContent.scrollHeight;
+		}
+	},[messages]);
+
+	return (
+		<div ref={messagePane} className={styles.messagePane}>
+			{ messages.map((message,index) => {
+				return (
+					<div key={index} className={styles.messageLine}>
+						<span className={styles.messageUsername}>{message.name}:</span>
+						<span className={styles.messageText}>{message.text}</span>
+					</div>
+				);
+			} ) }
+		</div>
+	);
+};
+export default ChatMessagePane;

app/components/Chat/ChatModal.jsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from 'react';
+
+import Modal from 'podfriend-approot/components/Window/Modal';
+
+import ChatMessageInput from './ChatMessageInput.jsx';
+import ChatMessagePane from 'podfriend-approot/components/Chat/ChatMessagePane.jsx';
+
+const ChatModal = ({ shown, onDismiss, isLoggedIn, activePodcast, activeEpisode, onMessageSubmit, messages }) => {
+	return (
+		<Modal
+			shown={shown}
+			onClose={onDismiss}
+			onlyBottomSheet={true}
+			defaultSnap={({ maxHeight }) => maxHeight / 2}
+			snapPoints={({ maxHeight }) => [ maxHeight / 2, maxHeight - 30 ]}
+			header={
+				<h2>
+				  CHAT
+				</h2>
+			  }
+			  footer={
+				<ChatMessageInput isLoggedIn={isLoggedIn} onMessageSubmit={onMessageSubmit} />
+			  }
+		  >
+				<ChatMessagePane messages={messages} />
+		</Modal>
+	);
+}
+export default ChatModal;

app/components/Chat/ChatProvider.jsx

@@ -0,0 +1,68 @@
+import React, { useState, useEffect } from 'react';
+
+import { useSelector } from 'react-redux';
+
+import socketIOClient from "socket.io-client";
+
+const chatServerURI = process.env.NODE_ENV === 'development' ? "http://192.168.86.89:9999" : 'https://chat.podfriend.com:9999/';
+
+const ChatProvider = ({ chatModal, roomId }) => {
+	const [socket,setSocket] = useState(false);
+	const [messages,setMessages] = useState([]);
+	const isLoggedIn = useSelector((state) => { return state.user.isLoggedIn});
+	const authToken = useSelector((state) => { return state.user.authToken});
+
+	const onMessageSubmit = (message) => {
+		socket.emit('chatMessage',{
+			message: message
+		});
+	};
+
+	useEffect(() => {
+		setSocket(socketIOClient(chatServerURI));
+	},[]);
+
+	useEffect(() => {
+		if (socket) {
+			socket.emit('login',{
+				authToken: authToken,
+				roomId: roomId
+			});
+		}
+	},[socket]);
+
+	useEffect(() => {
+		if (!socket) {
+			return;
+		}
+
+		socket.on('connect',() => {
+			console.log('Chat connected!');
+		});
+		socket.on('loginCompleted',(data) => {
+			console.log('Logged into chat!');
+			console.log(data);
+		});
+		socket.on("chatMessage", data => {
+			const newMessage = {
+				name: data.name,
+				text: data.text
+			};
+			setMessages((messages) => { return [...messages, newMessage]; });
+		});
+		return () => {
+			socket.disconnect();
+		};
+	}, [ socket ]);
+
+	const ChatModal = chatModal;
+
+	return (
+		<ChatModal
+			onMessageSubmit={onMessageSubmit}
+			messages={messages}
+			isLoggedIn={isLoggedIn}
+		/>
+	);
+};
+export default ChatProvider;

app/components/Episode/Chapters/EpisodeChapters.jsx

@@ -6,7 +6,7 @@ import styles from './EpisodeChapters.scss';
 
 var randomColor = require('randomcolor');
 
-const EpisodeChapters = ({ chapters, progress }) => {
+const EpisodeChapters = ({ audioController, chapters, progress }) => {
 	// const [chapters,setChapters] = useState(false);
 
 	const [fadeOutChapter,setFadeoutChapter] = useState(false);
@@ -22,6 +22,27 @@ const EpisodeChapters = ({ chapters, progress }) => {
 		console.log(currentChapter);
 	},[currentChapter]);
 	*/
+	useEffect(() => {
+		setCurrentChapter(false);
+	},[]);
+
+	useEffect(() => {
+		if (!currentChapter) {
+			return;
+		}
+
+		if ('mediaSession' in navigator) {
+			if (currentChapter.img && audioController) {
+				audioController.setCoverImage(currentChapter.img);
+			}
+			else if (audioController) {
+				audioController.restoreCoverImage();
+			}
+		}
+
+		// console.log('new current Chapter: ');
+		// console.log(currentChapter);
+	},[currentChapter]);
 
 	useEffect(() => {
 		var foundChapter = false;
@@ -37,7 +58,7 @@ const EpisodeChapters = ({ chapters, progress }) => {
 				}
 			}
 		}
-		if (foundChapter !== currentChapter) {
+		if (foundChapter != currentChapter) {
 			setFadeoutChapter(currentChapter);
 			setCurrentChapter(foundChapter);
 		}

app/components/Episode/EpisodePane.jsx

@@ -8,8 +8,6 @@ import styles from './EpisodePane.scss';
 
 import { Link, useParams, useHistory, useLocation } from "react-router-dom";
 
-import ChatPane from 'podfriend-approot/components/Chat/ChatPane.jsx';
-
 import PodcastImage from 'podfriend-approot/components/UI/common/PodcastImage.jsx';
 
 import LoadingRings from 'podfriend-approot/images/design/loading-rings.svg';
@@ -134,10 +132,7 @@ const EpisodePane = () => {
 				setDescription(tempDescription);
 				setEpisode(episode);
 
-				if (episodeId == '583592038') {
-					loadChapters('https://studio.hypercatcher.com/chapters/podcast/http:feed.nashownotes.comrss.xml/episode/http:1291.noagendanotes.com');
-				}
-				else if (episode.chaptersUrl) {
+				if (episode.chaptersUrl) {
 					loadChapters(episode.chaptersUrl);
 				}
 				else {
@@ -209,12 +204,12 @@ const EpisodePane = () => {
 				{ selectedPodcast !== false && episode !== false && 
 					<>
 						{ !isActiveEpisode &&
-							<div onClick={onEpisodePlay} className={styles.playButton}>
+							<div onClick={onEpisodePlay} className={'button ' + styles.playButton}>
 									<FaPlay /> Play this episode
 							</div>
 						}
 						{ isActiveEpisode &&
-							<div onClick={onEpisodePlay} className={styles.playButton}>
+							<div onClick={onEpisodePlay} className={'button ' + styles.playButton}>
 									<FaPlay /> Resume this episode
 							</div>
 						}