lots of refactoring

MartinMouritzen · Sep 27, 2021 · 3254bcf · 3254bcf
1 parent b4709d7
commit 3254bcf
Show file tree

Hide file tree

Showing 27 changed files with 279 additions and 443 deletions.
diff --git a/app/.gcloudignore b/app/.gcloudignore
diff --git a/app/app.icns b/app/app.icns
diff --git a/app/components/PodCastClient.jsx b/app/components/PodCastClient.jsx
@@ -25,9 +25,10 @@ const PodcastPaneUI = lazy(() => import('./Podcast/PodcastPaneUI.jsx'));
 import Player from './Player/Player.jsx';
 import PlayerUI from './Player/PlayerUI.jsx';
 
-import Welcome from './Welcome.jsx';
+import Welcome from 'podfriend-approot/pages/Welcome.jsx';
+// import Welcome from 'podfriend-approot/pages/IonicTest.jsx';
 
-import FeedPage from 'podfriend-approot/components/Pages/FeedPage.jsx';
+import FeedPage from 'podfriend-approot/pages/FeedPage.jsx';
 
 // import SettingsPage from '~/app/components/user/SettingsPage';
 const SettingsPage = lazy(() => import('~/app/components/user/SettingsPage'));
@@ -59,7 +60,7 @@ import 'react-spring-bottom-sheet/dist/style.css'
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/react/css/core.css';
-import {setupConfig} from '@ionic/react'
+import {setupConfig} from '@ionic/react';
 
 setupConfig({mode: 'ios'})
 

