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

29
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,8 +114,7 @@ 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'}>
<Show when={props.article.layout !== 'audio'}>
<div class={styles.shoutHeader}>
<Show when={mainTopic()}>
<div class={styles.shoutTopic}>
@ -148,16 +149,23 @@ export const FullArticle = (props: ArticleProps) => {
/>
</Show>
</div>
</Match>
<Match when={props.article.layout === 'audio'}>
</Show>
<Show when={props.article.layout === 'audio'}>
<AudioHeader
title={props.article.title}
cover={props.article.cover}
artistData={media()[0]}
artistData={media()?.[0]}
topic={mainTopic()}
/>
</Match>
</Switch>
<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()} />}>