Fix: maskable icon PWA & fullscreen

sawyerf · Jan 20, 2025 · d1c5dc3 · d1c5dc3
1 parent b4e07d6
commit d1c5dc3
Show file tree

Hide file tree

Showing 11 changed files with 86 additions and 100 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -36,8 +36,6 @@ jobs:
         run: npm ci
       - name: Export Project
         run: npm run export:web
-      - name: Copy icon.png
-        run: cp ./assets/icon.png ./web-build/pwa/icon.png
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:

diff --git a/app/components/bar/TabBar.js b/app/components/bar/TabBar.js
@@ -9,7 +9,6 @@ import SideBar from '~/components/bar/SideBar';
 const TabBar = ({ state, descriptors, navigation }) => {
 	const config = React.useContext(ConfigContext)
 	const settings = React.useContext(SettingsContext)
-	const [isFullScreen, setIsFullScreen] = React.useState(false)
 
 	React.useEffect(() => {
 		if (config.query === null) {
@@ -20,13 +19,11 @@ const TabBar = ({ state, descriptors, navigation }) => {
 	return (
 		<>
 			{
-				!isFullScreen ?
-					settings.isDesktop ?
-						<SideBar state={state} descriptors={descriptors} navigation={navigation} />
-						: <BottomBar state={state} descriptors={descriptors} navigation={navigation} />
-					: null
+				settings.isDesktop ?
+					<SideBar state={state} descriptors={descriptors} navigation={navigation} />
+					: <BottomBar state={state} descriptors={descriptors} navigation={navigation} />
 			}
-			<Player state={state} fullscreen={{ value: isFullScreen, set: setIsFullScreen }} />
+			<Player state={state} />
 		</>
 	);
 }

diff --git a/app/components/player/BoxDesktopPlayer.js b/app/components/player/BoxDesktopPlayer.js
@@ -14,7 +14,7 @@ import FavoritedButton from '~/components/button/FavoritedButton';
 import size from '~/styles/size';
 import PlayButton from '~/components/button/PlayButton';
 
-const BoxDesktopPlayer = ({ fullscreen }) => {
+const BoxDesktopPlayer = ({ setFullScreen }) => {
 	const song = React.useContext(SongContext)
 	const songDispatch = React.useContext(SongDispatchContext)
 	const config = React.useContext(ConfigContext)
@@ -27,7 +27,7 @@ const BoxDesktopPlayer = ({ fullscreen }) => {
 		<View
 			style={styles.container(theme)}>
 			<Pressable
-				onPress={() => fullscreen.set(true)}
+				onPress={() => setFullScreen(true)}
 				style={{ flexDirection: 'row', flex: 1 }}
 			>
 				<ImageError
@@ -122,7 +122,7 @@ const BoxDesktopPlayer = ({ fullscreen }) => {
 					size={17}
 					style={{ padding: 5, paddingHorizontal: 8, marginStart: 15, borderRadius: 4 }}
 					color={theme.primaryLight}
-					onPress={() => fullscreen.set(true)}
+					onPress={() => setFullScreen(true)}
 				/>
 			</View>
 		</View >

diff --git a/app/components/player/BoxPlayer.js b/app/components/player/BoxPlayer.js
@@ -14,7 +14,7 @@ import ImageError from '~/components/ImageError';
 import size from '~/styles/size';
 import useKeyboardIsOpen from '~/utils/useKeyboardIsOpen';
 
-const BoxPlayer = ({ fullscreen }) => {
+const BoxPlayer = ({ setFullScreen }) => {
 	const song = React.useContext(SongContext)
 	const songDispatch = React.useContext(SongDispatchContext)
 	const config = React.useContext(ConfigContext)
@@ -24,7 +24,7 @@ const BoxPlayer = ({ fullscreen }) => {
 
 	return (
 		<Pressable
-			onPress={() => fullscreen.set(true)}
+			onPress={() => setFullScreen(true)}
 			style={{
 				position: 'absolute',
 				bottom: (insets.bottom ? insets.bottom : 15) + 53,

diff --git a/app/components/player/FullScreenHorizontalPlayer.js b/app/components/player/FullScreenHorizontalPlayer.js
@@ -29,7 +29,7 @@ const color = {
 	secondary: '#c6c6c6'
 }
 
-const FullScreenHorizontalPlayer = ({ fullscreen }) => {
+const FullScreenHorizontalPlayer = ({ setFullScreen }) => {
 	const [isPreview, setIsPreview] = React.useState(preview.COVER)
 	const config = React.useContext(ConfigContext)
 	const insets = useSafeAreaInsets()
@@ -49,7 +49,7 @@ const FullScreenHorizontalPlayer = ({ fullscreen }) => {
 
 	return (
 		<Modal
-			visible={fullscreen.value}
+			visible={true}
 			transparent={true}
 		>
 			<Image
@@ -237,7 +237,7 @@ const FullScreenHorizontalPlayer = ({ fullscreen }) => {
 							size={17}
 							style={{ padding: 5, paddingHorizontal: 8, marginStart: 15, borderRadius: 4 }}
 							color={color.primary}
-							onPress={() => fullscreen.set(false)}
+							onPress={() => setFullScreen(false)}
 						/>
 					</View>
 				</View>

diff --git a/app/components/player/FullScreenPlayer.js b/app/components/player/FullScreenPlayer.js
@@ -24,7 +24,7 @@ const preview = {
 	LYRICS: 2
 }
 
-const FullScreenPlayer = ({ fullscreen }) => {
+const FullScreenPlayer = ({ setFullScreen }) => {
 	const [isPreview, setIsPreview] = React.useState(preview.COVER)
 	const song = React.useContext(SongContext)
 	const songDispatch = React.useContext(SongDispatchContext)
@@ -42,7 +42,7 @@ const FullScreenPlayer = ({ fullscreen }) => {
 	return (
 		<Modal
 			statusBarTranslucent={true}
-			onRequestClose={() => fullscreen.set(false)}
+			onRequestClose={() => setFullScreen(false)}
 		>
 			<View style={[ mainStyles.contentMainContainer(insets), styles.mainContainer(insets, theme)]}>
 				<IconButton
@@ -53,7 +53,7 @@ const FullScreenPlayer = ({ fullscreen }) => {
 					}}
 					icon="chevron-down"
 					color={theme.primaryLight}
-					onPress={() => fullscreen.set(false)} />
+					onPress={() => setFullScreen(false)} />
 				<View style={styles.playerContainer}>
 					{
 						isPreview == preview.COVER &&

diff --git a/app/components/player/Player.js b/app/components/player/Player.js
@@ -8,22 +8,23 @@ import BoxPlayer from '~/components/player/BoxPlayer'
 import FullScreenHorizontalPlayer from '~/components/player/FullScreenHorizontalPlayer'
 import FullScreenPlayer from '~/components/player/FullScreenPlayer'
 
-const Player = ({ state, fullscreen }) => {
+const Player = ({ state }) => {
 	const song = React.useContext(SongContext)
 	const settings = React.useContext(SettingsContext)
 	const { height, width } = useWindowDimensions()
+	const [fullScreen, setFullScreen] = React.useState(false)
 
 	React.useEffect(() => {
-		fullscreen.set(false)
+		setFullScreen(false)
 	}, [state.index])
 
 	if (!song?.songInfo) return null
-	else if (fullscreen.value) {
-		if (width <= height) return <FullScreenPlayer fullscreen={fullscreen} />
-		else return <FullScreenHorizontalPlayer fullscreen={fullscreen} />
+	else if (fullScreen) {
+		if (width <= height) return <FullScreenPlayer setFullScreen={setFullScreen} />
+		else return <FullScreenHorizontalPlayer setFullScreen={setFullScreen} />
 	}
-	else if (settings.isDesktop) return <BoxDesktopPlayer fullscreen={fullscreen} />
-	return <BoxPlayer fullscreen={fullscreen} />
+	else if (settings.isDesktop) return <BoxDesktopPlayer setFullScreen={setFullScreen} />
+	return <BoxPlayer setFullScreen={setFullScreen} />
 }
 
 export default Player
diff --git a/assets/adaptative-icon.png b/assets/adaptative-icon.png
diff --git a/assets/icon.svg b/assets/icon.svg
diff --git a/web/manifest.json b/web/manifest.json
@@ -5,43 +5,21 @@
   "lang": "en",
   "display": "standalone",
   "orientation": "portrait",
-  "background_color": "#121212",
+  "background_color": "#660000",
   "theme_color": "#121212",
   "start_url": "./index.html",
   "icons": [
     {
-      "src": "./pwa/icon.png",
-      "sizes": "1024x1024",
-      "type": "image/png",
+      "src": "./pwa/icon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
       "purpose": "any"
     },
     {
-      "src": "./pwa/icon.png",
+      "src": "./pwa/adaptative-icon.png",
       "sizes": "1024x1024",
       "type": "image/png",
       "purpose": "maskable"
-    },
-    {
-      "src": "./pwa/apple-touch-icon/apple-touch-icon-180.png",
-      "sizes": "180x180",
-      "type": "image/png",
-      "purpose": "any"
-    },
-    {
-      "src": "./pwa/apple-touch-icon/apple-touch-icon-180.png",
-      "sizes": "180x180",
-      "type": "image/png",
-      "purpose": "maskable"
-    },
-    {
-      "src": "./favicon-32.png",
-      "sizes": "32x32",
-      "type": "image/png"
-    },
-    {
-      "src": "./favicon-16.png",
-      "sizes": "16x16",
-      "type": "image/png"
     }
   ]
-}
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,6 +1,7 @@
 const createExpoWebpackConfigAsync = require("@expo/webpack-config");
 const path = require("path");
 const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
 // const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 
 module.exports = async function (env, argv) {
@@ -26,6 +27,21 @@ module.exports = async function (env, argv) {
 			})
 		);
 
+		config.plugins.push(
+			new CopyWebpackPlugin({
+				patterns: [
+					{
+						from: path.resolve(__dirname, "assets/icon.svg"),
+						to: path.resolve(__dirname, "web-build/pwa/icon.svg"),
+					},
+					{
+						from: path.resolve(__dirname, "assets/adaptative-icon.png"),
+						to: path.resolve(__dirname, "web-build/pwa/adaptative-icon.png"),
+					},
+				],
+			}),
+		)
+
 		// Uncomment to analyze bundle size
 		// config.plugins.push(
 		// 	new BundleAnalyzerPlugin({