From d0a165c3f4d332830fea239d0f12a6caccfd6833 Mon Sep 17 00:00:00 2001 From: tonyrewin Date: Sun, 27 Nov 2022 14:00:44 +0300 Subject: [PATCH] media-audio-view --- public/icons/eye.svg | 8 +- src/components/Article/FullArticle.tsx | 130 +++++++++++++----- src/components/Views/Home.tsx | 1 + .../{articles-load.ts => article-load.ts} | 1 + src/styles/Article.module.scss | 11 ++ src/utils/apiClient.ts | 2 +- 6 files changed, 115 insertions(+), 38 deletions(-) rename src/graphql/query/{articles-load.ts => article-load.ts} (98%) diff --git a/public/icons/eye.svg b/public/icons/eye.svg index 54e28bdc..b13c2ac6 100644 --- a/public/icons/eye.svg +++ b/public/icons/eye.svg @@ -1,4 +1,6 @@ - - - + + + diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index 063d8bf2..6080035e 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -2,8 +2,8 @@ import { capitalize, formatDate } from '../../utils' import './Full.scss' import { Icon } from '../_shared/Icon' import { AuthorCard } from '../Author/Card' -import { createMemo, createSignal, For, onMount, Show } from 'solid-js' -import type { Author, Reaction, Shout } from '../../graphql/types.gen' +import { createMemo, createSignal, For, Match, onMount, Show, Switch } from 'solid-js' +import type { Author, Shout } from '../../graphql/types.gen' import { t } from '../../utils/intl' import MD from './MD' import { SharePopup } from './SharePopup' @@ -12,11 +12,50 @@ import styles from '../../styles/Article.module.scss' import RatingControl from './RatingControl' import { clsx } from 'clsx' import { CommentsTree } from './CommentsTree' +import { useSession } from '../../context/session' + interface ArticleProps { article: Shout } +interface MediaItem { + url?: string + pic?: string + title?: string + body?: string +} + +const MediaView = (props: { media: MediaItem; kind: Shout['layout'] }) => { + return ( + <> + + + + } + > + +
+
{props.media.title}
+ +
+
+ + + + + + + ) +} + export const FullArticle = (props: ArticleProps) => { + const { session } = useSession() const formattedDate = createMemo(() => formatDate(new Date(props.article.createdAt))) const [isSharePopupVisible, setIsSharePopupVisible] = createSignal(false) @@ -39,6 +78,20 @@ export const FullArticle = (props: ArticleProps) => { } }) + const canEdit = () => props.article.authors?.some((a) => a.slug === session()?.user?.slug) + + 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 + }) + return (
@@ -65,13 +118,24 @@ export const FullArticle = (props: ArticleProps) => {
- + +
+ + {(m: MediaItem) => ( +
+ + +
+ +
+ )} + +
+ +
- } - > - + }> +
@@ -83,16 +147,18 @@ export const FullArticle = (props: ArticleProps) => {
+ +
+ + {props.article.stat?.viewed} +
+ +
{props.article.stat?.commented || ''}
- {/*FIXME*/} - {/*
*/} - {/* console.log(props.article.slug, 'articles')}>*/} - {/* */} - {/* */} - {/*
*/} +
{ @@ -102,36 +168,32 @@ export const FullArticle = (props: ArticleProps) => { trigger={} />
-
+ +
- {/*FIXME*/} - {/**/} - {/*
*/} - {/* */} - {/* */} - {/* {t('Edit')}*/} - {/* */} - {/*
*/} - {/**/} + +
+ + + {t('Edit')} + +
+
{formattedDate()}
- - -
- - {props.article.stat?.viewed} -
-
-
- - + + + + + +
diff --git a/src/components/Views/Home.tsx b/src/components/Views/Home.tsx index c3520ef0..6b36c6f8 100644 --- a/src/components/Views/Home.tsx +++ b/src/components/Views/Home.tsx @@ -49,6 +49,7 @@ export const HomeView = (props: HomeProps) => { onMount(async () => { if (sortedArticles().length < PRERENDERED_ARTICLES_COUNT + CLIENT_LOAD_ARTICLES_COUNT) { const { hasMore } = await loadShouts({ + filters: { visibility: 'public' }, limit: CLIENT_LOAD_ARTICLES_COUNT, offset: sortedArticles().length }) diff --git a/src/graphql/query/articles-load.ts b/src/graphql/query/article-load.ts similarity index 98% rename from src/graphql/query/articles-load.ts rename to src/graphql/query/article-load.ts index 276ef97e..985ca1de 100644 --- a/src/graphql/query/articles-load.ts +++ b/src/graphql/query/article-load.ts @@ -10,6 +10,7 @@ export default gql` layout cover body + media # community mainTopic topics { diff --git a/src/styles/Article.module.scss b/src/styles/Article.module.scss index e40bf24e..ac196459 100644 --- a/src/styles/Article.module.scss +++ b/src/styles/Article.module.scss @@ -58,6 +58,17 @@ img { } } +.shoutMediaBody { + display: block; + audio { + display: inline-block; + } + + video { + display: block; + } +} + .shoutAuthor, .shoutDate { @include font-size(1.5rem); diff --git a/src/utils/apiClient.ts b/src/utils/apiClient.ts index 3138ee9f..3abbe2f4 100644 --- a/src/utils/apiClient.ts +++ b/src/utils/apiClient.ts @@ -39,7 +39,7 @@ import reactionsLoadBy from '../graphql/query/reactions-load-by' import { REACTIONS_AMOUNT_PER_PAGE } from '../stores/zine/reactions' import authorsLoadBy from '../graphql/query/authors-load-by' import shoutsLoadBy from '../graphql/query/articles-load-by' -import shoutLoad from '../graphql/query/articles-load' +import shoutLoad from '../graphql/query/article-load' import loadRecipients from '../graphql/query/chat-recipients' import createMessage from '../graphql/mutation/create-chat-message'