Add: Play similar songs for artists and albums

Author: sawyerf

app/components/options/OptionsAlbum.js

@@ -1,18 +1,31 @@
 
-import React from 'react';
-import { Platform, Share } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
-import { useTranslation } from 'react-i18next';
+import React from 'react'
+import { Platform, Share } from 'react-native'
+import { useNavigation } from '@react-navigation/native'
+import { useTranslation } from 'react-i18next'
 
-import { getApi } from '~/utils/api';
-import { ConfigContext } from '~/contexts/config';
-import OptionsPopup from '~/components/popup/OptionsPopup';
+import { getApi } from '~/utils/api'
+import { ConfigContext } from '~/contexts/config'
+import OptionsPopup from '~/components/popup/OptionsPopup'
+import { playSong } from '~/utils/player'
+import { SongDispatchContext } from '~/contexts/song'
+import { getApiNetworkFirst } from '~/utils/api'
 
 const OptionsAlbum = ({ albums, indexOptions, setIndexOptions }) => {
-  const { t } = useTranslation();
-  const navigation = useNavigation();
+  const { t } = useTranslation()
+  const navigation = useNavigation()
   const config = React.useContext(ConfigContext)
   const refOption = React.useRef()
+  const songDispatch = React.useContext(SongDispatchContext)
+
+	const playSimilarSongs = () => {
+		getApiNetworkFirst(config, 'getSimilarSongs', `id=${albums[indexOptions].id}&count=50`)
+			.then((json) => {
+				if (json.similarSongs?.song) playSong(config, songDispatch, json.similarSongs.song, 0)
+			})
+			.catch(() => { })
+		refOption.current.close()
+	}
 
   return (
     <OptionsPopup
@@ -21,6 +34,11 @@ const OptionsAlbum = ({ albums, indexOptions, setIndexOptions }) => {
       close={() => { setIndexOptions(-1) }}
       item={indexOptions >= 0 ? albums[indexOptions] : null}
       options={[
+        {
+          name: t('Play similar songs'),
+					icon: 'play',
+					onPress: playSimilarSongs
+        },
         {
           name: t('Go to artist'),
           icon: 'user',
@@ -57,4 +75,4 @@ const OptionsAlbum = ({ albums, indexOptions, setIndexOptions }) => {
   )
 }
 
-export default OptionsAlbum;
+export default OptionsAlbum

app/components/options/OptionsArtist.js

@@ -1,19 +1,41 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
+import React from 'react'
+import { useTranslation } from 'react-i18next'
 
-import OptionsPopup from '~/components/popup/OptionsPopup';
+import { ConfigContext } from '~/contexts/config'
+import { getApiNetworkFirst } from '~/utils/api'
+import { playSong } from '~/utils/player'
+import { SongDispatchContext } from '~/contexts/song'
+import OptionsPopup from '~/components/popup/OptionsPopup'
 
 const OptionsArtist = ({ artists, indexOptions, setIndexOptions }) => {
-  const { t } = useTranslation();
+  const songDispatch = React.useContext(SongDispatchContext)
+  const config = React.useContext(ConfigContext)
+  const { t } = useTranslation()
   const refOption = React.useRef()
 
+	const playSimilarSongs = () => {
+		getApiNetworkFirst(config, 'getSimilarSongs', `id=${artists[indexOptions].id}&count=50`)
+			.then((json) => {
+				if (json.similarSongs?.song) {
+					playSong(config, songDispatch, json.similarSongs.song, 0)
+				}
+			})
+			.catch(() => { })
+		refOption.current.close()
+	}
+
   return (
     <OptionsPopup
       ref={refOption}
       visible={indexOptions >= 0}
       close={() => { setIndexOptions(-1) }}
       item={indexOptions >= 0 ? artists[indexOptions] : null}
       options={[
+        {
+          name: t('Play similar songs'),
+					icon: 'play',
+					onPress: playSimilarSongs
+        },
         {
           name: t('Info'),
           icon: 'info',
@@ -27,4 +49,4 @@ const OptionsArtist = ({ artists, indexOptions, setIndexOptions }) => {
   )
 }
 
-export default OptionsArtist;
+export default OptionsArtist

app/components/player/FullScreenHorizontalPlayer.js

@@ -11,12 +11,13 @@ import FavoritedButton from '~/components/button/FavoritedButton'
 import IconButton from '~/components/button/IconButton'
 import ImageError from '~/components/ImageError'
 import Lyric from '~/components/player/Lyric'
+import mainStyles from '~/styles/main'
+import OptionsQueue from '~/components/options/OptionsQueue'
+import PlayButton from '~/components/button/PlayButton'
 import Player from '~/utils/player'
 import size from '~/styles/size';
 import SlideBar from '~/components/button/SlideBar'
 import SlideControl from '~/components/button/SlideControl'
-import mainStyles from '~/styles/main'
-import PlayButton from '~/components/button/PlayButton'
 
 const preview = {
 	COVER: 0,
@@ -65,6 +66,7 @@ const TimeBar = () => {
 }
 const FullScreenHorizontalPlayer = ({ setFullScreen }) => {
 	const [isPreview, setIsPreview] = React.useState(preview.COVER)
+	const [indexOptions, setIndexOptions] = React.useState(-1)
 	const config = React.useContext(ConfigContext)
 	const insets = useSafeAreaInsets()
 	const song = React.useContext(SongContext)
@@ -148,6 +150,12 @@ const FullScreenHorizontalPlayer = ({ setFullScreen }) => {
 					{
 						isPreview == preview.QUEUE &&
 						<View style={{ flex: 1, maxWidth: '50%', justifyContent: 'flex-end' }}>
+							<OptionsQueue
+								queue={song.queue}
+								indexOptions={indexOptions}
+								setIndexOptions={setIndexOptions}
+								closePlayer={() => setFullScreen(false)}
+							/>
 							<FlatList
 								ref={scroll}
 								onLayout={() => scroll.current.scrollToIndex({ index: song.index, animated: false, viewOffset: 0, viewPosition: 0.5 })}
@@ -160,15 +168,19 @@ const FullScreenHorizontalPlayer = ({ setFullScreen }) => {
 								keyExtractor={(_, index) => index}
 								renderItem={({ item, index }) => (
 									<Pressable
+										key={item.id}
 										style={({ pressed }) => ([mainStyles.opacity({ pressed }), {
 											flexDirection: 'row',
 											alignItems: 'center',
 											marginBottom: 10,
 										}])}
-										key={item.id}
-										onPress={() => {
-											Player.setIndex(config, songDispatch, song.queue, index)
-										}}>
+										onPress={() => Player.setIndex(config, songDispatch, song.queue, index)}
+										onLongPress={() => setIndexOptions(index)}
+										onContextMenu={(ev) => {
+											ev.preventDefault()
+											return setIndexOptions(index)
+										}}
+									>
 										<View style={{ flex: 1, flexDirection: 'column' }}>
 											<Text numberOfLines={1} style={{ color: song.index === index ? theme.primaryTouch : color.primary, fontSize: size.text.medium, marginBottom: 2, textAlign: 'right' }}>
 												{item.title}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "castafiore",
-  "version": "2025.08.05",
+  "version": "2025.08.20",
   "main": "index.js",
   "homepage": ".",
   "scripts": {