miteruzo/btrc-hub
1
0
フォーク 0
コード 課題 62 Pull リクエスト 1 リリース Wiki アクティビティ

Merge remote-tracking branch 'origin/main' into feature/034

ソースを参照
このコミットが含まれているのは:
みてるぞ
2026-07-05 11:59:28 +09:00
親 61ab4744bd 15619886f2
コミット 40cc3b2c0c
10個のファイルの変更，612行の追加，104行の削除
Patchファイルをダウンロード Diffファイルをダウンロード すべてのファイルを展開 すべてのファイルを折り畳む
frontend/src/pages/materials/MaterialBasePage.tsx
+4 -2
ファイルの表示
@@ -6,9 +6,11 @@ import type { FC } from 'react'
const MaterialBasePage: FC = () => (
<div className="md:flex md:flex-1 overflow-y-auto md:overflow-y-hidden">
<div
data-sidebar-container
className="md:flex md:flex-1 overflow-y-auto md:overflow-y-hidden">
<MaterialSidebar/>
<Outlet/>
</div>)
export default MaterialBasePage
export default MaterialBasePage
frontend/src/pages/posts/PostDetailPage.tsx
+5 -7
ファイルの表示
@@ -94,16 +94,16 @@ const PostDetailPage: FC<Props> = ({ user }) => {
: 'bg-gray-500 hover:bg-gray-600')
return (
<div className="md:flex md:flex-1 overflow-y-auto md:overflow-y-hidden">
<div
data-sidebar-container
className="md:flex md:flex-1 overflow-y-auto md:overflow-y-hidden">
<Helmet>
{(post?.thumbnail || post?.thumbnailBase) && (
<meta name="thumbnail" content={post.thumbnail! || post.thumbnailBase!}/>)}
{post && <title>{`${ post.title || post.url } | ${ SITE_TITLE }`}</title>}
</Helmet>
<div className="hidden md:block">
{post && <TagDetailSidebar post={post}/>}
</div>
{post && <TagDetailSidebar post={post} className="hidden md:block"/>}
<MainArea className="relative">
{post
@@ -183,9 +183,7 @@ const PostDetailPage: FC<Props> = ({ user }) => {
: 'Loading...'}
</MainArea>
<div className="md:hidden">
{post && <TagDetailSidebar post={post} sp/>}
</div>
{post && <TagDetailSidebar post={post} sp className="md:hidden"/>}
</div>)
}
frontend/src/pages/posts/PostListPage.tsx
+1
ファイルの表示
@@ -122,6 +122,7 @@ const PostListPage: FC = () => {
return (
<div
data-sidebar-container
className="md:flex md:flex-1 overflow-y-auto md:overflow-y-hidden"
ref={containerRef}>
<Helmet>
frontend/src/pages/theatres/TheatreDetailPage.test.tsx
+38 -30
ファイルの表示
@@ -105,6 +105,20 @@ const tagSection = (): HTMLElement =>
screen.getAllByRole ('heading', { name: 'タグ' })[0].closest ('section')!
const mockDefaultApi = () => {
let commentsFetched = false
let currentTheatreInfo = buildTheatreInfo ({
postId: currentPost.id,
postStartedAt: '2026-01-02T03:04:05.000Z',
postElapsedMs: 1_000,
watchingUsers,
skipVote: {
votesCount: 0,
requiredCount: 2,
watchingUsersCount: watchingUsers.length,
voted: false,
},
})
api.apiGet.mockImplementation ((path: string) => {
switch (path)
{
@@ -112,13 +126,17 @@ const mockDefaultApi = () => {
return Promise.resolve (theatre)
case '/theatres/7/comments':
if (commentsFetched)
return Promise.resolve ([])
commentsFetched = true
return Promise.resolve ([
buildTheatreComment ({
theatreId: 7,
no: 2,
user: { id: 1, name: 'tester' },
content: '視聴コメント',
}),
buildTheatreComment ({
theatreId: 7,
no: 2,
user: { id: 1, name: 'tester' },
content: '視聴コメント',
}),
])
case '/theatres/7/programmes':
@@ -136,32 +154,22 @@ const mockDefaultApi = () => {
switch (path)
{
case '/theatres/7/watching':
return Promise.resolve (buildTheatreInfo ({
postId: currentPost.id,
postStartedAt: '2026-01-02T03:04:05.000Z',
postElapsedMs: 1_000,
watchingUsers,
skipVote: {
votesCount: 0,
requiredCount: 2,
watchingUsersCount: watchingUsers.length,
voted: false,
},
}))
return Promise.resolve (currentTheatreInfo)
case '/theatres/7/skip_vote':
return Promise.resolve (buildTheatreInfo ({
postId: currentPost.id,
postStartedAt: '2026-01-02T03:04:05.000Z',
postElapsedMs: 2_000,
watchingUsers,
skipVote: {
votesCount: 1,
requiredCount: 2,
watchingUsersCount: watchingUsers.length,
voted: true,
},
}))
currentTheatreInfo = buildTheatreInfo ({
postId: currentPost.id,
postStartedAt: '2026-01-02T03:04:05.000Z',
postElapsedMs: 2_000,
watchingUsers,
skipVote: {
votesCount: 1,
requiredCount: 2,
watchingUsersCount: watchingUsers.length,
voted: true,
},
})
return Promise.resolve (currentTheatreInfo)
default:
return Promise.reject (new Error (`Unexpected PUT ${ path }`))
frontend/src/pages/theatres/TheatreDetailPage.tsx
+77 -27
ファイルの表示
@@ -10,6 +10,7 @@ import PrefetchLink from '@/components/PrefetchLink'
import TagLink from '@/components/TagLink'
import FieldError from '@/components/common/FieldError'
import { useDialogue } from '@/components/dialogues/DialogueProvider'
import SidebarComponent from '@/components/layout/SidebarComponent'
import { Button } from '@/components/ui/button'
import { SITE_TITLE } from '@/config'
import { CATEGORIES, CATEGORY_NAMES } from '@/consts'
@@ -56,6 +57,11 @@ const INITIAL_THEATRE_INFO: TheatreInfo =
const INITIAL_WEIGHTS: TheatrePostSelectionWeights =
{ tagPenalties: [], lightestPosts: [], heaviestPosts: [] }
const LAYOUT_STORAGE_KEY = 'theatre-layout-mode'
const TAG_FLOW_STORAGE_KEY = 'theatre-tag-flow'
const MIN_MAIN_WIDTH = 360
const SIDEBAR_GAP_WIDTH = 16
const LAYOUT_LABELS: Record<TheatreLayoutMode, string> = {
threeColumns: '3 列',
tagsBottom: '2 列 A 型',
@@ -214,11 +220,16 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
const commentsRef = useRef<HTMLDivElement> (null)
const embedRef = useRef<NiconicoViewerHandle> (null)
const loadingRef = useRef (false)
const sidebarContainerRef = useRef<HTMLDivElement> (null)
const theatreInfoRef = useRef<TheatreInfo> (INITIAL_THEATRE_INFO)
const theatreInfoReceivedAtRef = useRef (performance.now ())
const videoLengthRef = useRef (0)
const lastCommentNoRef = useRef (0)
const [leftSidebarWidth, setLeftSidebarWidth] = useState (256)
const [rightSidebarWidth, setRightSidebarWidth] = useState (256)
const [sidebarContainerWidth, setSidebarContainerWidth] = useState (
() => typeof window === 'undefined' ? 0 : window.innerWidth)
const [comments, setComments] = useState<TheatreComment[]> ([])
const [content, setContent] = useState ('')
const [editingPost, setEditingPost] = useState<Post | null> (null)
@@ -249,6 +260,7 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
const applyTheatreInfo = useCallback ((nextInfo: TheatreInfo) => {
theatreInfoReceivedAtRef.current = performance.now ()
theatreInfoRef.current = nextInfo
setTheatreInfo (nextInfo)
}, [])
@@ -315,6 +327,17 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
lastCommentNoRef.current = comments[0]?.no ?? 0
}, [comments])
useEffect (() => {
const updateSidebarContainerWidth = () => {
const nextWidth = sidebarContainerRef.current?.clientWidth ?? window.innerWidth
setSidebarContainerWidth (nextWidth)
}
updateSidebarContainerWidth ()
window.addEventListener ('resize', updateSidebarContainerWidth)
return () => window.removeEventListener ('resize', updateSidebarContainerWidth)
}, [])
useEffect (() => {
if (!(id))
return
@@ -378,6 +401,9 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
setComments (prev => [...newComments, ...prev])
}
if (loadingRef.current)
return
const currentInfo = theatreInfoRef.current
const ended =
currentInfo.hostFlg
@@ -399,8 +425,9 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
return
}
const watchingRequestedAt = performance.now ()
const nextInfo = await apiPut<TheatreInfo> (`/theatres/${ id }/watching`)
if (!(cancelled))
if (!(cancelled) && watchingRequestedAt >= theatreInfoReceivedAtRef.current)
applyTheatreInfo (nextInfo)
}
catch (error)
@@ -529,6 +556,7 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
if (!(id) || !(post))
return
loadingRef.current = true
setLoading (true)
try
{
@@ -557,6 +585,7 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
}
finally
{
loadingRef.current = false
setLoading (false)
}
}
@@ -630,6 +659,26 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
if (status >= 400)
return <ErrorScreen status={status}/>
const singleSidebarMaxWidth = Math.max (
192,
sidebarContainerWidth - MIN_MAIN_WIDTH - SIDEBAR_GAP_WIDTH)
const leftSidebarMaxWidth = layoutMode === 'threeColumns'
? Math.max (
192,
sidebarContainerWidth
- rightSidebarWidth
- MIN_MAIN_WIDTH
- SIDEBAR_GAP_WIDTH * 2)
: singleSidebarMaxWidth
const rightSidebarMaxWidth = layoutMode === 'threeColumns'
? Math.max (
192,
sidebarContainerWidth
- leftSidebarWidth
- MIN_MAIN_WIDTH
- SIDEBAR_GAP_WIDTH * 2)
: singleSidebarMaxWidth
const tagPanel = (
<section className="rounded border-zinc-300 p-4 dark:border-zinc-800">
<div className="mb-3 flex items-center justify-between gap-3">
@@ -797,30 +846,26 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
{theatre && <title>{`${ theatreTitle } | ${ SITE_TITLE }`}</title>}
</Helmet>
<div className={cn (
'grid min-h-full gap-4 overflow-visible md:h-full md:overflow-hidden',
(layoutMode === 'threeColumns'
&& ['md:grid-cols-[16rem_minmax(0,1fr)_22rem]',
'xl:grid-cols-[18rem_minmax(0,1fr)_24rem]']),
(layoutMode === 'tagsBottom'
&& 'md:grid-cols-[minmax(0,1fr)_22rem] xl:grid-cols-[minmax(0,1fr)_24rem]'),
(layoutMode === 'commentsBottom'
&& 'md:grid-cols-[16rem_minmax(0,1fr)] xl:grid-cols-[18rem_minmax(0,1fr)]'))}>
<div
ref={sidebarContainerRef}
data-sidebar-container
className="flex min-h-full flex-col gap-4 overflow-visible md:h-full md:flex-row
md:overflow-hidden">
{layoutMode !== 'tagsBottom' && (
<motion.aside
layout="position"
className="hidden min-w-0 space-y-4 md:order-none md:block md:overflow-y-auto
md:[direction:rtl]">
<div className="md:[direction:ltr]">
{tagPanel}
</div>
</motion.aside>)}
<SidebarComponent
sidebarKey="theatre-tags"
side="left"
maxWidth={leftSidebarMaxWidth}
onWidthChange={setLeftSidebarWidth}
className="hidden md:block">
{tagPanel}
</SidebarComponent>)}
<motion.main
layout="position"
className={cn ('order-1 min-w-0 space-y-4 md:order-none md:overflow-y-auto',
layoutMode === 'tagsBottom' && 'md:[direction:rtl]')}>
<div className={cn ('space-y-4', layoutMode === 'tagsBottom' && 'md:[direction:ltr]')}>
className="order-1 min-w-0 flex-1 space-y-4 md:order-none
md:min-w-[360px] md:overflow-y-auto">
<div className="space-y-4">
<section className="overflow-hidden rounded border-zinc-300
dark:border-zinc-800">
<div className="flex flex-wrap items-center justify-between gap-3
@@ -956,12 +1001,17 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
</motion.main>
{layoutMode !== 'commentsBottom' && (
<motion.aside
layout="position"
className="hidden min-w-0 space-y-4 md:order-none md:block md:overflow-y-auto">
{commentsPanel}
{participantsPanel}
</motion.aside>)}
<SidebarComponent
sidebarKey="theatre-comments"
side="right"
maxWidth={rightSidebarMaxWidth}
onWidthChange={setRightSidebarWidth}
className="hidden md:block">
<div className="space-y-4">
{commentsPanel}
{participantsPanel}
</div>
</SidebarComponent>)}
</div>
</motion.div>)
}