@streamplace/components 0.7.9 → 0.7.11

package/dist/components/chat/mod-view.js

@@ -20,6 +20,8 @@ exports.ModView = (0, react_1.forwardRef)(() => {
     let [messageRemoved, setMessageRemoved] = (0, react_1.useState)(false);
     let { createBlock, isLoading: isBlockLoading } = (0, block_1.useCreateBlockRecord)();
     let { createHideChat, isLoading: isHideLoading } = (0, block_1.useCreateHideChatRecord)();
+    const setReportModalOpen = (0, player_store_1.usePlayerStore)((x) => x.setReportModalOpen);
+    const setReportSubject = (0, player_store_1.usePlayerStore)((x) => x.setReportSubject);
     // get the channel did
     const channelId = (0, player_store_1.usePlayerStore)((state) => state.src);
     // get the logged in user's identity
@@ -66,12 +68,10 @@ exports.ModView = (0, react_1.forwardRef)(() => {
                                     }, children: message.author.did === agent?.did ? ((0, jsx_runtime_1.jsx)(ui_1.Text, { color: "muted", children: "Block yourself (you can't block yourself)" })) : ((0, jsx_runtime_1.jsx)(ui_1.Text, { color: "destructive", children: isBlockLoading
                                             ? "Blocking..."
                                             : `Block user @${message.author.handle} from this channel` })) })] })), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuGroup, { title: `User actions`, children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => {
-                                        react_native_1.Linking.openURL(`https://${BSKY_FRONTEND_DOMAIN}/profile/${channelId}`);
-                                    }, children: (0, jsx_runtime_1.jsxs)(ui_1.Text, { color: "primary", children: ["View user on ", BSKY_FRONTEND_DOMAIN] }) }), (0, jsx_runtime_1.jsx)(ReportButton, { message: message })] })] })) })] }));
+                                        react_native_1.Linking.openURL(`https://${BSKY_FRONTEND_DOMAIN}/profile/${message.author.handle}`);
+                                    }, children: (0, jsx_runtime_1.jsxs)(ui_1.Text, { color: "primary", children: ["View user on ", BSKY_FRONTEND_DOMAIN] }) }), (0, jsx_runtime_1.jsx)(ReportButton, { message: message, setReportModalOpen: setReportModalOpen, setReportSubject: setReportSubject })] })] })) })] }));
 });
-function ReportButton({ message, }) {
-    const setReportModalOpen = (0, player_store_1.usePlayerStore)((x) => x.setReportModalOpen);
-    const setReportSubject = (0, player_store_1.usePlayerStore)((x) => x.setReportSubject);
+function ReportButton({ message, setReportModalOpen, setReportSubject, }) {
     const { onOpenChange } = (0, dropdown_menu_1.useRootContext)();
     return ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => {
             if (!message)

package/dist/components/mobile-player/ui/viewer-context-menu.js

@@ -17,16 +17,16 @@ function ContextMenu() {
     const setProtocol = (0, player_store_1.usePlayerStore)((x) => x.setProtocol);
     const debugInfo = (0, player_store_1.usePlayerStore)((x) => x.showDebugInfo);
     const setShowDebugInfo = (0, player_store_1.usePlayerStore)((x) => x.setShowDebugInfo);
+    const livestream = (0, livestream_store_1.useLivestreamStore)((x) => x.livestream);
+    const setReportModalOpen = (0, player_store_1.usePlayerStore)((x) => x.setReportModalOpen);
+    const setReportSubject = (0, player_store_1.usePlayerStore)((x) => x.setReportSubject);
     const lowLatency = protocol === "webrtc";
     const setLowLatency = (value) => {
         setProtocol(value ? player_store_1.PlayerProtocol.WEBRTC : player_store_1.PlayerProtocol.HLS);
     };
-    return ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuTrigger, { children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Settings, { color: theme_1.colors.gray[200] }) }), (0, jsx_runtime_1.jsxs)(ui_1.ResponsiveDropdownMenuContent, { side: "top", align: "end", children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Resolution", children: (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuRadioGroup, { value: quality, onValueChange: setQuality, children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuRadioItem, { value: "source", children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Source (Original Quality)" }) }), qualities.map((r) => ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuRadioItem, { value: r.name, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: r.name }) })))] }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Advanced", children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuCheckboxItem, { checked: lowLatency, onCheckedChange: () => setLowLatency(!lowLatency), children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Low Latency" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuInfo, { description: "Reduces the delay between video and chat for a more real-time experience." }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuCheckboxItem, { checked: debugInfo, onCheckedChange: () => setShowDebugInfo(!debugInfo), children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Show Debug Info" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Report", children: (0, jsx_runtime_1.jsx)(ReportButton, {}) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuTrigger, { children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Settings, { color: theme_1.colors.gray[200] }) }), (0, jsx_runtime_1.jsxs)(ui_1.ResponsiveDropdownMenuContent, { side: "top", align: "end", children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Resolution", children: (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuRadioGroup, { value: quality, onValueChange: setQuality, children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuRadioItem, { value: "source", children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Source (Original Quality)" }) }), qualities.map((r) => ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuRadioItem, { value: r.name, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: r.name }) })))] }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Advanced", children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuCheckboxItem, { checked: lowLatency, onCheckedChange: () => setLowLatency(!lowLatency), children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Low Latency" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuInfo, { description: "Reduces the delay between video and chat for a more real-time experience." }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuCheckboxItem, { checked: debugInfo, onCheckedChange: () => setShowDebugInfo(!debugInfo), children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Show Debug Info" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Report", children: (0, jsx_runtime_1.jsx)(ReportButton, { livestream: livestream, setReportModalOpen: setReportModalOpen, setReportSubject: setReportSubject }) })] })] }));
 }
