From 3e5ed1c9a1d4d46d65a10eca237273f5b3755196 Mon Sep 17 00:00:00 2001 From: aliyahmcrae <86865384+aliyahmcrae@users.noreply.github.com> Date: Sun, 7 Dec 2025 18:32:14 -0800 Subject: [PATCH 1/2] Allow users to select 2-5 songs instead of exactly 2 --- vynl/package-lock.json | 64 ++++++++--------------------- vynl/src/app/(tabs)/UploadSongs.tsx | 64 +++++++++++++++++++++-------- 2 files changed, 64 insertions(+), 64 deletions(-) diff --git a/vynl/package-lock.json b/vynl/package-lock.json index 3d15339..891575d 100644 --- a/vynl/package-lock.json +++ b/vynl/package-lock.json @@ -48,8 +48,7 @@ "react-native-safe-area-context": "~5.6.0", "react-native-screens": "~4.16.0", "react-native-web": "~0.21.0", - "react-native-worklets": "0.5.1", - "react-test-renderer": "19.1.0" + "react-native-worklets": "0.5.1" }, "devDependencies": { "@testing-library/jest-native": "^5.4.3", @@ -68,7 +67,7 @@ "typescript": "~5.9.2" } }, - "../../../../../--dev": { + "../../../../--dev": { "extraneous": true }, "node_modules/@0no-co/graphql.web": { @@ -113,7 +112,6 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz", "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -1574,7 +1572,7 @@ "version": "0.8.1", "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==", - "dev": true, + "devOptional": true, "license": "MIT", "dependencies": { "@jridgewell/trace-mapping": "0.3.9" @@ -1587,7 +1585,7 @@ "version": "0.3.9", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz", "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==", - "dev": true, + "devOptional": true, "license": "MIT", "dependencies": { "@jridgewell/resolve-uri": "^3.0.3", @@ -3719,7 +3717,6 @@ "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-7.1.21.tgz", "integrity": "sha512-mhpAewdivBL01ibErr91FUW9bvKhfAF6Xv/yr6UOJtDhv0jU6iUASUcA3i3T8VJCOB/vxmoke7VDp8M+wBFs/Q==", "license": "MIT", - "peer": true, "dependencies": { "@react-navigation/core": "^7.13.2", "escape-string-regexp": "^4.0.0", @@ -3883,7 +3880,6 @@ "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.84.0.tgz", "integrity": "sha512-byMqYBvb91sx2jcZsdp0qLpmd4Dioe80e4OU/UexXftCkpTcgrkoENXHf5dO8FCSai8SgNeq16BKg10QiDI6xg==", "license": "MIT", - "peer": true, "dependencies": { "@supabase/auth-js": "2.84.0", "@supabase/functions-js": "2.84.0", @@ -4000,7 +3996,6 @@ "integrity": "sha512-k6Mjsd9dbZgvY4Bl7P1NIpePQNi+dfYtlJ5voi9KQlynxSyQkfOgJmYGCYmw/aSgH/rUcFvG8u5gd4npzgRDyg==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "jest-matcher-utils": "^30.0.5", "picocolors": "^1.1.1", @@ -4036,28 +4031,28 @@ "version": "1.0.12", "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.12.tgz", "integrity": "sha512-UCYBaeFvM11aU2y3YPZ//O5Rhj+xKyzy7mvcIoAjASbigy8mHMryP5cK7dgjlz2hWxh1g5pLw084E0a/wlUSFQ==", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/@tsconfig/node12": { "version": "1.0.11", "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz", "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/@tsconfig/node14": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz", "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/@tsconfig/node16": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz", "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/@tybys/wasm-util": { @@ -4262,7 +4257,6 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz", "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==", "license": "MIT", - "peer": true, "dependencies": { "undici-types": "~7.16.0" } @@ -4279,7 +4273,6 @@ "integrity": "sha512-Qec1E3mhALmaspIrhWt9jkQMNdw6bReVu64mjvhbhq2NFPftLPVr+l1SZgmw/66WwBNpDh7ao5AT6gF5v41PFA==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.0.2" } @@ -4376,7 +4369,6 @@ "integrity": "sha512-lJi3PfxVmo0AkEY93ecfN+r8SofEqZNGByvHAI3GBLrvt1Cw6H5k1IM02nSzu0RfUafr2EvFSw0wAsZgubNplQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.47.0", "@typescript-eslint/types": "8.47.0", @@ -4947,7 +4939,6 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -4980,7 +4971,7 @@ "version": "8.3.4", "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz", "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==", - "dev": true, + "devOptional": true, "license": "MIT", "dependencies": { "acorn": "^8.11.0" @@ -5719,7 +5710,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", @@ -6314,7 +6304,7 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/cross-fetch": { @@ -6695,7 +6685,7 @@ "version": "4.0.2", "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==", - "dev": true, + "devOptional": true, "license": "BSD-3-Clause", "engines": { "node": ">=0.3.1" @@ -7115,7 +7105,6 @@ "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -7312,7 +7301,6 @@ "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@rtsao/scc": "^1.1.0", "array-includes": "^3.1.9", @@ -7676,7 +7664,6 @@ "resolved": "https://registry.npmjs.org/expo/-/expo-54.0.27.tgz", "integrity": "sha512-50BcJs8eqGwRiMUoWwphkRGYtKFS2bBnemxLzy0lrGVA1E6F4Q7L5h3WT6w1ehEZybtOVkfJu4Z6GWo2IJcpEA==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.20.0", "@expo/cli": "54.0.18", @@ -7811,7 +7798,6 @@ "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-18.0.11.tgz", "integrity": "sha512-xnfrfZ7lHjb+03skhmDSYeFF7OU2K3Xn/lAeP+7RhkV2xp2f5RCKtOUYajCnYeZesvMrsUxOsbGOP2JXSOH3NA==", "license": "MIT", - "peer": true, "dependencies": { "@expo/config": "~12.0.11", "@expo/env": "~2.0.8" @@ -7836,7 +7822,6 @@ "resolved": "https://registry.npmjs.org/expo-font/-/expo-font-14.0.10.tgz", "integrity": "sha512-UqyNaaLKRpj4pKAP4HZSLnuDQqueaO5tB1c/NWu5vh1/LF9ulItyyg2kF/IpeOp0DeOLk0GY0HrIXaKUMrwB+Q==", "license": "MIT", - "peer": true, "dependencies": { "fontfaceobserver": "^2.1.0" }, @@ -7898,7 +7883,6 @@ "resolved": "https://registry.npmjs.org/expo-linking/-/expo-linking-8.0.10.tgz", "integrity": "sha512-0EKtn4Sk6OYmb/5ZqK8riO0k1Ic+wyT3xExbmDvUYhT7p/cKqlVUExMuOIAt3Cx3KUUU1WCgGmdd493W/D5XjA==", "license": "MIT", - "peer": true, "dependencies": { "expo-constants": "~18.0.11", "invariant": "^2.2.4" @@ -10140,7 +10124,6 @@ "integrity": "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "@jest/core": "^29.7.0", "@jest/types": "^29.6.3", @@ -11892,7 +11875,7 @@ "version": "1.3.6", "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==", - "dev": true, + "devOptional": true, "license": "ISC" }, "node_modules/makeerror": { @@ -13713,7 +13696,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz", "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.26.0" }, @@ -13750,7 +13732,6 @@ "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.81.5.tgz", "integrity": "sha512-1w+/oSjEXZjMqsIvmkCRsOc8UBYv163bTWKTI8+1mxztvQPhCRYGTvZ/PL1w16xXHneIj/SLGfxWg2GWN2uexw==", "license": "MIT", - "peer": true, "dependencies": { "@jest/create-cache-key-function": "^29.7.0", "@react-native/assets-registry": "0.81.5", @@ -13808,7 +13789,6 @@ "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.28.0.tgz", "integrity": "sha512-0msfJ1vRxXKVgTgvL+1ZOoYw3/0z1R+Ked0+udoJhyplC2jbVKIJ8Z1bzWdpQRCV3QcQ87Op0zJVE5DhKK2A0A==", "license": "MIT", - "peer": true, "dependencies": { "@egjs/hammerjs": "^2.0.17", "hoist-non-react-statics": "^3.3.0", @@ -13862,7 +13842,6 @@ "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-5.6.2.tgz", "integrity": "sha512-4XGqMNj5qjUTYywJqpdWZ9IG8jgkS3h06sfVjfw5yZQZfWnRFXczi0GnYyFyCc2EBps/qFmoCH8fez//WumdVg==", "license": "MIT", - "peer": true, "peerDependencies": { "react": "*", "react-native": "*" @@ -13873,7 +13852,6 @@ "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-4.16.0.tgz", "integrity": "sha512-yIAyh7F/9uWkOzCi1/2FqvNvK6Wb9Y1+Kzn16SuGfN9YFJDTbwlzGRvePCNTOX0recpLQF3kc2FmvMUhyTCH1Q==", "license": "MIT", - "peer": true, "dependencies": { "react-freeze": "^1.0.0", "react-native-is-edge-to-edge": "^1.2.1", @@ -13889,7 +13867,6 @@ "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.21.2.tgz", "integrity": "sha512-SO2t9/17zM4iEnFvlu2DA9jqNbzNhoUP+AItkoCOyFmDMOhUnBBznBDCYN92fGdfAkfQlWzPoez6+zLxFNsZEg==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.18.6", "@react-native/normalize-colors": "^0.74.1", @@ -14064,7 +14041,6 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz", "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -14144,7 +14120,6 @@ "integrity": "sha512-jXkSl3CpvPYEF+p/eGDLB4sPoDX8pKkYvRl9+rR8HxLY0X04vW7hCm1/0zHoUSjPZ3bDa+wXWNTDVIw/R8aDVw==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "react-is": "^19.1.0", "scheduler": "^0.26.0" @@ -15736,7 +15711,6 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -15823,9 +15797,8 @@ "version": "10.9.2", "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz", "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==", - "dev": true, + "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "@cspotcode/source-map-support": "^0.8.0", "@tsconfig/node10": "^1.0.7", @@ -15868,7 +15841,7 @@ "version": "4.1.3", "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz", "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/tsconfig-paths": { @@ -16029,9 +16002,8 @@ "version": "5.9.3", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", - "dev": true, + "devOptional": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -16340,7 +16312,7 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/v8-to-istanbul": { @@ -17009,7 +16981,7 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==", - "dev": true, + "devOptional": true, "license": "MIT", "engines": { "node": ">=6" @@ -17028,4 +17000,4 @@ } } } -} \ No newline at end of file +} diff --git a/vynl/src/app/(tabs)/UploadSongs.tsx b/vynl/src/app/(tabs)/UploadSongs.tsx index dae58c7..d34ddd8 100644 --- a/vynl/src/app/(tabs)/UploadSongs.tsx +++ b/vynl/src/app/(tabs)/UploadSongs.tsx @@ -40,12 +40,12 @@ export default function UploadSongs() { const toggle = (song: ITunesSong) => { if (selected.includes(song)) setSelected(selected.filter(x => x !== song)); - else if (selected.length < 2) setSelected([...selected, song]); + else if (selected.length < 5) setSelected([...selected, song]); }; - const ready = selected.length === 2; + const ready = selected.length >= 2 && selected.length <= 5; - // Navigate to swipe.tsx with the two picks + // Navigate to swipe.tsx with the picks (2-5 songs) const goSwiping = async () => { console.log("Go swipping"); if (!ready || authLoading || !authToken) return; @@ -100,7 +100,7 @@ export default function UploadSongs() { Select - Choose 2 songs to get started + Choose 2-5 songs to get started @@ -120,7 +120,7 @@ export default function UploadSongs() { Liked - {selected.length}/2 + {selected.length}/5 {loading && Loading...} {error && {error}} @@ -163,11 +163,13 @@ export default function UploadSongs() { )} - {/* Hide the bottom list entirely once two songs are selected */} - {!ready && ( + {/* Scrollable song list - fills remaining space */} + {selected.length < 5 && ( {filtered.map(item => { const on = selected.includes(item); @@ -196,14 +198,23 @@ export default function UploadSongs() { )} - - + {/* Fixed button at bottom */} + + @@ -268,7 +279,24 @@ const s = StyleSheet.create({ dot: { width: 28, height: 28, borderRadius: 14, borderWidth: 2, borderColor: '#2F2F2F', alignItems: 'center', justifyContent: 'center' }, dotOn: { backgroundColor: '#2F2F2F' }, check: { color: 'white', fontWeight: '800' }, - cta: { position: 'absolute', left: 30, right: 30, bottom: 100 }, + + // Scrollable container for song list + scrollContainer: { + flex: 1, + marginTop: 12, + }, + scrollContent: { + paddingHorizontal: 30, + paddingBottom: 20, + }, + + // Button container at bottom + ctaContainer: { + paddingHorizontal: 30, + paddingTop: 20, + paddingBottom: 60, + backgroundColor: 'transparent', + }, center: { flex: 1, justifyContent: 'center', @@ -280,4 +308,4 @@ const s = StyleSheet.create({ justifyContent: 'center', alignItems: 'center', }, -}); +}); \ No newline at end of file From e9afe4afea7db86eb3372b9fb7915a8f537b22c6 Mon Sep 17 00:00:00 2001 From: Lillian Nguyen Date: Sun, 7 Dec 2025 18:36:50 -0800 Subject: [PATCH 2/2] Changed from 6 songs to 10 songs for swiping, inital seed songs now shows up in the preview, got rid of the sticky like like/dislike tags when swiping --- vynl/src/app/(tabs)/swipe.tsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/vynl/src/app/(tabs)/swipe.tsx b/vynl/src/app/(tabs)/swipe.tsx index 4762dbc..fb2eee0 100644 --- a/vynl/src/app/(tabs)/swipe.tsx +++ b/vynl/src/app/(tabs)/swipe.tsx @@ -112,6 +112,12 @@ export default function Swiping() { const [addedSongs, setAddedSongs] = useState([]); const [liked, setLiked] = useState([]); const [passed, setPassed] = useState([]); + // include initial seed songs in the final preview (avoid duplicates) + const previewSongs = useMemo(() => { + const seeds = seedSongs ?? []; + const uniqueLiked = liked.filter(s => !seeds.some(seed => seed.song_id === s.song_id)); + return [...seeds, ...uniqueLiked]; + }, [seedSongs, liked]); const [swipeHistory, setSwipeHistory] = useState([]); const [isLoading, setIsLoading] = useState(true); const [playlistName, setPlaylistName] = useState(isPartyMode && initialPlaylistName ? initialPlaylistName as string : ''); @@ -159,7 +165,7 @@ export default function Swiping() { }, []) ); - const numberOfRecommendedSongs = 6; + const numberOfRecommendedSongs = 10; const fetchRecommendations = useCallback(async () => { if (!newPlaylist?.id) { @@ -372,8 +378,12 @@ export default function Swiping() { inputRange: [-width / 2, 0, width / 2], outputRange: [`-${ROTATION}deg`, '0deg', `${ROTATION}deg`], }); - const likeOpacity = position.x.interpolate({ inputRange: [0, SWIPE_THRESHOLD], outputRange: [0, 1], extrapolate: 'clamp' }); - const nopeOpacity = position.x.interpolate({ inputRange: [-SWIPE_THRESHOLD, 0], outputRange: [1, 0], extrapolate: 'clamp' }); + // derive raw opacities from swipe position + const likeOpacityRaw = position.x.interpolate({ inputRange: [0, SWIPE_THRESHOLD], outputRange: [0, 1], extrapolate: 'clamp' }); + const nopeOpacityRaw = position.x.interpolate({ inputRange: [-SWIPE_THRESHOLD, 0], outputRange: [1, 0], extrapolate: 'clamp' }); + // multiply by the card opacity so banners don't persist when the next card fades in + const likeOpacity = Animated.multiply(likeOpacityRaw, cardOpacity as any); + const nopeOpacity = Animated.multiply(nopeOpacityRaw, cardOpacity as any); // Use ref to store current index to avoid closure issues const indexRef = useRef(index); @@ -647,7 +657,7 @@ export default function Swiping() { nestedScrollEnabled showsVerticalScrollIndicator={false} > - {liked.map((song, idx) => { + {previewSongs.map((song, idx) => { return song ? (