diff --git a/src/plugins/backgrounds/apod/Apod.sass b/src/plugins/backgrounds/apod/Apod.sass new file mode 100644 index 00000000..fe9e1e8f --- /dev/null +++ b/src/plugins/backgrounds/apod/Apod.sass @@ -0,0 +1,16 @@ +.Apod + .picture + background-position: 50% 50% + background-size: cover + transition: opacity 0.25s ease-out + + .title + display: flex + flex-direction: column + position: absolute + bottom: 1rem + left: 1rem + right: 1rem + + p + margin: 4px 0 0 diff --git a/src/plugins/backgrounds/apod/Apod.tsx b/src/plugins/backgrounds/apod/Apod.tsx index 13d07a1c..f6052914 100644 --- a/src/plugins/backgrounds/apod/Apod.tsx +++ b/src/plugins/backgrounds/apod/Apod.tsx @@ -5,6 +5,7 @@ import Backdrop from "../../../views/shared/Backdrop"; import { defaultData, Props } from "./types"; import { getPicture } from "./api"; import ApodTitle from "./ApodTitle"; +import "./Apod.sass"; const Unsplash: React.FC = ({ cache, @@ -14,6 +15,7 @@ const Unsplash: React.FC = ({ }) => { const [picture, setPicture] = React.useState(cache); const mounted = React.useRef(false); + React.useEffect(() => { getPicture(data, loader).then(setCache); if (mounted.current || !picture) getPicture(data, loader).then(setPicture); @@ -21,20 +23,26 @@ const Unsplash: React.FC = ({ }, [data.customDate, data.date]); return ( -
+
- {picture && data.showTitle && } + {picture && data.showTitle && ( + + )}
); }; diff --git a/src/plugins/backgrounds/apod/ApodSettings.sass b/src/plugins/backgrounds/apod/ApodSettings.sass index b150e8ef..f5590e23 100644 --- a/src/plugins/backgrounds/apod/ApodSettings.sass +++ b/src/plugins/backgrounds/apod/ApodSettings.sass @@ -1,3 +1,3 @@ .ApodSettings .date - margin-left: 4px; \ No newline at end of file + margin-left: 4px diff --git a/src/plugins/backgrounds/apod/ApodTitle.tsx b/src/plugins/backgrounds/apod/ApodTitle.tsx index e77071db..096db043 100644 --- a/src/plugins/backgrounds/apod/ApodTitle.tsx +++ b/src/plugins/backgrounds/apod/ApodTitle.tsx @@ -1,13 +1,12 @@ import React from "react"; -import giphyLogo from "./giphy-logo.png"; +import { Image } from "./types"; -type Props = { - title?: string; -}; +type Props = Pick; -const Credit: React.FC = ({ title }) => ( -
- {title} +const Credit: React.FC = ({ title, copyright }) => ( +
+

{title}

+ {copyright &&

© {copyright}

}
); diff --git a/src/plugins/backgrounds/apod/api.ts b/src/plugins/backgrounds/apod/api.ts index cb204b3d..8cf3d559 100644 --- a/src/plugins/backgrounds/apod/api.ts +++ b/src/plugins/backgrounds/apod/api.ts @@ -12,8 +12,6 @@ export async function getPicture( data: Config, loader: API["loader"], ): Promise { - console.log("in getPicture"); - const url = "https://api.nasa.gov/planetary/apod"; const params = new URLSearchParams(); diff --git a/src/plugins/backgrounds/apod/types.ts b/src/plugins/backgrounds/apod/types.ts index 398c7b3b..f71ee345 100644 --- a/src/plugins/backgrounds/apod/types.ts +++ b/src/plugins/backgrounds/apod/types.ts @@ -17,6 +17,7 @@ export interface Image { media_type: string; explanation: string; thumbnail_url: string; + copyright: string; } type Cache = Image;