discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Solid Swiper in FullArticle.tsx (#127)

Browse Source
This commit is contained in:
Ilya Y 2023-07-17 20:14:34 +03:00 committed by GitHub
parent f0416f3497
commit e0c8dcbe5c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 52 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/components/Article/FullArticle.tsx
View File

@ -24,6 +24,7 @@ import article from '../Editor/extensions/Article'
import { createEffect, For, createMemo, onMount, Show, createSignal, Switch, Match } from 'solid-js' import { createEffect, For, createMemo, onMount, Show, createSignal, Switch, Match } from 'solid-js'
import { MediaItem } from '../../pages/types' import { MediaItem } from '../../pages/types'
import { AudioHeader } from './AudioHeader' import { AudioHeader } from './AudioHeader'
import { SolidSwiper } from '../_shared/SolidSwiper'
interface ArticleProps { interface ArticleProps {
article: Shout article: Shout
@ -105,6 +106,7 @@ export const FullArticle = (props: ArticleProps) => {
actions: { loadReactionsBy } actions: { loadReactionsBy }
} = useReactions() } = useReactions()
console.log('!!! props.s:', JSON.parse(props.article.media))
return ( return (
<> <>
<Title>{props.article.title}</Title> <Title>{props.article.title}</Title>
@ -112,52 +114,58 @@ export const FullArticle = (props: ArticleProps) => {
<div class="row"> <div class="row">
<article class="col-md-16 col-lg-14 col-xl-12 offset-md-5"> <article class="col-md-16 col-lg-14 col-xl-12 offset-md-5">
{/*TODO: Check styles.shoutTopic*/} {/*TODO: Check styles.shoutTopic*/}
<Switch> <Show when={props.article.layout !== 'audio'}>
<Match when={props.article.layout !== 'audio'}> <div class={styles.shoutHeader}>
<div class={styles.shoutHeader}> <Show when={mainTopic()}>
<Show when={mainTopic()}> <div class={styles.shoutTopic}>
<div class={styles.shoutTopic}> <a
<a href={getPagePath(router, 'topic', { slug: props.article.mainTopic })}
href={getPagePath(router, 'topic', { slug: props.article.mainTopic })} class={styles.mainTopicLink}
class={styles.mainTopicLink} >
> {mainTopic().title}
{mainTopic().title} </a>
</a>
</div>
</Show>
<h1>{props.article.title}</h1>
<Show when={props.article.subtitle}>
<h4>{capitalize(props.article.subtitle, false)}</h4>
</Show>
<div class={styles.shoutAuthor}>
<For each={props.article.authors}>
{(a: Author, index) => (
<>
<Show when={index() > 0}>, </Show>
<a href={getPagePath(router, 'author', { slug: a.slug })}>{a.name}</a>
</>
)}
</For>
</div> </div>
<Show when={props.article.cover && props.article.layout !== 'video'}> </Show>
<div
class={styles.shoutCover} <h1>{props.article.title}</h1>
style={{ 'background-image': `url('${imageProxy(props.article.cover)}')` }} <Show when={props.article.subtitle}>
/> <h4>{capitalize(props.article.subtitle, false)}</h4>
</Show> </Show>
<div class={styles.shoutAuthor}>
<For each={props.article.authors}>
{(a: Author, index) => (
<>
<Show when={index() > 0}>, </Show>
<a href={getPagePath(router, 'author', { slug: a.slug })}>{a.name}</a>
</>
)}
</For>
</div> </div>
</Match> <Show when={props.article.cover && props.article.layout !== 'video'}>
<Match when={props.article.layout === 'audio'}> <div
<AudioHeader class={styles.shoutCover}
title={props.article.title} style={{ 'background-image': `url('${imageProxy(props.article.cover)}')` }}
cover={props.article.cover} />
artistData={media()[0]} </Show>
topic={mainTopic()} </div>
/> </Show>
</Match> <Show when={props.article.layout === 'audio'}>
</Switch> <AudioHeader
title={props.article.title}
cover={props.article.cover}
artistData={media()?.[0]}
topic={mainTopic()}
/>
<Show when={media().length > 0}>
<div class="media-items">
<AudioPlayer media={media()} articleSlug={props.article.slug} body={body()} />
</div>
</Show>
</Show>
<Show when={props.article.layout === 'image'}>
<SolidSwiper images={media()} />
</Show>
<Show when={media() && props.article.layout === 'video'}> <Show when={media() && props.article.layout === 'video'}>
<div class="media-items"> <div class="media-items">
@ -173,13 +181,6 @@ export const FullArticle = (props: ArticleProps) => {
</For> </For>
</div> </div>
</Show> </Show>
<Show when={media().length > 0 && props.article.layout !== 'image'}>
<div class="media-items">
<AudioPlayer media={media()} articleSlug={props.article.slug} body={body()} />
</div>
</Show>
<Show when={body()}> <Show when={body()}>
<div class={styles.shoutBody}> <div class={styles.shoutBody}>
<Show when={!body().startsWith('<')} fallback={<div innerHTML={body()} />}> <Show when={!body().startsWith('<')} fallback={<div innerHTML={body()} />}>