Merge pull request #251 from stevencrader/fix-dark-mode

Fix dark mode and other issues
Podcastindex-org · Apr 17, 2023 · 1893674 · 1893674
2 parents de423ff + 6949807
commit 1893674
Show file tree

Hide file tree

Showing 28 changed files with 307 additions and 80 deletions.
diff --git a/ui/images/dark_mode.svg b/ui/images/dark_mode.svg
diff --git a/ui/images/light_mode.svg b/ui/images/light_mode.svg
diff --git a/ui/images/transcript.svg b/ui/images/transcript.svg
diff --git a/ui/src/components/Button/styles.scss b/ui/src/components/Button/styles.scss
@@ -1,9 +1,9 @@
 :root {
+    --button-background: #F0F0F0;
     --button-hover-color: #f2f2f2;
-}
 
-@media (prefers-color-scheme: dark) {
-    :root {
+    &[data-theme="dark"] {
+        --button-background: #1a1a1a;
         --button-hover-color: #302d2d;
     }
 }
@@ -14,6 +14,7 @@
     font-family: var(--font-family-exp);
     font-size: 16px;
     color: var(--fg-main);
+    background-color: var(--button-background);
     padding: 8px 20px;
     text-align: center;
     white-space: nowrap;

diff --git a/ui/src/components/EpisodeItem/index.tsx b/ui/src/components/EpisodeItem/index.tsx
@@ -143,7 +143,7 @@ export default class EpisodeItem extends React.PureComponent<IProps> {
 
                             {episodeEnclosure ?
                                 <a
-                                    className="episode-enclosure"
+                                    className="episode-link"
                                     href={episodeEnclosure}
                                     title="Download"
                                     target="_blank"

diff --git a/ui/src/components/EpisodeItem/styles.scss b/ui/src/components/EpisodeItem/styles.scss
@@ -2,10 +2,8 @@
     --bg-color: #ffffff;
     --border-color: #d6d6d6;
     --cover-art-border-color: lighten(#d6d6d6, 0.2);
-}
 
-@media (prefers-color-scheme: dark) {
-    :root {
+    &[data-theme="dark"] {
         --bg-color: #180e0e;
         --border-color: #505050;
         --cover-art-border-color: var(--border-color);
@@ -36,8 +34,9 @@
     justify-content: center;
     padding: 15px 15px 15px 15px;
     img {
-        height: 140px;
+        max-height: 140px;
         width: 140px;
+        //object-fit: contain;
         border-radius: 10px;
         border: 1px solid var(--cover-art-border-color);
     }
@@ -71,15 +70,13 @@
 .episode-links {
     display: inline-flex;
     flex-direction: row;
+    gap: 5px;
 }
 
 .episode-link img, .episode-play-pause-mobile {
     width: 30px;
     height: 30px;
 }
-.episode-enclosure {
-    margin-left: 10px;
-}
 .episode-play-pause-mobile {
     display: none;
     margin-left: 20px;

diff --git a/ui/src/components/KPI/styles.scss b/ui/src/components/KPI/styles.scss
@@ -1,9 +1,7 @@
 :root {
     --kpi-title-color: #494949;
-}
 
-@media (prefers-color-scheme: dark) {
-    :root {
+    &[data-theme="dark"] {
         --kpi-title-color: #cdcdcd;
     }
 }

diff --git a/ui/src/components/Player/styles.scss b/ui/src/components/Player/styles.scss
@@ -37,7 +37,7 @@
         text-overflow: ellipsis;
         margin-bottom: 5px;
 
-        > a {
+        a {
             font-size: 16px;
             font-family: var(--font-family);
             color: var(--fg-main);
@@ -77,18 +77,21 @@
             }
         }
     } 
-    @media (prefers-color-scheme: dark) {
-        .rhap_container {
-            background-color: var(--bg-main);
-        }
-        .rhap_time {
-            color: var(--fg-main);
-        }
+}
+:root[data-theme="dark"] {
+    .rhap_container {
+        background-color: var(--bg-main);
+    }
+    .rhap_time {
+        color: var(--fg-main);
     }
 }
 
 @media only screen and (max-width: 520px) {
     .player-show-title p {
         max-width: 350px;
     }
+    .player-podcast-name {
+        max-width: 350px;
+    }
 }
diff --git a/ui/src/components/PodcastHeader/index.tsx b/ui/src/components/PodcastHeader/index.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import Button from "../Button";
 
 import Value from '../Value'
 import NoImage from '../../../images/no-cover-art.png'
@@ -151,7 +152,7 @@ export default class PodcastHeader extends React.PureComponent<IProps, PodState>
                                 : ""
                             }
                             {feedURL ?
-                                <button onClick={this.copyClicked}>{ this.state.copyMessage }</button>
+                                <Button small={true} onClick={this.copyClicked}>{ this.state.copyMessage }</Button>
                                 : ""
                             }
                         </div>

diff --git a/ui/src/components/PodcastHeader/styles.scss b/ui/src/components/PodcastHeader/styles.scss
@@ -2,10 +2,8 @@
     --category-bg-color: #f3f3f3;
     --category-border-color: #cecece;
     --cover-art-border-color: lighten(#d6d6d6, 0.2);
-}
 
-@media (prefers-color-scheme: dark) {
-    :root {
+    &[data-theme="dark"] {
         --category-bg-color: #302d2d;
         --category-border-color: #505050;
         --cover-art-border-color: var(--border-color);
@@ -26,6 +24,7 @@
     img {
         height: 300px;
         width: 300px;
+        object-fit: contain;
         border-radius: 10px;
         border: 1px solid var(--cover-art-border-color);
     }

diff --git a/ui/src/components/RecentPodcasts/index.tsx b/ui/src/components/RecentPodcasts/index.tsx
@@ -7,7 +7,7 @@ import NoImage from '../../../images/no-cover-art.png'
 import ForwardIcon from '../../../images/chevron-forward-outline.svg'
 import 'react-h5-audio-player/src/styles.scss'
 import './styles.scss'
-import {Link} from "react-router-dom";
+import { Link } from "react-router-dom";
 
 interface IProps {
     title?: string
@@ -17,16 +17,20 @@ interface IProps {
 
 interface IState {
     index: number
+    imageLoading: boolean
 }
 
 export default class RecentPodcasts extends React.Component<IProps, IState> {
     static defaultProps = {}
     state = {
         index: 0,
+        imageLoading: true
     }
 
     constructor(props: IProps) {
         super(props)
+        // fix this in handlers
+        this.onImageLoad = this.onImageLoad.bind(this)
     }
 
     selectPodcast(index: number, evt) {
@@ -35,16 +39,28 @@ export default class RecentPodcasts extends React.Component<IProps, IState> {
         this.setState({index})
     }
 
+    getImage(selectedPodcast) {
+        return selectedPodcast.image || selectedPodcast.feedImage || NoImage
+    }
+
+    updateIndex(newIndex: number) {
+        const {index} = this.state
+        const {podcasts} = this.props
+        const imageLoading = this.getImage(podcasts[index]) !== this.getImage(podcasts[newIndex])
+        this.setState({
+            index: newIndex,
+            imageLoading: imageLoading,
+        })
+    }
+
     onBack() {
         const {index} = this.state
         const {podcasts} = this.props
         let backIndex = index - 1
         if (backIndex < 0) {
             backIndex = podcasts.length - 1
         }
-        this.setState({
-            index: backIndex,
-        })
+        this.updateIndex(backIndex)
     }
 
     onForward() {
@@ -54,15 +70,20 @@ export default class RecentPodcasts extends React.Component<IProps, IState> {
         if (nextIndex >= podcasts.length) {
             nextIndex = 0
         }
+        this.updateIndex(nextIndex)
+    }
+
+    onImageLoad() {
         this.setState({
-            index: nextIndex,
+            imageLoading: false,
         })
     }
 
     render() {
         const {loading, title, podcasts} = this.props
-        const {index} = this.state
+        const {index, imageLoading} = this.state
         const selectedPodcast = podcasts[index]
+        const imageLoadingClass = imageLoading ? "image-loading" : ""
         return (
             <div className="player-card">
                 {loading ? (
@@ -92,13 +113,21 @@ export default class RecentPodcasts extends React.Component<IProps, IState> {
                         )}
                         <div className="player-cover-art">
                             <Link to={`/podcast/${selectedPodcast.feedId}`}>
-                                <img
-                                    draggable={false}
-                                    src={selectedPodcast.image || selectedPodcast.feedImage || NoImage}
-                                    onError={(ev: any) => {
-                                        ev.target.src = NoImage
-                                    }}
-                                />
+                                <>
+                                    <img
+                                        className={imageLoadingClass}
+                                        draggable={false}
+                                        src={this.getImage(selectedPodcast)}
+                                        onError={(ev: any) => {
+                                            ev.target.src = NoImage
+                                            this.onImageLoad()
+                                        }}
+                                        onLoad={this.onImageLoad}
+                                    />
+                                    {imageLoading && <div className="image-loading-placeholder">
+                                        <ReactLoading type="cylon" color="#e90000"/>
+                                    </div>}
+                                </>
                             </Link>
                         </div>
                         <div className="player-bottom">

diff --git a/ui/src/components/RecentPodcasts/styles.scss b/ui/src/components/RecentPodcasts/styles.scss
@@ -2,10 +2,8 @@
     --player-bg-color: #ffffff;
     --player-border-color: #d6d6d6;
     --player-cover-art-border-color: lighten(#d6d6d6, 0.2);
-}
 
-@media (prefers-color-scheme: dark) {
-    :root {
+    &[data-theme="dark"] {
         --player-bg-color: var(--bg-main);
         --player-border-color: #302d2d;
         --player-cover-art-border-color: darken(#302d2d, 0.2);
@@ -118,12 +116,28 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    // padding: 25px 25px 0 25px;
+
     img {
         width: 450px;
         height: 450px;
+        object-fit: contain;
         border-radius: 14px;
         border: 1px solid var(--player-cover-art-border-color);
+
+        &.image-loading {
+            height: 0;
+            position: absolute;
+        }
+    }
+    .image-loading-placeholder {
+        width: 450px;
+        height: 450px;
+        display: grid;
+        align-items: center;
+
+        div {
+            justify-self: center;
+        }
     }
     z-index: 99999;
 }
@@ -159,7 +173,10 @@
             width: 275px;
             height: 275px;
             border-radius: 10px;
-            border: 1px solid lighten(#d6d6d6, 0.2);
+        }
+        .image-loading-placeholder {
+            width: 275px;
+            height: 275px;
         }
     }
 }
diff --git a/ui/src/components/ResultItem/styles.scss b/ui/src/components/ResultItem/styles.scss
@@ -4,10 +4,8 @@
     --category-bg-color: #f3f3f3;
     --category-border-color: #cecece;
     --cover-art-border-color: lighten(#d6d6d6, 0.2);
-}
 
-@media (prefers-color-scheme: dark) {
-    :root {
+    &[data-theme="dark"] {
         --bg-color: #180e0e;
         --border-color: #505050;
         --category-bg-color: #302d2d;
@@ -43,6 +41,7 @@
     img {
         height: 140px;
         width: 140px;
+        object-fit: contain;
         border-radius: 10px;
         border: 1px solid var(--cover-art-border-color);
     }
@@ -140,11 +139,8 @@
     }
     .result-category {
         font-size: 14px;
-        background: #f3f3f3;
-        border: 1px solid #cecece;
         border-radius: 5px;
         margin: 3px;
-
         padding: 4px 12px;
     }
 }
diff --git a/ui/src/components/SearchBar/styles.scss b/ui/src/components/SearchBar/styles.scss
@@ -2,10 +2,8 @@
     --input-bg-color: #f7f7f7;
     --input-border-color: #d6d6d6;
     --input-placeholder-color: #b6b6b6;
-}
 
-@media (prefers-color-scheme: dark) {
-    :root {
+    &[data-theme="dark"] {
         --input-bg-color: #000000;
         --input-border-color: #303030;
         --input-placeholder-color: #969696;