diff --git a/app/components/PodCastClient.scss b/app/components/PodCastClient.scss
@@ -109,15 +109,31 @@ p {
 .mainArea {
 	flex: 2;
 	max-width: 100%;
-	height: 100%;
 	overflow-x: hidden;
 	overflow-y: hidden;
 	box-shadow: -4px 3px 8px 1px rgba(0,0,0,0.35);
 	border-radius: 20px 0px 0px 0px;
 
 	filter: blur(0px); /* hack for chrome to make backdrop-filter and scrolling work on childs */
+
+	/*
+	max-height: calc(100% - 90px);
+	@media only screen and (max-width: 570px) {
+		max-height: calc(100% - 60px);
+	}
+	*/
 }
 :global {
+	/*
+	.header-ios {
+		background: var(--ion-color-primary) !important;
+	}
+	*/
+	.ion-page {
+		background-color: #ff23aa;
+		flex: 1;
+		height: calc(100% - 44px);
+	}
 	.podfriendModal {
 		p {
 			a {
@@ -257,11 +273,11 @@ p {
 	.podcastPage {
 		overflow-y: auto;
 
-		height: calc(100% - 90px);
+		/* height: calc(100% - 90px);*/
 	}
 	@media only screen and (max-width: 570px) {
 		.podcastPage {
-			height: calc(100% - 60px);
+			/* height: calc(100% - 60px);*/
 		}
 	}
 	.contentPage, .landingPage {

diff --git a/app/components/Podcast/PodcastExtras.jsx b/app/components/Podcast/PodcastExtras.jsx
@@ -66,7 +66,7 @@ const PodcastExtras = React.memo(({isSubscribed, isArchived, selectedPodcast,sub
 					</div>
 				}
 				{ selectedPodcast.funding && selectedPodcast.funding.url &&
-					<button className={styles.donateButton} onClick={goToFundingUrl}><DonateIcon /> Donate to podcast</button>
+					<button className={'button ' + styles.donateButton} onClick={goToFundingUrl}><DonateIcon /> Donate to podcast</button>
 				}
 			</div>
 			<div className={styles.share}>

diff --git a/app/components/Podcast/PodcastPaneUI.jsx b/app/components/Podcast/PodcastPaneUI.jsx
@@ -17,6 +17,8 @@ import styles from './PodCastPane.css';
 import PodcastHeader from './PodcastHeader.jsx';
 import PodcastExtras from './PodcastExtras.jsx';
 
+
+
 const StyledBadge = withStyles(theme => ({
 	badge: {
 	  backgroundColor: '#0176e5',
@@ -43,117 +45,119 @@ const PodCastPaneUI = ({ showEpisode = false, selectedPodcast, description, podc
 	};
 
 	return (
-		<div ref={podcastPane} className={styles.podcastPane}>
-			{/*
-			<Header>
-				<div>
-					Test of the awesome header
-				</div>
-			</Header>
-			*/}
-			<PodcastHeader
-				reviewCount={selectedPodcast.review_totalCount}
-				reviewScore={selectedPodcast.review_totalScore}
-				coverImage={selectedPodcast.artworkUrl600}
-				imageUrlHash={selectedPodcast.imageUrlHash}
-				categories={selectedPodcast.categories}
-				podcastGuid={selectedPodcast.guid}
-				path={selectedPodcast.path}
-				title={selectedPodcast.name}
-				author={selectedPodcast.author}
-				website={selectedPodcast.link}
-				description={description}
-				podcastLoading={podcastLoading}
-				podcastLoadingError={podcastLoadingError}
-
-				rssFeed={rssFeed}
-			/>
-			<PodcastExtras
-				isSubscribed={isSubscribed}
-				selectedPodcast={selectedPodcast}
-				subscribedPodcasts={subscribedPodcasts}
-				subscribeToPodcast={subscribeToPodcast}
-				unsubscribeToPodcast={unsubscribeToPodcast}
-				isArchived={isArchived}
-				podcastLoadingError={podcastLoading}
-				archivePodcast={archivePodcast}
-				unarchivePodcast={unarchivePodcast}
-
-				rssFeed={rssFeed}
-			/>
-
-			<div className={styles.podcastContent}>
-
-				<EpisodeList podcastPane={podcastPane} currentPodcastPlaying={currentPodcastPlaying} onEpisodeSelect={onEpisodeSelect} podcastInfo={selectedPodcast} episodes={selectedPodcast.episodes} rssFeed={rssFeed} />
-
-{/*
-				<Tabs
-					variant="fullWidth"
-					value={tabIndex}
-					onChange={handleTabChange}
-					TabIndicatorProps={{
-						style: {
-							backgroundColor: '#0176e5'
-						}
-					}}
-				>
-					<Tab label={<StyledBadge badgeContent={4} max={999}>Episodes</StyledBadge>} value="episodes" />
-					<Tab label={<StyledBadge badgeContent={3} max={999}>Reviews</StyledBadge>} value="reviews" />
-				</Tabs>
-
-				{ tabIndex === 'episodes' &&
-					<div className={styles.episodeTab}>
-						<div className={styles.episodeColumn}>
-						<EpisodeList currentPodcastPlaying={currentPodcastPlaying} onEpisodeSelect={onEpisodeSelect} podcastInfo={selectedPodcast} episodes={selectedPodcast.episodes} />
-						
-							{ podcastLoadingError &&
-								<div>
-									Error reading Podcast File
-								</div>
-							}
-							{ !podcastLoadingError && podcastLoading && 
-								<div className={styles.episodeListLoading}>
-									<div className="loading-line loading-episode">&nbsp;</div>
-									<div className="loading-line loading-episode">&nbsp;</div>
-									<div className="loading-line loading-episode">&nbsp;</div>
-									<div className="loading-line loading-episode">&nbsp;</div>
-									<div className="loading-line loading-episode">&nbsp;</div>
-									<div className="loading-line loading-episode">&nbsp;</div>
-									<div className="loading-line loading-episode">&nbsp;</div>
-									<div className="loading-line loading-episode">&nbsp;</div>
-									<div className="loading-line loading-episode">&nbsp;</div>
-								</div>
+
+			<div ref={podcastPane} className={styles.podcastPane}>
+				{/*
+				<Header>
+					<div>
+						Test of the awesome header
+					</div>
+				</Header>
+				*/}
+				<PodcastHeader
+					reviewCount={selectedPodcast.review_totalCount}
+					reviewScore={selectedPodcast.review_totalScore}
+					coverImage={selectedPodcast.artworkUrl600}
+					imageUrlHash={selectedPodcast.imageUrlHash}
+					categories={selectedPodcast.categories}
+					podcastGuid={selectedPodcast.guid}
+					path={selectedPodcast.path}
+					title={selectedPodcast.name}
+					author={selectedPodcast.author}
+					website={selectedPodcast.link}
+					description={description}
+					podcastLoading={podcastLoading}
+					podcastLoadingError={podcastLoadingError}
+
+					rssFeed={rssFeed}
+				/>
+				<PodcastExtras
+					isSubscribed={isSubscribed}
+					selectedPodcast={selectedPodcast}
+					subscribedPodcasts={subscribedPodcasts}
+					subscribeToPodcast={subscribeToPodcast}
+					unsubscribeToPodcast={unsubscribeToPodcast}
+					isArchived={isArchived}
+					podcastLoadingError={podcastLoading}
+					archivePodcast={archivePodcast}
+					unarchivePodcast={unarchivePodcast}
+
+					rssFeed={rssFeed}
+				/>
+
+				<div className={styles.podcastContent}>
+
+					<EpisodeList podcastPane={podcastPane} currentPodcastPlaying={currentPodcastPlaying} onEpisodeSelect={onEpisodeSelect} podcastInfo={selectedPodcast} episodes={selectedPodcast.episodes} rssFeed={rssFeed} />
+
+	{/*
+					<Tabs
+						variant="fullWidth"
+						value={tabIndex}
+						onChange={handleTabChange}
+						TabIndicatorProps={{
+							style: {
+								backgroundColor: '#0176e5'
 							}
+						}}
+					>
+						<Tab label={<StyledBadge badgeContent={4} max={999}>Episodes</StyledBadge>} value="episodes" />
+						<Tab label={<StyledBadge badgeContent={3} max={999}>Reviews</StyledBadge>} value="reviews" />
+					</Tabs>
+
+					{ tabIndex === 'episodes' &&
+						<div className={styles.episodeTab}>
+							<div className={styles.episodeColumn}>
+							<EpisodeList currentPodcastPlaying={currentPodcastPlaying} onEpisodeSelect={onEpisodeSelect} podcastInfo={selectedPodcast} episodes={selectedPodcast.episodes} />
+							
+								{ podcastLoadingError &&
+									<div>
+										Error reading Podcast File
+									</div>
+								}
+								{ !podcastLoadingError && podcastLoading && 
+									<div className={styles.episodeListLoading}>
+										<div className="loading-line loading-episode">&nbsp;</div>
+										<div className="loading-line loading-episode">&nbsp;</div>
+										<div className="loading-line loading-episode">&nbsp;</div>
+										<div className="loading-line loading-episode">&nbsp;</div>
+										<div className="loading-line loading-episode">&nbsp;</div>
+										<div className="loading-line loading-episode">&nbsp;</div>
+										<div className="loading-line loading-episode">&nbsp;</div>
+										<div className="loading-line loading-episode">&nbsp;</div>
+										<div className="loading-line loading-episode">&nbsp;</div>
+									</div>
+								}
+							</div>
 						</div>
-					</div>
-				}
-				{ tabIndex === 'reviews' &&
-					<ReviewPane podcast={selectedPodcast} />
-				}
-*/}
-{/*
-				<Tab title="Community" link={'/podcast/' + selectedPodcast.path + '/community'}>
-						community test content
-					</Tab>
-
-					<Tab title="Lists" link={'/podcast/' + selectedPodcast.path + '/lists'}>
-						Lists that feature this podcast
-					</Tab>
-					
-					<Tab title="Creators & Guests" link={'/podcast/' + selectedPodcast.path + '/creators-and-guests'}>
-						creator test content
-					</Tab>
-
-					<Tab title="Podcast content" link={'/podcast/' + selectedPodcast.path + '/extraContent'}>
-						podcast test content
-					</Tab>
+					}
+					{ tabIndex === 'reviews' &&
+						<ReviewPane podcast={selectedPodcast} />
+					}
+	*/}
+	{/*
+					<Tab title="Community" link={'/podcast/' + selectedPodcast.path + '/community'}>
+							community test content
+						</Tab>
+
+						<Tab title="Lists" link={'/podcast/' + selectedPodcast.path + '/lists'}>
+							Lists that feature this podcast
+						</Tab>
+						
+						<Tab title="Creators & Guests" link={'/podcast/' + selectedPodcast.path + '/creators-and-guests'}>
+							creator test content
+						</Tab>
+
+						<Tab title="Podcast content" link={'/podcast/' + selectedPodcast.path + '/extraContent'}>
+							podcast test content
+						</Tab>
+					*/}
+				</div>
+				{/*
+					<div className={styles.headline}>Podcasts like this</div>
+					<div style={{ paddingLeft: '30px', marginBottom: '30px' }}>... Coming soon!</div>
 				*/}
 			</div>
-			{/*
-				<div className={styles.headline}>Podcasts like this</div>
-				<div style={{ paddingLeft: '30px', marginBottom: '30px' }}>... Coming soon!</div>
-			*/}
-		</div>
+
 	);
 }
 export default PodCastPaneUI;
diff --git a/app/components/UI/SideBar.jsx b/app/components/UI/SideBar.jsx
@@ -101,6 +101,11 @@ class SideBar extends Component {
 							<Link to="/" className={styles.mainNavigationButton}>
 								<FaHome size="20" /> Home
 							</Link>
+							{ true &&
+								<Link to="/history/" className={styles.mainNavigationButton}>
+									<FaRegLightbulb size="20" /> History
+								</Link>
+							}
 							<Link to="/podfrndr/" className={styles.mainNavigationButton}>
 								<FaRegLightbulb size="20" /> Podfrndr
 							</Link>

diff --git a/app/components/UI/SideBar.scss b/app/components/UI/SideBar.scss
@@ -96,6 +96,8 @@
 	border-radius: 10px 0px 0px 0px;
 
 	padding-bottom: 90px;
+
+	background-color: #f5f9fb;
 }
 .podcastHeader {
 	padding: 10px;