Skip to content

Commit 325a28a

Browse files
Programming-SaiProgramming-Sai
committed
Fixed the edits issues and even added visual indicators of current volume and speed and also a sync between edit and actual value for settings.
1 parent 1398283 commit 325a28a

File tree

4 files changed

+110
-150
lines changed

4 files changed

+110
-150
lines changed

‎app/player/[id].js‎

Lines changed: 78 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,8 @@ export default function PlayerPage() {
125125
loadingStream,
126126
isBuffering,
127127
setPlaybackRate,
128+
volumeValue,
129+
playbackRate,
128130
_streamCache,
129131
} = player;
130132

@@ -364,10 +366,11 @@ export default function PlayerPage() {
364366
const potentialEdits = loadEdits();
365367

366368
const [edits, setEdits] = useState(
367-
(track?.webpage_url === potentialEdits?.webpage_url && potentialEdits) || {
368-
speed: 1,
369+
(track?.webpage_url === potentialEdits?.metadata?.url &&
370+
potentialEdits) || {
371+
speed: playbackRate,
369372
trim: { start_time: 0, end_time: track?.duration },
370-
volume: 3.75,
373+
volume: volumeValue,
371374
metadata: {
372375
title: track?.title,
373376
artist: track?.uploader,
@@ -435,11 +438,22 @@ export default function PlayerPage() {
435438
const { download } = useDownloader();
436439
const status = getDownloadStatus(track?.id);
437440

441+
useEffect(() => {
442+
console.log(
443+
"Edit S/V: ",
444+
potentialEdits?.speed,
445+
edits?.speed,
446+
potentialEdits?.volume,
447+
edits?.volume
448+
);
449+
console.log("Real S/V: ", playbackRate, volumeValue);
450+
}, [edits]);
451+
438452
const onDownload = useCallback(async () => {
439453
if (!track) return;
440454
const id = track?.id ?? track?.webpage_url;
441455

442-
// prevent duplicate clicks
456+
// // prevent duplicate clicks
443457
if (status === "pending") return;
444458

445459
// optional immediate toast
@@ -453,10 +467,6 @@ export default function PlayerPage() {
453467
});
454468

455469
try {
456-
// console.log("Current Edits: ", edits);
457-
// const { filename } = await download(track, null, {
458-
// speed: 0.5,
459-
// });
460470
const { filename } = await download(track, null, edits);
461471
Toast.show({
462472
type: "success",
@@ -475,7 +485,39 @@ export default function PlayerPage() {
475485
});
476486
console.warn(String(err));
477487
}
478-
}, [track, status, download]);
488+
}, [track, status, download, edits]);
489+
490+
// Helper: apply an edits patch only when allowed, merge & persist properly
491+
const applyEditsIfAllowed = (patchOrUpdater) => {
492+
// only apply if in editor mode OR user chose to have downloads follow playback settings
493+
if (!isEditor && !appStorage?.downloadUsePlaybackSettings) return;
494+
495+
setEdits((prev) => {
496+
// compute merged edits (support function or object)
497+
const merged =
498+
typeof patchOrUpdater === "function"
499+
? patchOrUpdater(prev)
500+
: { ...prev, ...patchOrUpdater };
501+
502+
// ensure metadata exists and contains track url (so saved edits are associated with the track)
503+
const mergedWithUrl = {
504+
...merged,
505+
metadata: {
506+
...(merged.metadata || {}),
507+
url: track?.webpage_url ?? merged?.metadata?.url ?? null,
508+
},
509+
};
510+
511+
// persist using your existing saver
512+
try {
513+
saveEdits(mergedWithUrl);
514+
} catch (err) {
515+
console.warn("saveEdits failed", err);
516+
}
517+
518+
return mergedWithUrl;
519+
});
520+
};
479521

480522
// now safe early return: we've already called hooks above
481523
if (!player) {
@@ -709,141 +751,68 @@ export default function PlayerPage() {
709751
>
710752
<InlineMenu
711753
trigger={<SpeedIcon size={25} color={theme.text} />}
754+
currentValue={`${
755+
appStorage?.downloadUsePlaybackSettings
756+
? edits?.speed
757+
: isEditor
758+
? edits?.speed
759+
: playbackRate
760+
}x`}
712761
options={[
713762
{
714763
label: "0.25x",
715764
onPress: () => {
716765
setPlaybackRate(0.25);
717-
if (isEditor) {
718-
setEdits((prev) => {
719-
const edit = {
720-
...prev,
721-
speed: 0.25,
722-
metadata: { ...prev.metadata },
723-
};
724-
saveEdits(edit);
725-
return edit;
726-
});
727-
}
766+
applyEditsIfAllowed({ speed: 0.25 });
728767
},
729768
},
730769
{
731770
label: "0.5x",
732771
onPress: () => {
733772
setPlaybackRate(0.5);
734-
if (isEditor) {
735-
setEdits((prev) => {
736-
const edit = {
737-
...prev,
738-
speed: 0.5,
739-
metadata: { ...prev.metadata },
740-
};
741-
saveEdits(edit);
742-
return edit;
743-
});
744-
}
773+
applyEditsIfAllowed({ speed: 0.5 });
745774
},
746775
},
747776
{
748777
label: "0.75x",
749778
onPress: () => {
750779
setPlaybackRate(0.75);
751-
if (isEditor) {
752-
setEdits((prev) => {
753-
const edit = {
754-
...prev,
755-
speed: 0.75,
756-
metadata: { ...prev.metadata },
757-
};
758-
saveEdits(edit);
759-
return edit;
760-
});
761-
}
780+
applyEditsIfAllowed({ speed: 0.75 });
762781
},
763782
},
764783
{
765784
label: "1x",
766785
onPress: () => {
767786
setPlaybackRate(1);
768-
if (isEditor) {
769-
setEdits((prev) => {
770-
const edit = {
771-
...prev,
772-
speed: 1,
773-
metadata: { ...prev.metadata },
774-
};
775-
saveEdits(edit);
776-
return edit;
777-
});
778-
}
787+
applyEditsIfAllowed({ speed: 1 });
779788
},
780789
},
781790
{
782791
label: "1.25x",
783792
onPress: () => {
784793
setPlaybackRate(1.25);
785-
if (isEditor) {
786-
setEdits((prev) => {
787-
const edit = {
788-
...prev,
789-
speed: 1.25,
790-
metadata: { ...prev.metadata },
791-
};
792-
saveEdits(edit);
793-
return edit;
794-
});
795-
}
794+
applyEditsIfAllowed({ speed: 1.25 });
796795
},
797796
},
798797
{
799798
label: "1.5x",
800799
onPress: () => {
801800
setPlaybackRate(1.5);
802-
if (isEditor) {
803-
setEdits((prev) => {
804-
const edit = {
805-
...prev,
806-
speed: 1.5,
807-
metadata: { ...prev.metadata },
808-
};
809-
saveEdits(edit);
810-
return edit;
811-
});
812-
}
801+
applyEditsIfAllowed({ speed: 1.5 });
813802
},
814803
},
815804
{
816805
label: "1.75x",
817806
onPress: () => {
818807
setPlaybackRate(1.75);
819-
if (isEditor) {
820-
setEdits((prev) => {
821-
const edit = {
822-
...prev,
823-
speed: 1.75,
824-
metadata: { ...prev.metadata },
825-
};
826-
saveEdits(edit);
827-
return edit;
828-
});
829-
}
808+
applyEditsIfAllowed({ speed: 1.75 });
830809
},
831810
},
832811
{
833812
label: "2x",
834813
onPress: () => {
835814
setPlaybackRate(2);
836-
if (isEditor) {
837-
setEdits((prev) => {
838-
const edit = {
839-
...prev,
840-
speed: 2,
841-
metadata: { ...prev.metadata },
842-
};
843-
saveEdits(edit);
844-
return edit;
845-
});
846-
}
815+
applyEditsIfAllowed({ speed: 2 });
847816
},
848817
},
849818
]}
@@ -884,85 +853,47 @@ export default function PlayerPage() {
884853
>
885854
<InlineMenu
886855
trigger={<VolumeIcon size={25} color={theme.text} />}
856+
currentValue={`${displayPercentage(
857+
appStorage?.downloadUsePlaybackSettings
858+
? edits?.volume
859+
: isEditor
860+
? edits?.volume
861+
: volumeValue
862+
)}%`}
887863
options={[
888864
{
889865
label: `${displayPercentage(0)}%`,
890866
onPress: () => {
891867
setVolumeValue(0 / 5);
892-
if (isEditor) {
893-
setEdits((prev) => {
894-
const edit = {
895-
...prev,
896-
volume: 0,
897-
};
898-
saveEdits(edit);
899-
return edit;
900-
});
901-
}
868+
applyEditsIfAllowed({ volume: 0 });
902869
},
903870
},
904871
{
905872
label: `${displayPercentage(1.25)}%`,
906873
onPress: () => {
907874
setVolumeValue(1.25 / 5);
908-
if (isEditor) {
909-
setEdits((prev) => {
910-
const edit = {
911-
...prev,
912-
volume: 1.25,
913-
};
914-
saveEdits(edit);
915-
return edit;
916-
});
917-
}
875+
applyEditsIfAllowed({ volume: 1.25 });
918876
},
919877
},
920878
{
921879
label: `${displayPercentage(2.5)}%`,
922880
onPress: () => {
923881
setVolumeValue(2.5 / 5);
924-
if (isEditor) {
925-
setEdits((prev) => {
926-
const edit = {
927-
...prev,
928-
volume: 2.5,
929-
};
930-
saveEdits(edit);
931-
return edit;
932-
});
933-
}
882+
applyEditsIfAllowed({ volume: 2.5 });
934883
},
935884
},
936885
{
937886
label: `${displayPercentage(3.75)}%`,
938887
onPress: () => {
939888
setVolumeValue(3.75 / 5);
940-
if (isEditor) {
941-
setEdits((prev) => {
942-
const edit = {
943-
...prev,
944-
volume: 3.75,
945-
};
946-
saveEdits(edit);
947-
return edit;
948-
});
949-
}
889+
applyEditsIfAllowed({ volume: 3.75 });
950890
},
951891
},
952892
{
953893
label: `${displayPercentage(5)}%`,
954894
onPress: () => {
955895
setVolumeValue(5 / 5);
956-
if (isEditor) {
957-
setEdits((prev) => {
958-
const edit = {
959-
...prev,
960-
volume: 5,
961-
};
962-
saveEdits(edit);
963-
return edit;
964-
});
965-
}
896+
applyEditsIfAllowed({ volume: 5 });
966897
},
967898
},
968899
]}

‎components/InlineMenu.jsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,12 @@ import {
99
import { Text, StyleSheet, TouchableOpacity } from "react-native";
1010
import { useTheme } from "../contexts/ThemeContext";
1111

12-
export const InlineMenu = ({ options = [], trigger, onClose }) => {
12+
export const InlineMenu = ({
13+
options = [],
14+
trigger,
15+
onClose,
16+
currentValue = "",
17+
}) => {
1318
const { theme } = useTheme();
1419

1520
return (
@@ -27,7 +32,6 @@ export const InlineMenu = ({ options = [], trigger, onClose }) => {
2732
customStyles={{
2833
optionsContainer: {
2934
borderRadius: 8,
30-
padding: 4,
3135
backgroundColor: theme.background,
3236
shadowColor: "#000",
3337
shadowOpacity: 0.15,
@@ -44,6 +48,15 @@ export const InlineMenu = ({ options = [], trigger, onClose }) => {
4448
opt.onPress?.();
4549
onClose?.();
4650
}}
51+
style={[
52+
{
53+
backgroundColor:
54+
opt.label === currentValue
55+
? theme.backgroundSecondary
56+
: "transparent",
57+
borderRadius: 8,
58+
},
59+
]}
4760
>
4861
<Text style={[styles.option, { color: theme.text }]}>
4962
{opt.label}

0 commit comments

Comments
 (0)