Implemented the Live chat improvements.
This commit is contained in:
@@ -1,15 +1,17 @@
|
||||
import { Head, Link, router, useForm, usePage } from '@inertiajs/react';
|
||||
import {
|
||||
Crown,
|
||||
Heart,
|
||||
LogIn,
|
||||
MessageSquare,
|
||||
Radio,
|
||||
Send,
|
||||
SmilePlus,
|
||||
Users,
|
||||
Video,
|
||||
} from 'lucide-react';
|
||||
import type { FormEvent } from 'react';
|
||||
import { useState } from 'react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
Avatar as ChatAvatar,
|
||||
AvatarFallback,
|
||||
@@ -45,6 +47,25 @@ type Props = {
|
||||
isFollowing: boolean;
|
||||
};
|
||||
|
||||
const chatEmojis = [
|
||||
'😀',
|
||||
'😂',
|
||||
'😍',
|
||||
'😎',
|
||||
'🔥',
|
||||
'👏',
|
||||
'🙌',
|
||||
'❤️',
|
||||
'💯',
|
||||
'🎉',
|
||||
'👍',
|
||||
'👀',
|
||||
'🤯',
|
||||
'😭',
|
||||
'🙏',
|
||||
'✨',
|
||||
];
|
||||
|
||||
export default function ChannelShow({
|
||||
channel,
|
||||
currentBroadcast,
|
||||
@@ -155,6 +176,9 @@ export default function ChannelShow({
|
||||
<ChatPanel
|
||||
channel={channel}
|
||||
authUser={Boolean(auth.user)}
|
||||
currentUserId={
|
||||
auth.user?.id ?? null
|
||||
}
|
||||
messages={chatMessages}
|
||||
form={chatForm}
|
||||
onSubmit={submitChat}
|
||||
@@ -221,6 +245,7 @@ export default function ChannelShow({
|
||||
<ChatPanel
|
||||
channel={channel}
|
||||
authUser={Boolean(auth.user)}
|
||||
currentUserId={auth.user?.id ?? null}
|
||||
messages={chatMessages}
|
||||
form={chatForm}
|
||||
onSubmit={submitChat}
|
||||
@@ -272,6 +297,7 @@ function OfflinePlayer({ channel }: { channel: ChannelDetail }) {
|
||||
function ChatPanel({
|
||||
channel,
|
||||
authUser,
|
||||
currentUserId,
|
||||
messages,
|
||||
form,
|
||||
onSubmit,
|
||||
@@ -279,12 +305,50 @@ function ChatPanel({
|
||||
}: {
|
||||
channel: ChannelDetail;
|
||||
authUser: boolean;
|
||||
currentUserId: number | null;
|
||||
messages: ChatMessage[];
|
||||
form: ReturnType<typeof useForm<{ body: string }>>;
|
||||
onSubmit: (event: FormEvent) => void;
|
||||
compact?: boolean;
|
||||
}) {
|
||||
const getInitials = useInitials();
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
|
||||
const messageLength = form.data.body.length;
|
||||
const canSend =
|
||||
channel.is_live && form.data.body.trim().length > 0 && !form.processing;
|
||||
|
||||
useEffect(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ block: 'end' });
|
||||
}, [messages.length]);
|
||||
|
||||
function submitChatForm(event: FormEvent) {
|
||||
setEmojiPickerOpen(false);
|
||||
onSubmit(event);
|
||||
}
|
||||
|
||||
function insertEmoji(emoji: string) {
|
||||
const input = inputRef.current;
|
||||
const cursorStart = input?.selectionStart ?? form.data.body.length;
|
||||
const cursorEnd = input?.selectionEnd ?? form.data.body.length;
|
||||
const nextBody = (
|
||||
form.data.body.slice(0, cursorStart) +
|
||||
emoji +
|
||||
form.data.body.slice(cursorEnd)
|
||||
).slice(0, 500);
|
||||
const nextCursor = Math.min(
|
||||
cursorStart + emoji.length,
|
||||
nextBody.length,
|
||||
);
|
||||
|
||||
form.setData('body', nextBody);
|
||||
|
||||
window.requestAnimationFrame(() => {
|
||||
inputRef.current?.focus();
|
||||
inputRef.current?.setSelectionRange(nextCursor, nextCursor);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-0 w-full flex-col">
|
||||
@@ -296,66 +360,198 @@ function ChatPanel({
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<MessageSquare className="size-5 text-primary" />
|
||||
<h2 className="font-semibold">Live chat</h2>
|
||||
<div>
|
||||
<h2 className="font-semibold">Live chat</h2>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatMessageCount(messages.length)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<LiveState channel={channel} compact />
|
||||
</div>
|
||||
<div className="min-h-0 flex-1 space-y-3 overflow-y-auto p-4">
|
||||
{messages.map((message) => (
|
||||
<div
|
||||
key={message.id}
|
||||
className="flex min-w-0 gap-2 text-sm"
|
||||
>
|
||||
<ChatAvatar className="mt-0.5 size-7 rounded-md">
|
||||
<AvatarImage
|
||||
src={message.user.avatar_url ?? undefined}
|
||||
alt={message.user.name}
|
||||
className="object-cover"
|
||||
/>
|
||||
<AvatarFallback className="rounded-md bg-secondary text-[11px] font-semibold text-secondary-foreground">
|
||||
{getInitials(message.user.name)}
|
||||
</AvatarFallback>
|
||||
</ChatAvatar>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate font-medium">
|
||||
{message.user.name}
|
||||
</div>
|
||||
<div className="break-words text-muted-foreground">
|
||||
{message.body}
|
||||
<div className="min-h-0 flex-1 overflow-y-auto p-4">
|
||||
<div className="grid gap-3">
|
||||
{messages.map((message) => {
|
||||
const isOwnMessage = currentUserId === message.user.id;
|
||||
const isChannelOwner =
|
||||
channel.owner.id === message.user.id;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={message.id}
|
||||
className={cn(
|
||||
'flex min-w-0 gap-2 rounded-md border border-transparent p-2 text-sm',
|
||||
isOwnMessage &&
|
||||
!isChannelOwner &&
|
||||
'bg-primary/5',
|
||||
isChannelOwner &&
|
||||
'border-primary/30 bg-primary/10',
|
||||
)}
|
||||
>
|
||||
<ChatAvatar
|
||||
className={cn(
|
||||
'mt-0.5 size-8 rounded-md',
|
||||
isChannelOwner &&
|
||||
'ring-2 ring-primary/40',
|
||||
)}
|
||||
>
|
||||
<AvatarImage
|
||||
src={
|
||||
message.user.avatar_url ?? undefined
|
||||
}
|
||||
alt={message.user.name}
|
||||
className="object-cover"
|
||||
/>
|
||||
<AvatarFallback className="rounded-md bg-secondary text-[11px] font-semibold text-secondary-foreground">
|
||||
{getInitials(message.user.name)}
|
||||
</AvatarFallback>
|
||||
</ChatAvatar>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex min-w-0 items-baseline gap-2">
|
||||
<span
|
||||
className={cn(
|
||||
'truncate font-medium',
|
||||
isChannelOwner &&
|
||||
'text-primary',
|
||||
)}
|
||||
>
|
||||
{isOwnMessage
|
||||
? 'You'
|
||||
: message.user.name}
|
||||
</span>
|
||||
{isChannelOwner && (
|
||||
<span className="inline-flex shrink-0 items-center gap-1 rounded-sm bg-primary px-1.5 py-0.5 text-[10px] font-semibold text-primary-foreground">
|
||||
<Crown className="size-3" />
|
||||
Owner
|
||||
</span>
|
||||
)}
|
||||
{message.created_at && (
|
||||
<time
|
||||
dateTime={message.created_at}
|
||||
title={formatChatDateTime(
|
||||
message.created_at,
|
||||
)}
|
||||
className={cn(
|
||||
'ml-auto shrink-0 text-[11px] text-muted-foreground',
|
||||
isChannelOwner &&
|
||||
'text-primary/80',
|
||||
)}
|
||||
>
|
||||
{formatChatTime(
|
||||
message.created_at,
|
||||
)}
|
||||
</time>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
'leading-5 break-words whitespace-pre-wrap',
|
||||
isChannelOwner
|
||||
? 'text-foreground'
|
||||
: 'text-muted-foreground',
|
||||
)}
|
||||
>
|
||||
{message.body}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{messages.length === 0 && (
|
||||
<div className="grid justify-items-center gap-2 rounded-md border border-dashed p-5 text-center text-sm text-muted-foreground">
|
||||
<MessageSquare className="size-5 text-primary" />
|
||||
<span>
|
||||
{channel.is_live
|
||||
? 'No messages yet.'
|
||||
: 'Chat appears when the channel is live.'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{messages.length === 0 && (
|
||||
<div className="rounded-md border border-dashed p-4 text-sm text-muted-foreground">
|
||||
{channel.is_live
|
||||
? 'No messages yet.'
|
||||
: 'Chat appears when the channel is live.'}
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="shrink-0 border-t p-4">
|
||||
{authUser ? (
|
||||
<form onSubmit={onSubmit} className="flex gap-2">
|
||||
<Input
|
||||
value={form.data.body}
|
||||
onChange={(event) =>
|
||||
form.setData('body', event.target.value)
|
||||
}
|
||||
placeholder={
|
||||
channel.is_live
|
||||
? 'Send a message'
|
||||
: 'Channel is offline'
|
||||
}
|
||||
disabled={!channel.is_live}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
size="icon"
|
||||
disabled={!channel.is_live || form.processing}
|
||||
>
|
||||
<Send className="size-4" />
|
||||
</Button>
|
||||
<form onSubmit={submitChatForm} className="grid gap-2">
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
ref={inputRef}
|
||||
value={form.data.body}
|
||||
onChange={(event) =>
|
||||
form.setData('body', event.target.value)
|
||||
}
|
||||
placeholder={
|
||||
channel.is_live
|
||||
? 'Send a message'
|
||||
: 'Channel is offline'
|
||||
}
|
||||
disabled={!channel.is_live || form.processing}
|
||||
maxLength={500}
|
||||
/>
|
||||
<div className="relative">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
disabled={
|
||||
!channel.is_live || form.processing
|
||||
}
|
||||
aria-label="Open emoji picker"
|
||||
aria-expanded={emojiPickerOpen}
|
||||
onClick={() =>
|
||||
setEmojiPickerOpen((open) => !open)
|
||||
}
|
||||
>
|
||||
<SmilePlus className="size-4" />
|
||||
</Button>
|
||||
{emojiPickerOpen && channel.is_live && (
|
||||
<div className="absolute right-0 bottom-full z-10 mb-2 grid w-52 grid-cols-4 gap-1 rounded-md border bg-popover p-2 text-popover-foreground shadow-md">
|
||||
{chatEmojis.map((emoji) => (
|
||||
<button
|
||||
key={emoji}
|
||||
type="button"
|
||||
aria-label={`Insert ${emoji}`}
|
||||
className="flex size-10 items-center justify-center rounded-md text-lg hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
|
||||
onClick={() =>
|
||||
insertEmoji(emoji)
|
||||
}
|
||||
>
|
||||
{emoji}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
type="submit"
|
||||
size="icon"
|
||||
disabled={!canSend}
|
||||
aria-label="Send message"
|
||||
>
|
||||
<Send className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-2 text-xs text-muted-foreground">
|
||||
<span
|
||||
className={cn(
|
||||
'min-h-4',
|
||||
form.errors.body && 'text-destructive',
|
||||
)}
|
||||
>
|
||||
{form.errors.body ??
|
||||
(!channel.is_live
|
||||
? 'Channel is offline'
|
||||
: '')}
|
||||
</span>
|
||||
<span
|
||||
className={cn(
|
||||
'shrink-0 tabular-nums',
|
||||
messageLength > 450 && 'text-primary',
|
||||
)}
|
||||
>
|
||||
{messageLength}/500
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<Button asChild variant="outline" className="w-full">
|
||||
@@ -367,6 +563,21 @@ function ChatPanel({
|
||||
);
|
||||
}
|
||||
|
||||
function formatMessageCount(count: number): string {
|
||||
return count === 1 ? '1 message' : `${count} messages`;
|
||||
}
|
||||
|
||||
function formatChatTime(value: string): string {
|
||||
return new Date(value).toLocaleTimeString([], {
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
});
|
||||
}
|
||||
|
||||
function formatChatDateTime(value: string): string {
|
||||
return new Date(value).toLocaleString();
|
||||
}
|
||||
|
||||
function VodCard({ vod }: { vod: VodSummary }) {
|
||||
return (
|
||||
<div className="overflow-hidden rounded-md border bg-card">
|
||||
|
||||
Reference in New Issue
Block a user