#302

frontend/src/components/NicoViewer.tsx

@@ -37,11 +37,12 @@ type Props = {
     height:             number
     style?:             CSSProperties
     onLoadComplete?:    (info: NiconicoVideoInfo) => void
-    onMetadataChange?:  (meta: NiconicoMetadata) => void }
+    onMetadataChange?:  (meta: NiconicoMetadata) => void
+    onError?:           (data: unknown) => void }
 
 
 export default forwardRef ((props: Props, ref: ForwardedRef<NiconicoViewerHandle>) => {
-  const { id, width, height, style = { }, onLoadComplete, onMetadataChange } = props
+  const { id, width, height, style = { }, onLoadComplete, onMetadataChange, onError } = props
 
   const iframeRef = useRef<HTMLIFrameElement> (null)
   const playerId = useMemo (() => `nico-${ id }-${ Math.random ().toString (36).slice (2) }`, [id])
@@ -173,13 +174,16 @@ export default forwardRef ((props: Props, ref: ForwardedRef<NiconicoViewerHandle
 	}
 
       if (data.eventName === 'error')
-        console.error ('niconico player error:', data)
+        {
+          console.error ('niconico player error:', data)
+          onError?.(data)
+        }
     }
 
     addEventListener ('message', onMessage)
 
     return () => removeEventListener ('message', onMessage)
-  }, [onLoadComplete, onMetadataChange, playerId])
+  }, [onError, onLoadComplete, onMetadataChange, playerId])
 
   useLayoutEffect (() => {
     if (!(fullScreen))

frontend/src/components/PostEmbed.tsx

@@ -13,10 +13,11 @@ type Props = {
     ref?:               RefObject<NiconicoViewerHandle | null>
     post:               Post
     onLoadComplete?:    (info: NiconicoVideoInfo) => void
-    onMetadataChange?:  (meta: NiconicoMetadata) => void }
+    onMetadataChange?:  (meta: NiconicoMetadata) => void
+    onError?:           (data: unknown) => void }
 
 
-const PostEmbed: FC<Props> = ({ ref, post, onLoadComplete, onMetadataChange }) => {
+const PostEmbed: FC<Props> = ({ ref, post, onLoadComplete, onMetadataChange, onError }) => {
   const dialogue = useDialogue ()
   const [framed, setFramed] = useState (false)
 
@@ -39,7 +40,8 @@ const PostEmbed: FC<Props> = ({ ref, post, onLoadComplete, onMetadataChange }) =
 	      width={640}
 	      height={360}
 	      onLoadComplete={onLoadComplete}
-	      onMetadataChange={onMetadataChange}/>)
+	      onMetadataChange={onMetadataChange}
+	      onError={onError}/>)
     }
 
   case 'twitter.com':

frontend/src/components/TopNav.tsx

@@ -128,8 +128,12 @@ const TopNav: FC<Props> = ({ user }) => {
 
   const menu = menuOutline ({ tag, wikiId, user, pathName: location.pathname })
   const visibleMenu = menu.filter ((item): item is MenuVisibleItem => item.visible ?? true)
+  const moreMenu = menu.filter (item =>
+      !(item.visible ?? true)
+      || item.subMenu.filter (subItem => subItem.visible ?? true).length > 0)
   const activeIdx =
       visibleMenu.findIndex (item => location.pathname.startsWith (item.base || item.to))
+  const submenuHeight = moreVsbl ? 40 * moreMenu.length : (activeIdx < 0 ? 0 : 40)
 
   const prevActiveIdxRef = useRef<number> (activeIdx)
 
@@ -240,9 +244,9 @@ const TopNav: FC<Props> = ({ user }) => {
 	  <motion.div
 	      key="submenu-shell"
 	      layout
-	      className="relative hidden md:block overflow-hidden
+	      className="relative z-20 hidden md:block overflow-hidden
 			 bg-yellow-200 dark:bg-red-950"
-	      style={{ height: moreVsbl ? 40 * menu.length : (activeIdx < 0 ? 0 : 40) }}
+	      animate={{ height: submenuHeight }}
 	      onMouseLeave={() => {
 		if (moreVsbl)
 		  setMoreVsbl (false)
@@ -253,7 +257,7 @@ const TopNav: FC<Props> = ({ user }) => {
 	      }}>
 	  {moreVsbl
 	   ? (
-	      menu.map ((item, i) => (
+	      moreMenu.map ((item, i) => (
 		  <div key={i} className="relative h-[40px]">
 		    <div className="absolute inset-0 flex items-center px-3">
 		      <motion.div