import { capitalize, formatDate } from '../../utils'
import './Full.scss'
import { Icon } from '../_shared/Icon'
import { AuthorCard } from '../Author/Card'
import { createMemo, createSignal, For, Match, onMount, Show, Switch } from 'solid-js'
import type { Author, Shout } from '../../graphql/types.gen'
import MD from './MD'
import { SharePopup } from './SharePopup'
import { getDescription } from '../../utils/meta'
import stylesHeader from '../Nav/Header.module.scss'
import styles from '../../styles/Article.module.scss'
import { ShoutRatingControl } from './ShoutRatingControl'
import { clsx } from 'clsx'
import { CommentsTree } from './CommentsTree'
import { useSession } from '../../context/session'
import VideoPlayer from './VideoPlayer'
import Slider from '../_shared/Slider'
import { getPagePath } from '@nanostores/router'
import { router } from '../../stores/router'
import { useReactions } from '../../context/reactions'
import { Title } from '@solidjs/meta'
import { useLocalize } from '../../context/localize'
interface ArticleProps {
article: Shout
}
interface MediaItem {
url?: string
pic?: string
title?: string
body?: string
}
const MediaView = (props: { media: MediaItem; kind: Shout['layout'] }) => {
const { t } = useLocalize()
return (
<>
{t('Cannot show this media type')}}>
>
)
}
export const FullArticle = (props: ArticleProps) => {
const { t } = useLocalize()
const { userSlug, isAuthenticated } = useSession()
const [isReactionsLoaded, setIsReactionsLoaded] = createSignal(false)
const formattedDate = createMemo(() => formatDate(new Date(props.article.createdAt)))
const mainTopic = createMemo(
() =>
props.article.topics?.find((topic) => topic?.slug === props.article.mainTopic) ||
props.article.topics[0]
)
onMount(() => {
const windowHash = window.location.hash
if (windowHash?.length > 0) {
const comments = document.querySelector(windowHash)
if (comments) {
window.scrollTo({
top: comments.getBoundingClientRect().top,
behavior: 'smooth'
})
}
}
})
onMount(async () => {
await loadReactionsBy({
by: { shout: props.article.slug }
})
setIsReactionsLoaded(true)
})
const canEdit = () => props.article.authors?.some((a) => a.slug === userSlug())
const bookmark = (ev) => {
// TODO: implement bookmark clicked
ev.preventDefault()
}
const body = createMemo(() => props.article.body)
const media = createMemo(() => {
const mi = JSON.parse(props.article.media || '[]')
console.debug(mi)
return mi
})
const {
actions: { loadReactionsBy }
} = useReactions()
let commentsRef: HTMLDivElement | undefined
const scrollToComments = () => {
if (!isReactionsLoaded()) {
return
}
commentsRef.scrollIntoView({ behavior: 'smooth' })
}
return (
<>
{props.article.title}
{(m: MediaItem) => (
)}
{props.article.stat?.viewed}
scrollToComments()}>
{/*{props.article.stat?.commented || ''}*/}
}
/>
1}>
{t('Authors')}
{(a) => (
)}
>
)
}