@streamplace/components 0.7.25 → 0.7.26

package/dist/components/chat/chat-box.js

@@ -9,7 +9,6 @@ const react_2 = require("react");
 const react_native_1 = require("react-native");
 const __1 = require("../../");
 const atoms_1 = require("../../lib/theme/atoms");
-const xrpc_1 = require("../../streamplace-store/xrpc");
 const textarea_1 = require("../ui/textarea");
 const chat_message_1 = require("./chat-message");
 const emoji_suggestions_1 = require("./emoji-suggestions");
@@ -33,11 +32,6 @@ function ChatBox({ isPopout, chatBoxStyle, emojiData, setIsChatVisible, }) {
     const replyTo = (0, __1.useReplyToMessage)();
     const setReplyToMessage = (0, __1.useSetReplyToMessage)();
     const textAreaRef = (0, react_2.useRef)(null);
-    // are we logged in?
-    let agent = (0, xrpc_1.usePDSAgent)();
-    if (!agent?.did) {
-        (0, jsx_runtime_1.jsx)(__1.View, { style: [atoms_1.layout.flex.row, atoms_1.layout.flex.alignCenter, atoms_1.gap.all[2]], children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Log in to chat." }) });
-    }
     const authors = (0, react_2.useMemo)(() => {
         if (!chat)
             return null;

package/dist/components/chat/chat-message.js

@@ -28,6 +28,10 @@ const segmentedObject = (obj, index, userCache) => {
                     },
                 ], onPress: () => react_native_1.Linking.openURL(`https://bsky.app/profile/${mtnftr.did || ""}`), children: obj.text }, `mention-${index}`));
         }
