miteruzo/btrc-hub
1
0
Fork 0
Code Issues 69 Pull Requests 1 Releases Wiki Activity

#49

Browse Source
This commit is contained in:
みてるぞ
2025-07-13 02:46:13 +09:00
parent fdf242c060
commit 0c46cf28db
29 changed files with 509 additions and 456 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/NicoViewer.tsx
+62 -65
View File
@@ -1,15 +1,17 @@
import React, { useRef, useLayoutEffect, useEffect, useState, CSSProperties } from 'react'
import { Link, useNavigate, useLocation } from 'react-router-dom'
import { useRef, useLayoutEffect, useEffect, useState } from 'react'
type Props = { id: string,
width: number,
height: number,
style?: CSSProperties }
width: number,
height: number,
style?: CSSProperties }
import type { CSSProperties } from 'react'
const NicoViewer: React.FC = (props: Props) => {
export default (props: Props) => {
const { id, width, height, style = { } } = props
const iframeRef = useRef<HTMLIFrameElement> (null)
const [screenWidth, setScreenWidth] = useState<CSSProperties['width']> ()
const [screenHeight, setScreenHeight] = useState<CSSProperties['height']> ()
const [landscape, setLandscape] = useState<boolean> (false)
@@ -18,97 +20,92 @@ const NicoViewer: React.FC = (props: Props) => {
const src = `https://embed.nicovideo.jp/watch/${id}?persistence=1&oldScript=1&referer=&from=0&allowProgrammaticFullScreen=1`;
const styleFullScreen: CSSProperties = fullScreen ? {
top: 0,
left: landscape ? 0 : '100%',
position: 'fixed',
width: screenWidth,
height: screenHeight,
zIndex: 2147483647,
maxWidth: 'none',
transformOrigin: '0% 0%',
transform: landscape ? 'none' : 'rotate(90deg)',
WebkitTransformOrigin: '0% 0%',
WebkitTransform: landscape ? 'none' : 'rotate(90deg)',
} : {};
top: 0,
left: landscape ? 0 : '100%',
position: 'fixed',
width: screenWidth,
height: screenHeight,
zIndex: 2147483647,
maxWidth: 'none',
transformOrigin: '0% 0%',
transform: landscape ? 'none' : 'rotate(90deg)',
WebkitTransformOrigin: '0% 0%',
WebkitTransform: landscape ? 'none' : 'rotate(90deg)' } : {};
const margedStyle = {
border: 'none',
maxWidth: '100%',
...style,
...styleFullScreen,
};
border: 'none',
maxWidth: '100%',
...style,
...styleFullScreen }
useEffect(() => {
useEffect (() => {
const onMessage = (event: MessageEvent<any>) => {
if (!iframeRef.current || event.source !== iframeRef.current.contentWindow) return;
if (event.data.eventName === 'enterProgrammaticFullScreen') {
setFullScreen(true);
} else if (event.data.eventName === 'exitProgrammaticFullScreen') {
setFullScreen(false);
}
};
if (!(iframeRef.current)
|| (event.source !== iframeRef.current.contentWindow))
return
addEventListener('message', onMessage);
if (event.data.eventName === 'enterProgrammaticFullScreen')
setFullScreen (true)
else if (event.data.eventName === 'exitProgrammaticFullScreen')
setFullScreen (false)
}
return () => {
removeEventListener('message', onMessage);
};
}, []);
addEventListener ('message', onMessage)
return () => removeEventListener ('message', onMessage)
}, [])
useLayoutEffect(() => {
if (!(fullScreen))
return
const initialScrollX = window.scrollX
const initialScrollY = window.scrollY
const initialScrollX = scrollX
const initialScrollY = scrollY
let timer: NodeJS.Timeout
let ended = false
const pollingResize = () => {
if (ended)
return
return
const landscape = window.innerWidth >= window.innerHeight
const windowWidth = `${landscape ? window.innerWidth : window.innerHeight}px`
const windowHeight = `${landscape ? window.innerHeight : window.innerWidth}px`
const landscape = innerWidth >= innerHeight
const windowWidth = `${landscape ? innerWidth : innerHeight}px`
const windowHeight = `${landscape ? innerHeight : innerWidth}px`
setLandScape (Landscape)
setLandscape (landscape)
setScreenWidth (windowWidth)
setScreenHeight (windowHeight)
timer = setTimeout (startPollingResize, 200)
}
const startPollingResize = () => {
if (window.requestAnimationFrame) {
window.requestAnimationFrame(pollingResize);
} else {
pollingResize();
}
if (requestAnimationFrame)
requestAnimationFrame (pollingResize)
else
pollingResize ()
}
startPollingResize();
startPollingResize ()
return () => {
clearTimeout(timer);
ended = true;
window.scrollTo(initialScrollX, initialScrollY);
};
}, [fullScreen]);
clearTimeout (timer)
ended = true
scrollTo (initialScrollX, initialScrollY)
}
}, [fullScreen])
useEffect(() => {
useEffect (() => {
if (!(fullScreen))
return
scrollTo (0, 0)
}, [screenWidth, screenHeight, fullScreen])
return <iframe ref={iframeRef}
src={src}
width={width}
height={height}
style={margedStyle}
allowFullScreen
allow="autoplay" />
return (
<iframe ref={iframeRef}
src={src}
width={width}
height={height}
style={margedStyle}
allowFullScreen
allow="autoplay" />)
}
export default NicoViewer
frontend/src/components/PostEditForm.tsx
+4 -3
View File
@@ -1,11 +1,11 @@
import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { useState } from 'react'
import TextArea from '@/components/common/TextArea'
import { Button } from '@/components/ui/button'
import { API_BASE_URL } from '@/config'
import type { Post, Tag } from '@/types'
import type { Post } from '@/types'
type Props = { post: Post
onSave: (newPost: Post) => void }
@@ -19,9 +19,10 @@ export default ({ post, onSave }: Props) => {
.join (' '))
const handleSubmit = async () => {
const { data } = await axios.put (`${ API_BASE_URL }/posts/${ post.id }`, { title, tags },
const res = await axios.put (`${ API_BASE_URL }/posts/${ post.id }`, { title, tags },
{ headers: { 'Content-Type': 'multipart/form-data',
'X-Transfer-Code': localStorage.getItem ('user_code') || '' } } )
const data = res.data as Post
onSave ({ ...post,
title: data.title,
tags: data.tags } as Post)
frontend/src/components/TagDetailSidebar.tsx
+8 -10
View File
@@ -1,24 +1,22 @@
import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { Link, useParams } from 'react-router-dom'
import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import TagSearch from '@/components/TagSearch'
import SubsectionTitle from '@/components/common/SubsectionTitle'
import SidebarComponent from '@/components/layout/SidebarComponent'
import { API_BASE_URL } from '@/config'
import { CATEGORIES } from '@/consts'
import type { Category, Post, Tag } from '@/types'
type TagByCategory = { [key: Category]: Tag[] }
type TagByCategory = { [key in Category]: Tag[] }
type Props = { post: Post | null }
export default ({ post }: Props) => {
const [tags, setTags] = useState<TagByCategory> ({ })
const [tags, setTags] = useState({ } as TagByCategory)
const categoryNames: { [key: Category]: string } = {
const categoryNames: Partial<{ [key in Category]: string }> = {
general: '一般',
deerjikist: 'ニジラー',
nico: 'ニコニコタグ' }
@@ -28,15 +26,15 @@ export default ({ post }: Props) => {
return
const fetchTags = () => {
const tagsTmp: TagByCategory = { }
const tagsTmp = { } as TagByCategory
for (const tag of post.tags)
{
if (!(tag.category in tagsTmp))
tagsTmp[tag.category] = []
tagsTmp[tag.category].push (tag)
}
for (const cat of Object.keys (tagsTmp))
tagsTmp[cat].sort ((tagA, tagB) => tagA.name < tagB.name ? -1 : 1)
for (const cat of Object.keys (tagsTmp) as (keyof typeof tagsTmp)[])
tagsTmp[cat].sort ((tagA: Tag, tagB: Tag) => tagA.name < tagB.name ? -1 : 1)
setTags (tagsTmp)
}
frontend/src/components/TagSearch.tsx
+21 -19
View File
@@ -1,7 +1,9 @@
import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { Link, useNavigate, useLocation } from 'react-router-dom'
import React, { useEffect, useState } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { API_BASE_URL } from '@/config'
import TagSearchBox from './TagSearchBox'
import type { Tag } from '@/types'
@@ -16,34 +18,34 @@ const TagSearch: React.FC = () => {
const [activeIndex, setActiveIndex] = useState (-1)
const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
const whenChanged = e => {
setSearch (e.target.value)
const whenChanged = async (ev: React.ChangeEvent<HTMLInputElement>) => {
setSearch (ev.target.value)
const q: string = e.target.value.split (' ').at (-1)
const q = ev.target.value.trim ().split (' ').at (-1)
if (!(q))
{
setSuggestions ([])
return
}
void (axios.get (`${ API_BASE_URL }/tags/autocomplete`, { params: { q } })
.then (res => {
setSuggestions (res.data)
if (suggestions.length)
setSuggestionsVsbl (true)
}))
const res = await axios.get (`${ API_BASE_URL }/tags/autocomplete`, { params: { q } })
const data = res.data as Tag[]
setSuggestions (data)
if (suggestions.length)
setSuggestionsVsbl (true)
}
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
switch (e.key)
const handleKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {
switch (ev.key)
{
case 'ArrowDown':
e.preventDefault ()
ev.preventDefault ()
setActiveIndex (i => Math.min (i + 1, suggestions.length - 1))
setSuggestionsVsbl (true)
break
case 'ArrowUp':
e.preventDefault ()
ev.preventDefault ()
setActiveIndex (i => Math.max (i - 1, -1))
setSuggestionsVsbl (true)
break
@@ -51,17 +53,17 @@ const TagSearch: React.FC = () => {
case 'Enter':
if (activeIndex < 0)
break
e.preventDefault ()
ev.preventDefault ()
const selected = suggestions[activeIndex]
selected && handleTagSelect (selected)
break
case 'Escape':
e.preventDefault ()
ev.preventDefault ()
setSuggestionsVsbl (false)
break
}
if (e.key === 'Enter' && (!(suggestionsVsbl) || activeIndex < 0))
if (ev.key === 'Enter' && (!(suggestionsVsbl) || activeIndex < 0))
{
navigate (`/posts?${ (new URLSearchParams ({ tags: search })).toString () }`)
setSuggestionsVsbl (false)
@@ -92,7 +94,7 @@ const TagSearch: React.FC = () => {
onBlur={() => setSuggestionsVsbl (false)}
onKeyDown={handleKeyDown}
className="w-full px-3 py-2 border rounded border-gray-600 bg-gray-800 text-white" />
<TagSearchBox suggestions={suggestionsVsbl && suggestions.length && suggestions}
<TagSearchBox suggestions={suggestionsVsbl && suggestions.length ? suggestions : [] as Tag[]}
activeIndex={activeIndex}
onSelect={handleTagSelect} />
</div>)
frontend/src/components/TagSearchBox.tsx
+2 -14
View File
@@ -1,7 +1,3 @@
import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { Link, useNavigate, useLocation } from 'react-router-dom'
import { API_BASE_URL } from '@/config'
import { cn } from '@/lib/utils'
import type { Tag } from '@/types'
@@ -11,15 +7,10 @@ type Props = { suggestions: Tag[]
onSelect: (tag: Tag) => void }
const TagSearchBox: React.FC = (props: Props) => {
const { suggestions, activeIndex, onSelect } = props
export default ({ suggestions, activeIndex, onSelect }: Props) => {
if (!(suggestions.length))
return null
const navigate = useNavigate ()
const location = useLocation ()
return (
<ul className="absolute left-0 right-0 z-50 w-full bg-gray-800 border border-gray-600 rounded shadow">
{suggestions.map ((tag, i) => (
@@ -31,10 +22,7 @@ const TagSearchBox: React.FC = (props: Props) => {
onMouseDown={() => onSelect (tag)}
>
{tag.name}
{<span className="ml-2 text-sm text-gray-400">{tag.count}</span>}
{<span className="ml-2 text-sm text-gray-400">{tag.postCount}</span>}
</li>))}
</ul>)
}
export default TagSearchBox
frontend/src/components/TagSidebar.tsx
+2 -3
View File
@@ -1,7 +1,6 @@
import axios from 'axios'
import toCamel from 'camelcase-keys'
import React, { useEffect, useState } from 'react'
import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
import { useEffect, useState } from 'react'
import { Link, useLocation, useNavigate } from 'react-router-dom'
import TagSearch from '@/components/TagSearch'
import SectionTitle from '@/components/common/SectionTitle'
frontend/src/components/TopNav.tsx
+72 -70
View File
@@ -1,7 +1,7 @@
import axios from 'axios'
import toCamel from 'camelcase-keys'
import React, { useState, useEffect } from 'react'
import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
import { useState, useEffect } from 'react'
import { Link, useLocation, useNavigate } from 'react-router-dom'
import { Button } from '@/components/ui/button'
import { API_BASE_URL } from '@/config'
@@ -10,34 +10,34 @@ import { cn } from '@/lib/utils'
import type { Tag, User, WikiPage } from '@/types'
type Props = { user: User | null
setUser: (user: User) => void }
type Props = { user: User | null }
const enum Menu { None,
Post,
User,
Tag,
Wiki }
const Menu = { None: 'None',
Post: 'Post',
User: 'User',
Tag: 'Tag',
Wiki: 'Wiki' } as const
type Menu = typeof Menu[keyof typeof Menu]
export default ({ user, setUser }: Props) => {
export default ({ user }: Props) => {
const location = useLocation ()
const navigate = useNavigate ()
const [selectedMenu, setSelectedMenu] = useState<Menu> (Menu.None)
const [wikiId, setWikiId] = useState<number | null> (WikiIdBus.get ())
const [wikiSearch, setWikiSearch] = useState ('')
const [activeIndex, setActiveIndex] = useState (-1)
const [suggestions, setSuggestions] = useState<WikiPage[]> ([])
const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
const [tagSearch, setTagSearch] = useState ('')
const [userSearch, setUserSearch] = useState ('')
// const [wikiSearch, setWikiSearch] = useState ('')
// const [activeIndex, setActiveIndex] = useState (-1)
// const [suggestions, setSuggestions] = useState<WikiPage[]> ([])
// const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
// const [tagSearch, setTagSearch] = useState ('')
// const [userSearch, setUserSearch] = useState ('')
const [postCount, setPostCount] = useState<number | null> (null)
const MyLink = ({ to, title, menu, base }: { to: string
title: string
menu?: Menu
base?: string }) => (
const MyLink = ({ to, title, base }: { to: string
title: string
base?: string }) => (
<Link to={to} className={cn ('hover:text-orange-500 h-full flex items-center',
(location.pathname.startsWith (base ?? to)
? 'bg-gray-700 px-4 font-bold'
@@ -45,55 +45,55 @@ export default ({ user, setUser }: Props) => {
{title}
</Link>)
const whenTagSearchChanged = ev => {
// TODO: 実装
// const whenTagSearchChanged = (ev: React.ChangeEvent<HTMLInputElement>) => {
// // TODO: 実装
//
// setTagSearch (ev.target.value)
//
// const q: string = ev.target.value.split (' ').at (-1)
// if (!(q))
// {
// // setSuggestions ([])
// return
// }
// }
setTagSearch (ev.target.value)
// const whenWikiSearchChanged = (ev: React.ChangeEvent<HTMLInputElement>) => {
// // TODO: 実装
//
// setWikiSearch (ev.target.value)
//
// const q: string = ev.target.value.split (' ').at (-1)
// if (!(q))
// {
// // setSuggestions ([])
// return
// }
// }
const q: string = ev.target.value.split (' ').at (-1)
if (!(q))
{
setSuggestions ([])
return
}
}
// const whenUserSearchChanged = (ev: React.ChangeEvent<HTMLInputElement>) => {
// // TODO: 実装
//
// setUserSearch (ev.target.value)
//
// const q: string = ev.target.value.split (' ').at (-1)
// if (!(q))
// {
// // setSuggestions ([])
// return
// }
// }
const whenWikiSearchChanged = ev => {
// TODO: 実装
// const handleKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {
// if (ev.key === 'Enter' && wikiSearch.length && (!(suggestionsVsbl) || activeIndex < 0))
// {
// navigate (`/wiki/${ encodeURIComponent (wikiSearch) }`)
// setSuggestionsVsbl (false)
// }
// }
setWikiSearch (ev.target.value)
const q: string = ev.target.value.split (' ').at (-1)
if (!(q))
{
setSuggestions ([])
return
}
}
const whenUserSearchChanged = ev => {
// TODO: 実装
setUserSearch (ev.target.value)
const q: string = ev.target.value.split (' ').at (-1)
if (!(q))
{
setSuggestions ([])
return
}
}
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter' && wikiSearch.length && (!(suggestionsVsbl) || activeIndex < 0))
{
navigate (`/wiki/${ encodeURIComponent (wikiSearch) }`)
setSuggestionsVsbl (false)
}
}
const handleTagSelect = (tag: Tag) => {
}
// const handleTagSelect = (tag: Tag) => {
// }
useEffect (() => {
const unsubscribe = WikiIdBus.subscribe (setWikiId)
@@ -120,11 +120,13 @@ export default ({ user, setUser }: Props) => {
void (async () => {
try
{
const { data: pageData } = await axios.get (`${ API_BASE_URL }/wiki/${ wikiId }`)
const wikiPage: WikiPage = toCamel (pageData, { deep: true })
const pageRes = await axios.get (`${ API_BASE_URL }/wiki/${ wikiId }`)
const pageData: any = pageRes.data
const wikiPage = toCamel (pageData, { deep: true }) as WikiPage
const { data: tagData } = await axios.get (`${ API_BASE_URL }/tags/name/${ wikiPage.title }`)
const tag: Tag = toCamel (tagData, { deep: true })
const tagRes = await axios.get (`${ API_BASE_URL }/tags/name/${ wikiPage.title }`)
const tagData: any = tagRes.data
const tag = toCamel (tagData, { deep: true }) as Tag
setPostCount (tag.postCount)
}
@@ -156,7 +158,7 @@ export default ({ user, setUser }: Props) => {
{(() => {
const className = 'bg-gray-700 text-white px-3 flex items-center w-full min-h-[40px]'
const subClass = 'hover:text-orange-500 h-full flex items-center px-3'
const inputBox = 'flex items-center px-3 mx-2'
// const inputBox = 'flex items-center px-3 mx-2'
const Separator = () => <span className="flex items-center px-2">|</span>
switch (selectedMenu)
{
frontend/src/components/common/TabGroup.tsx
+2 -2
View File
@@ -5,13 +5,13 @@ type TabProps = { name: string
init?: boolean
children: React.ReactNode }
type Props = { children: React.ReactElement<TabProps>[] }
type Props = { children: React.ReactNode }
export const Tab = ({ children }: TabProps) => <>{children}</>
export default ({ children }: Props) => {
const tabs = React.Children.toArray (children)
const tabs = React.Children.toArray (children) as React.ReactElement<TabProps>[]
const [current, setCurrent] = useState<number> (() => {
const i = tabs.findIndex (tab => tab.props.init)
frontend/src/components/users/InheritDialogue.tsx
+4 -6
View File
@@ -5,9 +5,7 @@ import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Dialog,
DialogContent,
DialogDescription,
DialogTitle,
DialogTrigger } from '@/components/ui/dialog'
DialogTitle } from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { toast } from '@/components/ui/use-toast'
import { API_BASE_URL } from '@/config'
@@ -16,11 +14,10 @@ import type { User } from '@/types'
type Props = { visible: boolean
onVisibleChange: (visible: boolean) => void
user: User | null,
setUser: (user: User) => void }
export default ({ visible, onVisibleChange, user, setUser }: Props) => {
export default ({ visible, onVisibleChange, setUser }: Props) => {
const [inputCode, setInputCode] = useState ('')
const handleTransfer = async () => {
@@ -29,7 +26,8 @@ export default ({ visible, onVisibleChange, user, setUser }: Props) => {
try
{
const { data } = await axios.post (`${ API_BASE_URL }/users/verify`, { code: inputCode })
const res = await axios.post (`${ API_BASE_URL }/users/verify`, { code: inputCode })
const data = res.data as { valid: boolean; user: any }
if (data.valid)
{
localStorage.setItem ('user_code', inputCode)
frontend/src/components/users/UserCodeDialogue.tsx
+8 -6
View File
@@ -3,9 +3,7 @@ import axios from 'axios'
import { Button } from '@/components/ui/button'
import { Dialog,
DialogContent,
DialogDescription,
DialogTitle,
DialogTrigger } from '@/components/ui/dialog'
DialogTitle } from '@/components/ui/dialog'
import { toast } from '@/components/ui/use-toast'
import { API_BASE_URL } from '@/config'
@@ -14,21 +12,25 @@ import type { User } from '@/types'
type Props = { visible: boolean
onVisibleChange: (visible: boolean) => void
user: User | null
setUser: (user: User) => void }
setUser: React.Dispatch<React.SetStateAction<User | null>> }
export default ({ visible, onVisibleChange, user, setUser }: Props) => {
const handleChange = async () => {
if (!(user))
return
if (!(confirm ('引継ぎコードを再発行しますか?\n再発行するとほかのブラウザからはログアウトされます．')))
return
const { data } = await axios.post (`${ API_BASE_URL }/users/code/renew`, { }, { headers: {
const res = await axios.post (`${ API_BASE_URL }/users/code/renew`, { }, { headers: {
'Content-Type': 'multipart/form-data',
'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
const data = res.data as { code: string }
if (data.code)
{
localStorage.setItem ('user_code', data.code)
setUser (user => ({ ...user, inheritanceCode: data.code }))
setUser (user => ({ ...user, inheritanceCode: data.code } as User))
toast ({ title: '再発行しました．' })
}
}