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 { MediaItem } from '../../pages/types'
import { AudioHeader } from './AudioHeader'
import { SolidSwiper } from '../_shared/SolidSwiper'
interface ArticleProps {
article: Shout
@ -105,6 +106,7 @@ export const FullArticle = (props: ArticleProps) => {
actions: { loadReactionsBy }
} = useReactions()
console.log('!!! props.s:', JSON.parse(props.article.media))
return (
<>
<Title>{props.article.title}</Title>
@ -112,52 +114,58 @@ export const FullArticle = (props: ArticleProps) => {
<div class="row">
<article class="col-md-16 col-lg-14 col-xl-12 offset-md-5">
{/*TODO: Check styles.shoutTopic*/}
<Switch>
<Match when={props.article.layout !== 'audio'}>
<div class={styles.shoutHeader}>
<Show when={mainTopic()}>
<div class={styles.shoutTopic}>
<a
href={getPagePath(router, 'topic', { slug: props.article.mainTopic })}
class={styles.mainTopicLink}
>
{mainTopic().title}
</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>
<Show when={props.article.layout !== 'audio'}>
<div class={styles.shoutHeader}>
<Show when={mainTopic()}>
<div class={styles.shoutTopic}>
<a
href={getPagePath(router, 'topic', { slug: props.article.mainTopic })}
class={styles.mainTopicLink}
>
{mainTopic().title}
</a>
</div>
<Show when={props.article.cover && props.article.layout !== 'video'}>
<div
class={styles.shoutCover}
style={{ 'background-image': `url('${imageProxy(props.article.cover)}')` }}
/>
</Show>
</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>
</Match>
<Match when={props.article.layout === 'audio'}>
<AudioHeader
title={props.article.title}
cover={props.article.cover}
artistData={media()[0]}
topic={mainTopic()}
/>
</Match>
</Switch>
<Show when={props.article.cover && props.article.layout !== 'video'}>
<div
class={styles.shoutCover}
style={{ 'background-image': `url('${imageProxy(props.article.cover)}')` }}
/>
</Show>
</div>
</Show>
<Show when={props.article.layout === 'audio'}>
<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'}>
<div class="media-items">
@ -173,13 +181,6 @@ export const FullArticle = (props: ArticleProps) => {
</For>
</div>
</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()}>
<div class={styles.shoutBody}>
<Show when={!body().startsWith('<')} fallback={<div innerHTML={body()} />}>