-function ReportButton() {
-    const livestream = (0, livestream_store_1.useLivestreamStore)((x) => x.livestream);
-    const setReportModalOpen = (0, player_store_1.usePlayerStore)((x) => x.setReportModalOpen);
-    const setReportSubject = (0, player_store_1.usePlayerStore)((x) => x.setReportSubject);
+function ReportButton({ livestream, setReportModalOpen, setReportSubject, }) {
     const { onOpenChange } = (0, dropdown_menu_1.useRootContext)();
     return ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => {
             if (!livestream)

package/dist/components/ui/dropdown.js

@@ -77,6 +77,8 @@ exports.DropdownMenuContent = (0, react_1.forwardRef)(({ overlayStyle, portalHos
                     atoms_1.a.shadows.md,
                 ], ...props }) }) }));
 });
+/// Responsive Dropdown Menu Content. On mobile this will render a *bottom sheet* that is **portaled to the root of the app**.
+/// Prefer passing scoped content in as **otherwise it may crash the app**.
 exports.ResponsiveDropdownMenuContent = (0, react_1.forwardRef)(({ children, ...props }, ref) => {
     const { width } = (0, react_native_1.useWindowDimensions)();
     // On web, you might want to always use the normal dropdown

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.7.9",
+  "version": "0.7.11",
   "description": "Streamplace React (Native) Components",
   "main": "dist/index.js",
   "types": "src/index.tsx",
@@ -54,5 +54,5 @@
   "peerDependencies": {
     "react": "*"
   },
-  "gitHead": "3fb5c967d2fc25e07f394829e44a48090de73a2d"
+  "gitHead": "e78005bfaba2a1e9845f1e21c9ce88af6a42ebf1"
 }

package/src/components/chat/mod-view.tsx

@@ -45,6 +45,9 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
   let { createBlock, isLoading: isBlockLoading } = useCreateBlockRecord();
   let { createHideChat, isLoading: isHideLoading } = useCreateHideChatRecord();
 
+  const setReportModalOpen = usePlayerStore((x) => x.setReportModalOpen);
+  const setReportSubject = usePlayerStore((x) => x.setReportSubject);
+
   // get the channel did
   const channelId = usePlayerStore((state) => state.src);
   // get the logged in user's identity
@@ -155,13 +158,17 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
               <DropdownMenuItem
                 onPress={() => {
                   Linking.openURL(
-                    `https://${BSKY_FRONTEND_DOMAIN}/profile/${channelId}`,
+                    `https://${BSKY_FRONTEND_DOMAIN}/profile/${message.author.handle}`,
                   );
                 }}
               >
                 <Text color="primary">View user on {BSKY_FRONTEND_DOMAIN}</Text>
               </DropdownMenuItem>
-              <ReportButton message={message} />
+              <ReportButton
+                message={message}
+                setReportModalOpen={setReportModalOpen}
+                setReportSubject={setReportSubject}
+              />
             </DropdownMenuGroup>
           </>
         )}
@@ -172,11 +179,13 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
 
 export function ReportButton({
   message,
+  setReportModalOpen,
+  setReportSubject,
 }: {
   message: ChatMessageViewHydrated;
+  setReportModalOpen: (open: boolean) => void;
+  setReportSubject: (subject: any) => void;
 }) {
-  const setReportModalOpen = usePlayerStore((x) => x.setReportModalOpen);
-  const setReportSubject = usePlayerStore((x) => x.setReportSubject);
   const { onOpenChange } = useRootContext();
   return (
     <DropdownMenuItem

package/src/components/mobile-player/ui/viewer-context-menu.tsx

@@ -27,6 +27,10 @@ export function ContextMenu() {
   const debugInfo = usePlayerStore((x) => x.showDebugInfo);
   const setShowDebugInfo = usePlayerStore((x) => x.setShowDebugInfo);
 
+  const livestream = useLivestreamStore((x) => x.livestream);
+  const setReportModalOpen = usePlayerStore((x) => x.setReportModalOpen);
+  const setReportSubject = usePlayerStore((x) => x.setReportSubject);
+
   const lowLatency = protocol === "webrtc";
   const setLowLatency = (value: boolean) => {
     setProtocol(value ? PlayerProtocol.WEBRTC : PlayerProtocol.HLS);
@@ -68,17 +72,22 @@ export function ContextMenu() {
           </DropdownMenuCheckboxItem>
         </DropdownMenuGroup>
         <DropdownMenuGroup title="Report">
-          <ReportButton />
+          <ReportButton
+            livestream={livestream}
+            setReportModalOpen={setReportModalOpen}
+            setReportSubject={setReportSubject}
+          />
         </DropdownMenuGroup>
       </ResponsiveDropdownMenuContent>
     </DropdownMenu>
   );
 }
 
-export function ReportButton() {
-  const livestream = useLivestreamStore((x) => x.livestream);
-  const setReportModalOpen = usePlayerStore((x) => x.setReportModalOpen);
-  const setReportSubject = usePlayerStore((x) => x.setReportSubject);
+export function ReportButton({
+  livestream,
+  setReportModalOpen,
+  setReportSubject,
+}) {
   const { onOpenChange } = useRootContext();
   return (
     <DropdownMenuItem

package/src/components/ui/dropdown.tsx

@@ -200,6 +200,8 @@ export const DropdownMenuContent = forwardRef<
   );
 });
 
+/// Responsive Dropdown Menu Content. On mobile this will render a *bottom sheet* that is **portaled to the root of the app**.
+/// Prefer passing scoped content in as **otherwise it may crash the app**.
 export const ResponsiveDropdownMenuContent = forwardRef<any, any>(
   ({ children, ...props }, ref) => {
     const { width } = useWindowDimensions();