+        else {
+            // render as normal text if we don't recognize the facet type
+            return (0, jsx_runtime_1.jsx)(text_1.Text, { children: obj.text }, `unknown-facet-${index}`);
+        }
     }
     else {
         return (0, jsx_runtime_1.jsx)(text_1.Text, { children: obj.text }, `text-${index}`);

package/dist/components/mobile-player/ui/autoplay-button.js

@@ -9,7 +9,7 @@ const ui_1 = require("../../../ui");
 function AutoplayButton() {
     const autoplayFailed = (0, __1.usePlayerStore)((x) => x.autoplayFailed);
     const setAutoplayFailed = (0, __1.usePlayerStore)((x) => x.setAutoplayFailed);
-    const setMuted = (0, __1.usePlayerStore)((x) => x.setMuted);
+    const setMuted = (0, __1.useSetMuted)();
     const setMuteWasForced = (0, __1.usePlayerStore)((x) => x.setMuteWasForced);
     const setUserInteraction = (0, __1.usePlayerStore)((x) => x.setUserInteraction);
     const videoRef = (0, __1.usePlayerStore)((x) => x.videoRef);

package/dist/components/mobile-player/video-async.native.js

@@ -29,8 +29,8 @@ function NativeVideo(props) {
     const src = (0, __1.usePlayerStore)((x) => x.src);
     const { url } = (0, shared_1.srcToUrl)({ src: src, selectedRendition }, protocol);
     const setStatus = (0, __1.usePlayerStore)((x) => x.setStatus);
-    const muted = (0, __1.usePlayerStore)((x) => x.muted);
-    const volume = (0, __1.usePlayerStore)((x) => x.volume);
+    const muted = (0, __1.useMuted)();
+    const volume = (0, __1.useEffectiveVolume)();
     const setFullscreen = (0, __1.usePlayerStore)((x) => x.setFullscreen);
     const fullscreen = (0, __1.usePlayerStore)((x) => x.fullscreen);
     const playerEvent = (0, __1.usePlayerStore)((x) => x.playerEvent);
@@ -125,8 +125,8 @@ function NativeWHEP(props) {
         setPlayerHeight(height);
     }, []);
     const setStatus = (0, __1.usePlayerStore)((x) => x.setStatus);
-    const muted = (0, __1.usePlayerStore)((x) => x.muted);
-    const volume = (0, __1.usePlayerStore)((x) => x.volume);
+    const muted = (0, __1.useMuted)();
+    const volume = (0, __1.useEffectiveVolume)();
     (0, react_1.useEffect)(() => {
         if (stuck && status === __1.PlayerStatus.PLAYING) {
             console.log("setting status to stalled", status);

package/dist/components/mobile-player/video.js

@@ -89,11 +89,11 @@ const VideoElement = (0, react_1.forwardRef)((props, ref) => {
     const x = (0, __1.usePlayerStore)((x) => x);
     const url = (0, __1.useStreamplaceStore)((x) => x.url);
     const playerEvent = (0, __1.usePlayerStore)((x) => x.playerEvent);
-    const setMuted = (0, __1.usePlayerStore)((x) => x.setMuted);
     const setMuteWasForced = (0, __1.usePlayerStore)((x) => x.setMuteWasForced);
-    const muted = (0, __1.usePlayerStore)((x) => x.muted);
     const ingest = (0, __1.usePlayerStore)((x) => x.ingestConnectionState !== null);
-    const volume = (0, __1.usePlayerStore)((x) => x.volume);
+    const volume = (0, __1.useEffectiveVolume)();
+    const muted = (0, __1.useMuted)();
+    const setMuted = (0, __1.useSetMuted)();
     const setStatus = (0, __1.usePlayerStore)((x) => x.setStatus);
     const setUserInteraction = (0, __1.usePlayerStore)((x) => x.setUserInteraction);
     const setVideoRef = (0, __1.usePlayerStore)((x) => x.setVideoRef);

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dashboard = exports.VideoRetry = exports.zero = exports.ui = exports.PlayerUI = exports.Player = exports.usePlayerContext = exports.withPlayerProvider = exports.PlayerProvider = void 0;
+exports.storage = exports.Dashboard = exports.VideoRetry = exports.zero = exports.ui = exports.PlayerUI = exports.Player = exports.usePlayerContext = exports.withPlayerProvider = exports.PlayerProvider = void 0;
 const tslib_1 = require("tslib");
 // barrel file :)
 tslib_1.__exportStar(require("./livestream-provider"), exports);
@@ -32,3 +32,6 @@ tslib_1.__exportStar(require("./components/share/sharesheet"), exports);
 tslib_1.__exportStar(require("./components/keep-awake"), exports);
 // Dashboard components
 exports.Dashboard = tslib_1.__importStar(require("./components/dashboard"));
+// Storage exports
+var storage_1 = require("./storage");
+Object.defineProperty(exports, "storage", { enumerable: true, get: function () { return tslib_1.__importDefault(storage_1).default; } });

package/dist/livestream-store/chat.js

@@ -49,6 +49,15 @@ const useCreateChatMessage = () => {
         }
         const rt = new api_1.RichText({ text: msg.text });
         await rt.detectFacets(pdsAgent);
+        // filter out any facets that aren't in the allowed list
+        rt.facets = rt.facets?.filter((facet) => {
+            return (
+            // if all features are in the allowed list
+            facet.features.every((feature) => [
+                "app.bsky.richtext.facet#link",
+                "app.bsky.richtext.facet#mention",
+            ].includes(feature.$type)));
+        });
         const record = {
             $type: "place.stream.chat.message",
             text: msg.text,

package/dist/player-store/player-store.js

@@ -32,10 +32,6 @@ const makePlayerStore = (id) => {
         setIngestAutoStart: (ingestAutoStart) => set(() => ({ ingestAutoStart })),
         ingestStarted: null,
         setIngestStarted: (timestamp) => set(() => ({ ingestStarted: timestamp })),
-        muted: false,
-        setMuted: (isMuted) => set(() => ({ muted: isMuted, muteWasForced: false })),
-        volume: 1.0,
-        setVolume: (volume) => set(() => ({ volume, muteWasForced: false })),
         fullscreen: false,
         setFullscreen: (isFullscreen) => set(() => ({ fullscreen: isFullscreen })),
         status: player_state_1.PlayerStatus.START,

package/dist/storage/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const storage_1 = tslib_1.__importDefault(require("./storage"));
+exports.default = new storage_1.default();

package/dist/storage/lock.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Lock = void 0;
+class Lock {
+    constructor() {
+        this.queue = [];
+        this.acquired = false;
+    }
+    async acquire() {
+        if (!this.acquired) {
+            this.acquired = true;
+        }
+        else {
+            return new Promise((resolve, _) => {
+                this.queue.push(resolve);
+            });
+        }
+    }
+    async release() {
+        if (this.queue.length === 0 && this.acquired) {
+            this.acquired = false;
+            return;
+        }
+        const continuation = this.queue.shift();
+        return new Promise((res) => {
+            continuation();
+            res();
+        });
+    }
+    async critical(task) {
+        await this.acquire();
+        try {
+            return await task();
+        }
+        finally {
+            await this.release();
+        }
+    }
+}
+exports.Lock = Lock;

package/dist/storage/storage.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class WebStorage {
+    async getItem(key) {
+        return localStorage.getItem(key);
+    }
+    async setItem(key, value) {
+        localStorage.setItem(key, value);
+    }
+    async removeItem(key) {
+        localStorage.removeItem(key);
+    }
+}
+exports.default = WebStorage;

package/dist/storage/storage.native.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const kv_store_1 = tslib_1.__importDefault(require("expo-sqlite/kv-store"));
+const lock_1 = require("./lock");
+// Needed because concurrent calls seem to return with a locked database
+const lock = new lock_1.Lock();
+class NativeStorage {
+    async getItem(key) {
+        return lock.critical(async () => {
+            try {
+                const value = await kv_store_1.default.getItem(key);
+                return value ?? null;
+            }
+            catch (e) {
+                console.error(`error in NativeStorage.getItem: ${e}`);
+                throw e;
+            }
+        });
+    }
+    async setItem(key, value) {
+        return lock.critical(async () => {
+            try {
+                await kv_store_1.default.setItem(key, value);
+            }
+            catch (e) {
+                console.error(`error in NativeStorage.setItem: ${e}`);
+                throw e;
+            }
+        });
+    }
+    async removeItem(key) {
+        return lock.critical(async () => {
+            try {
+                await kv_store_1.default.removeItem(key);
+            }
+            catch (e) {
+                console.error(`error in NativeStorage.removeItem: ${e}`);
+                throw e;
+            }
+        });
+    }
+}
+exports.default = NativeStorage;

package/dist/storage/storage.shared.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/streamplace-provider/index.js

@@ -8,6 +8,7 @@ const streamplace_store_1 = require("../streamplace-store/streamplace-store");
 const context_1 = require("./context");
 const poller_1 = tslib_1.__importDefault(require("./poller"));
 function StreamplaceProvider({ children, url, oauthSession, }) {
+    console.log("session in provider is", oauthSession);
     // todo: handle url changes?
     const store = (0, react_1.useRef)((0, streamplace_store_1.makeStreamplaceStore)({ url })).current;
     (0, react_1.useEffect)(() => {

package/dist/streamplace-store/streamplace-store.js

@@ -1,13 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSetHandle = exports.useHandle = exports.useDID = exports.useUrl = exports.makeStreamplaceStore = void 0;
+exports.useEffectiveVolume = exports.useSetMuted = exports.useSetVolume = exports.useMuted = exports.useVolume = exports.useSetHandle = exports.useHandle = exports.useDID = exports.useUrl = exports.makeStreamplaceStore = void 0;
 exports.getStreamplaceStoreFromContext = getStreamplaceStoreFromContext;
 exports.useStreamplaceStore = useStreamplaceStore;
+const tslib_1 = require("tslib");
 const react_1 = require("react");
 const zustand_1 = require("zustand");
+const storage_1 = tslib_1.__importDefault(require("../storage"));
 const context_1 = require("../streamplace-provider/context");
 const makeStreamplaceStore = ({ url, }) => {
-    return (0, zustand_1.createStore)()((set) => ({
+    const VOLUME_STORAGE_KEY = "globalVolume";
+    const MUTED_STORAGE_KEY = "globalMuted";
+    const store = (0, zustand_1.createStore)()((set) => ({
         url,
         liveUsers: null,
         setLiveUsers: (opts) => {
@@ -21,7 +25,60 @@ const makeStreamplaceStore = ({ url, }) => {
         oauthSession: null,
         handle: null,
         chatProfile: null,
+        // Volume state - start with defaults
+        volume: 1.0,
+        muted: false,
+        setVolume: (volume) => {
+            // Ensure the value is finite and within bounds
+            if (!Number.isFinite(volume)) {
+                console.warn("Invalid volume value:", volume, "- using 1.0");
+                volume = 1.0;
+            }
+            const clampedVolume = Math.max(0, Math.min(1, volume));
+            set({ volume: clampedVolume });
+            // Auto-unmute if volume > 0
+            if (clampedVolume > 0) {
+                set({ muted: false });
+                storage_1.default.setItem(MUTED_STORAGE_KEY, "false").catch(console.error);
+            }
+            storage_1.default
+                .setItem(VOLUME_STORAGE_KEY, clampedVolume.toString())
+                .catch(console.error);
+        },
+        setMuted: (muted) => {
+            set({ muted });
+            storage_1.default.setItem(MUTED_STORAGE_KEY, muted.toString()).catch(console.error);
+        },
     }));
+    // Load initial volume state from storage asynchronously
+    (async () => {
+        try {
+            const storedVolume = await storage_1.default.getItem(VOLUME_STORAGE_KEY);
+            const storedMuted = await storage_1.default.getItem(MUTED_STORAGE_KEY);
+            let initialVolume = 1.0;
+            let initialMuted = false;
+            if (storedVolume) {
+                const parsedVolume = parseFloat(storedVolume);
+                if (Number.isFinite(parsedVolume) &&
+                    parsedVolume >= 0 &&
+                    parsedVolume <= 1) {
+                    initialVolume = parsedVolume;
+                }
+            }
+            if (storedMuted) {
+                initialMuted = storedMuted === "true";
+            }
+            // Update the store with loaded values
+            store.setState({
+                volume: initialVolume,
+                muted: initialMuted,
+            });
+        }
+        catch (e) {
+            console.warn("Failed to load volume settings from storage:", e);
+        }
+    })();
+    return store;
 };
 exports.makeStreamplaceStore = makeStreamplaceStore;
 function getStreamplaceStoreFromContext() {
@@ -45,3 +102,19 @@ const useSetHandle = () => {
     return (handle) => store.setState({ handle });
 };
 exports.useSetHandle = useSetHandle;
+// Volume convenience hooks
+const useVolume = () => useStreamplaceStore((x) => x.volume);
+exports.useVolume = useVolume;
+const useMuted = () => useStreamplaceStore((x) => x.muted);
+exports.useMuted = useMuted;
+const useSetVolume = () => useStreamplaceStore((x) => x.setVolume);
+exports.useSetVolume = useSetVolume;
+const useSetMuted = () => useStreamplaceStore((x) => x.setMuted);
+exports.useSetMuted = useSetMuted;
+// Composite hook for effective volume (0 if muted) - used by video components
+const useEffectiveVolume = () => useStreamplaceStore((state) => {
+    const effectiveVolume = state.muted ? 0 : state.volume;
+    // Ensure we always return a finite number for HTMLMediaElement.volume
+    return Number.isFinite(effectiveVolume) ? effectiveVolume : 1.0;
+});
+exports.useEffectiveVolume = useEffectiveVolume;

package/dist/streamplace-store/xrpc.js

@@ -6,9 +6,18 @@ const streamplace_1 = require("streamplace");
 const _1 = require(".");
 function usePDSAgent() {
     const oauthSession = (0, _1.useStreamplaceStore)((state) => state.oauthSession);
+    // oauthsession is
+    // - undefined when loading
+    // - null when logged out, and
+    // - SessionManager when logged in
     return (0, react_1.useMemo)(() => {
         if (!oauthSession) {
-            return null;
+            if (oauthSession === undefined)
+                return null;
+            // TODO: change once we allow unauthed requests + profile indexing
+            // it's bluesky's AppView b/c otherwise we'd have goosewithpipe.jpg
+            // showing up everywhere
+            return new streamplace_1.StreamplaceAgent("https://public.api.bsky.app"); // nodeUrl);
         }
         return new streamplace_1.StreamplaceAgent(oauthSession);
     }, [oauthSession]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.7.25",
+  "version": "0.7.26",
   "description": "Streamplace React (Native) Components",
   "main": "dist/index.js",
   "types": "src/index.tsx",
@@ -29,6 +29,7 @@
     "@rn-primitives/slider": "^1.2.0",
     "class-variance-authority": "^0.6.1",
     "expo-keep-awake": "^14.0.0",
+    "expo-sqlite": "~15.2.12",
     "expo-video": "^2.0.0",
     "hls.js": "^1.5.17",
     "lucide-react-native": "^0.514.0",
@@ -52,5 +53,5 @@
     "start": "tsc --watch --preserveWatchOutput",
     "prepare": "tsc"
   },
-  "gitHead": "288afabcb270c01ae8012e2a5cd9d75d5e1aae28"
+  "gitHead": "4dcda25a5e66a2c1a9f412bee2e09c4dd528a939"
 }

package/src/components/chat/chat-box.tsx

@@ -27,7 +27,6 @@ import {
   py,
   w,
 } from "../../lib/theme/atoms";
-import { usePDSAgent } from "../../streamplace-store/xrpc";
 import { Textarea } from "../ui/textarea";
 import { RenderChatMessage } from "./chat-message";
 import { EmojiData, EmojiSuggestions } from "./emoji-suggestions";
@@ -70,16 +69,6 @@ export function ChatBox({
   const setReplyToMessage = useSetReplyToMessage();
   const textAreaRef = useRef<TextInput>(null);
 
-  // are we logged in?
-
-  let agent = usePDSAgent();
-
-  if (!agent?.did) {
-    <View style={[layout.flex.row, layout.flex.alignCenter, gap.all[2]]}>
-      <Text>Log in to chat.</Text>
-    </View>;
-  }
-
   const authors = useMemo(() => {
     if (!chat) return null;
     return chat.reduce((acc, msg) => {

package/src/components/chat/chat-message.tsx

@@ -66,6 +66,9 @@ const segmentedObject = (
           {obj.text}
         </Text>
       );
+    } else {
+      // render as normal text if we don't recognize the facet type
+      return <Text key={`unknown-facet-${index}`}>{obj.text}</Text>;
     }
   } else {
     return <Text key={`text-${index}`}>{obj.text}</Text>;

package/src/components/mobile-player/ui/autoplay-button.tsx

@@ -1,12 +1,12 @@
 import { Play } from "lucide-react-native";
 import { Pressable } from "react-native";
-import { View, layout, usePlayerStore } from "../../..";
+import { View, layout, usePlayerStore, useSetMuted } from "../../..";
 import { h, p, w } from "../../../ui";
 
 export function AutoplayButton() {
   const autoplayFailed = usePlayerStore((x) => x.autoplayFailed);
   const setAutoplayFailed = usePlayerStore((x) => x.setAutoplayFailed);
-  const setMuted = usePlayerStore((x) => x.setMuted);
+  const setMuted = useSetMuted();
   const setMuteWasForced = usePlayerStore((x) => x.setMuteWasForced);
   const setUserInteraction = usePlayerStore((x) => x.setUserInteraction);
   const videoRef = usePlayerStore((x) => x.videoRef);

package/src/components/mobile-player/video-async.native.tsx

@@ -14,7 +14,9 @@ import {
   PlayerProtocol,
   PlayerStatus,
   Text,
+  useEffectiveVolume,
   usePlayerStore as useIngestPlayerStore,
+  useMuted,
   usePlayerStore,
   useStreamplaceStore,
   View,
@@ -71,8 +73,8 @@ export function NativeVideo(props?: {
   const src = usePlayerStore((x) => x.src);
   const { url } = srcToUrl({ src: src, selectedRendition }, protocol);
   const setStatus = usePlayerStore((x) => x.setStatus);
-  const muted = usePlayerStore((x) => x.muted);
-  const volume = usePlayerStore((x) => x.volume);
+  const muted = useMuted();
+  const volume = useEffectiveVolume();
   const setFullscreen = usePlayerStore((x) => x.setFullscreen);
   const fullscreen = usePlayerStore((x) => x.fullscreen);
   const playerEvent = usePlayerStore((x) => x.playerEvent);
@@ -211,8 +213,8 @@ export function NativeWHEP(props?: {
   }, []);
 
   const setStatus = usePlayerStore((x) => x.setStatus);
-  const muted = usePlayerStore((x) => x.muted);
-  const volume = usePlayerStore((x) => x.volume);
+  const muted = useMuted();
+  const volume = useEffectiveVolume();
 
   useEffect(() => {
     if (stuck && status === PlayerStatus.PLAYING) {

package/src/components/mobile-player/video.tsx

@@ -4,7 +4,10 @@ import {
   IngestMediaSource,
   PlayerProtocol,
   PlayerStatus,
+  useEffectiveVolume,
+  useMuted,
   usePlayerStore,
+  useSetMuted,
   useStreamplaceStore,
 } from "../..";
 import { borderRadius, colors, mt } from "../../lib/theme/atoms";
@@ -135,11 +138,11 @@ const VideoElement = forwardRef<
   const x = usePlayerStore((x) => x);
   const url = useStreamplaceStore((x) => x.url);
   const playerEvent = usePlayerStore((x) => x.playerEvent);
-  const setMuted = usePlayerStore((x) => x.setMuted);
   const setMuteWasForced = usePlayerStore((x) => x.setMuteWasForced);
-  const muted = usePlayerStore((x) => x.muted);
   const ingest = usePlayerStore((x) => x.ingestConnectionState !== null);
-  const volume = usePlayerStore((x) => x.volume);
+  const volume = useEffectiveVolume();
+  const muted = useMuted();
+  const setMuted = useSetMuted();
   const setStatus = usePlayerStore((x) => x.setStatus);
   const setUserInteraction = usePlayerStore((x) => x.setUserInteraction);
   const setVideoRef = usePlayerStore((x) => x.setVideoRef);

package/src/index.tsx

@@ -37,3 +37,7 @@ export * from "./components/keep-awake";
 
 // Dashboard components
 export * as Dashboard from "./components/dashboard";
+
+// Storage exports
+export { default as storage } from "./storage";
+export type { AQStorage } from "./storage/storage.shared";

package/src/livestream-store/chat.tsx

@@ -75,6 +75,19 @@ export const useCreateChatMessage = () => {
     const rt = new RichText({ text: msg.text });
     await rt.detectFacets(pdsAgent);
 
+    // filter out any facets that aren't in the allowed list
+    rt.facets = rt.facets?.filter((facet) => {
+      return (
+        // if all features are in the allowed list
+        facet.features.every((feature) =>
+          [
+            "app.bsky.richtext.facet#link",
+            "app.bsky.richtext.facet#mention",
+          ].includes(feature.$type),
+        )
+      );
+    });
+
     const record: PlaceStreamChatMessage.Record = {
       $type: "place.stream.chat.message",
       text: msg.text,

package/src/player-store/player-state.tsx

@@ -69,18 +69,6 @@ export interface PlayerState {
   /** Function to set the ingestStarted timestamp */
   setIngestStarted: (timestamp: number | null) => void;
 
-  /** Player muted state */
-  muted: boolean;
-
-  /** Function to set the muted state */
-  setMuted: (isMuted: boolean) => void;
-
-  /** Player volume level (0.0 to 1.0) */
-  volume: number;
-
-  /** Function to set the volume level */
-  setVolume: (volume: number) => void;
-
   /** Player fullscreen state */
   fullscreen: boolean;
 

package/src/player-store/player-store.tsx

@@ -52,14 +52,6 @@ export const makePlayerStore = (id?: string): StoreApi<PlayerState> => {
     setIngestStarted: (timestamp: number | null) =>
       set(() => ({ ingestStarted: timestamp })),
 
-    muted: false,
-    setMuted: (isMuted: boolean) =>
-      set(() => ({ muted: isMuted, muteWasForced: false })),
-
-    volume: 1.0,
-    setVolume: (volume: number) =>
-      set(() => ({ volume, muteWasForced: false })),
-
     fullscreen: false,
     setFullscreen: (isFullscreen: boolean) =>
       set(() => ({ fullscreen: isFullscreen })),

package/src/storage/index.tsx

@@ -0,0 +1,3 @@
+import Storage from "./storage";
+
+export default new Storage();

package/src/storage/lock.tsx

@@ -0,0 +1,38 @@
+type Cont = () => void;
+
+export class Lock {
+  private readonly queue: Cont[] = [];
+  private acquired = false;
+
+  public async acquire(): Promise<void> {
+    if (!this.acquired) {
+      this.acquired = true;
+    } else {
+      return new Promise<void>((resolve, _) => {
+        this.queue.push(resolve);
+      });
+    }
+  }
+
+  public async release(): Promise<void> {
+    if (this.queue.length === 0 && this.acquired) {
+      this.acquired = false;
+      return;
+    }
+
+    const continuation = this.queue.shift();
+    return new Promise((res: Cont) => {
+      continuation!();
+      res();
+    });
+  }
+
+  public async critical<T>(task: () => Promise<T>) {
+    await this.acquire();
+    try {
+      return await task();
+    } finally {
+      await this.release();
+    }
+  }
+}

package/src/storage/storage.native.tsx

@@ -0,0 +1,42 @@
+import Storage from "expo-sqlite/kv-store";
+import { Lock } from "./lock";
+import { AQStorage } from "./storage.shared";
+
+// Needed because concurrent calls seem to return with a locked database
+const lock = new Lock();
+
+export default class NativeStorage implements AQStorage {
+  async getItem(key: string): Promise<string | null> {
+    return lock.critical(async () => {
+      try {
+        const value = await Storage.getItem(key);
+        return value ?? null;
+      } catch (e) {
+        console.error(`error in NativeStorage.getItem: ${e}`);
+        throw e;
+      }
+    });
+  }
+
+  async setItem(key: string, value: string): Promise<void> {
+    return lock.critical(async () => {
+      try {
+        await Storage.setItem(key, value);
+      } catch (e) {
+        console.error(`error in NativeStorage.setItem: ${e}`);
+        throw e;
+      }
+    });
+  }
+
+  async removeItem(key: string): Promise<void> {
+    return lock.critical(async () => {
+      try {
+        await Storage.removeItem(key);
+      } catch (e) {
+        console.error(`error in NativeStorage.removeItem: ${e}`);
+        throw e;
+      }
+    });
+  }
+}