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