From b0f4f92aa9cc091b9a5cb7d795f62ee38d6ba696 Mon Sep 17 00:00:00 2001 From: kvakazyambra Date: Fri, 25 Nov 2022 00:37:43 +0300 Subject: [PATCH 01/44] Profile settings --- public/icons/remove.svg | 6 + src/components/Nav/ProfilePopup.tsx | 2 +- src/components/Pages/ConnectPage.tsx | 2 +- .../Pages/about/DiscussionRulesPage.tsx | 2 +- src/components/Pages/about/DogmaPage.tsx | 2 +- src/components/Pages/about/GuidePage.tsx | 4 +- src/components/Pages/about/HelpPage.tsx | 4 +- src/components/Pages/about/ManifestPage.tsx | 4 +- src/components/Pages/about/PartnersPage.tsx | 2 +- src/components/Pages/about/PrinciplesPage.tsx | 2 +- src/components/Pages/about/ProjectsPage.tsx | 2 +- src/components/Pages/about/TermsOfUsePage.tsx | 4 +- src/components/Pages/about/ThanksPage.tsx | 2 +- .../Pages/profile/ProfileSettingsPage.tsx | 127 ++++++++++++++++++ .../Pages/profile/Settings.module.scss | 105 +++++++++++++++ src/components/Root.tsx | 4 +- src/pages/profile/settings.astro | 12 ++ src/stores/router.ts | 6 +- src/styles/app.scss | 92 +++++++------ 19 files changed, 327 insertions(+), 57 deletions(-) create mode 100644 public/icons/remove.svg create mode 100644 src/components/Pages/profile/ProfileSettingsPage.tsx create mode 100644 src/components/Pages/profile/Settings.module.scss create mode 100644 src/pages/profile/settings.astro diff --git a/public/icons/remove.svg b/public/icons/remove.svg new file mode 100644 index 00000000..a0723869 --- /dev/null +++ b/public/icons/remove.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/Nav/ProfilePopup.tsx b/src/components/Nav/ProfilePopup.tsx index fbd8de48..895458d5 100644 --- a/src/components/Nav/ProfilePopup.tsx +++ b/src/components/Nav/ProfilePopup.tsx @@ -30,7 +30,7 @@ export const ProfilePopup = (props: ProfilePopupProps) => { Закладки
  • - Настройки + Настройки
  • { return ( -
    +

    diff --git a/src/components/Pages/about/DiscussionRulesPage.tsx b/src/components/Pages/about/DiscussionRulesPage.tsx index 935639bc..51c1d38c 100644 --- a/src/components/Pages/about/DiscussionRulesPage.tsx +++ b/src/components/Pages/about/DiscussionRulesPage.tsx @@ -5,7 +5,7 @@ export const DiscussionRulesPage = () => { const title = t('Discussion rules') return ( -
    +

    diff --git a/src/components/Pages/about/DogmaPage.tsx b/src/components/Pages/about/DogmaPage.tsx index 789ceddf..aec59c8b 100644 --- a/src/components/Pages/about/DogmaPage.tsx +++ b/src/components/Pages/about/DogmaPage.tsx @@ -5,7 +5,7 @@ import { PageWrap } from '../../_shared/PageWrap' export const DogmaPage = () => { return ( -
    +

    Редакционные принципы

    diff --git a/src/components/Pages/about/GuidePage.tsx b/src/components/Pages/about/GuidePage.tsx index aac38377..8d74df65 100644 --- a/src/components/Pages/about/GuidePage.tsx +++ b/src/components/Pages/about/GuidePage.tsx @@ -20,9 +20,9 @@ export const GuidePage = () => { {/**/} {/**/} -
    +
    -
    +
    +
    +
    + + +
    +
    + + +
    +
    + +
    +

    + +

    + +
    +
    +
    +

    + + ) +} + +// for lazy loading +export default ProfileSettingsPage diff --git a/src/components/Pages/profile/Settings.module.scss b/src/components/Pages/profile/Settings.module.scss new file mode 100644 index 00000000..70b5246d --- /dev/null +++ b/src/components/Pages/profile/Settings.module.scss @@ -0,0 +1,105 @@ +h4 { + font-weight: 500; +} + +.avatarContainer { + border-radius: 100%; + overflow: hidden; + position: relative; + height: 18rem; + width: 18rem; +} + +.avatar, +.avatarInput { + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; +} + +.avatar { + background: #ccc; + border: none; + object-fit: cover; + object-position: center; +} + +.avatarInput { + border-radius: 100%; + cursor: pointer; + opacity: 0; + z-index: 1; +} + +.multipleControls { + margin-top: 3rem; +} + +.multipleControlsItem { + position: relative; + + button { + background-color: #fff; + padding: 0.5em; + position: absolute; + right: 0.8em; + top: 50%; + transform: translateY(-50%); + transition: background-color 0.3s; + + &:hover { + background-color: #000; + + .icon { + filter: invert(1); + } + } + + .icon { + filter: invert(0); + transition: filter 0.3s; + } + } + + form & input { + padding-right: 5rem; + } +} + +.multipleControlsHeader { + display: flex; + margin-bottom: 0.5em; + + h4 { + flex: 1; + margin-bottom: 0; + } + + button { + margin-left: 1em; + padding-bottom: 0.5rem; + padding-top: 0.5rem; + } +} + +.discoursName { + display: flex; + + @include media-breakpoint-down(sm) { + flex-wrap: wrap; + + input { + min-width: 250px; + } + } + + label { + margin: 0.6em 0.5em 0 0; + } +} + +.discoursNameField { + flex: 1; +} diff --git a/src/components/Root.tsx b/src/components/Root.tsx index 9e9e751a..75a470f5 100644 --- a/src/components/Root.tsx +++ b/src/components/Root.tsx @@ -32,6 +32,7 @@ import { ConnectPage } from './Pages/ConnectPage' import { InboxPage } from './Pages/InboxPage' import { LayoutShoutsPage } from './Pages/LayoutShoutsPage' import { SessionProvider } from '../context/session' +import { ProfileSettingsPage } from './Pages/profile/ProfileSettingsPage' // TODO: lazy load // const SomePage = lazy(() => import('./Pages/SomePage')) @@ -58,7 +59,8 @@ const pagesMap: Record> = { partners: PartnersPage, principles: PrinciplesPage, termsOfUse: TermsOfUsePage, - thanks: ThanksPage + thanks: ThanksPage, + profileSettings: ProfileSettingsPage } export const Root = (props: PageProps) => { diff --git a/src/pages/profile/settings.astro b/src/pages/profile/settings.astro new file mode 100644 index 00000000..98564ae8 --- /dev/null +++ b/src/pages/profile/settings.astro @@ -0,0 +1,12 @@ +--- +import Prerendered from '../../main.astro' +import { Root } from '../../components/Root' +import { initRouter } from '../../stores/router' + +const { pathname, search } = Astro.url +initRouter(pathname, search) +--- + + + + diff --git a/src/stores/router.ts b/src/stores/router.ts index 67358486..7a960fb6 100644 --- a/src/stores/router.ts +++ b/src/stores/router.ts @@ -27,6 +27,8 @@ export interface Routes { thanks: void expo: 'layout' inbox: void // TODO: добавить ID текущего юзера + profile: void + profileSettings: void } const searchParamsStore = createSearchParams() @@ -53,7 +55,9 @@ const routerStore = createRouter( projects: '/about/projects', termsOfUse: '/about/terms-of-use', thanks: '/about/thanks', - expo: '/expo/:layout' + expo: '/expo/:layout', + profile: '/profile', + profileSettings: '/profile/settings' }, { search: false, diff --git a/src/styles/app.scss b/src/styles/app.scss index 34ae8298..869b2fe4 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -67,6 +67,7 @@ section { margin: 0 auto; max-width: 1400px; padding: 0 divide($container-padding-x, 2); + width: 100%; @include media-breakpoint-up(sm) { padding: 0 $container-padding-x; @@ -299,6 +300,12 @@ button { } } +.button--submit { + @include font-size(2rem); + + padding: 1.6rem 2rem; +} + form { .pretty-form__item { position: relative; @@ -317,6 +324,7 @@ form { input[type='password'], input[type='search'], input[type='tel'], + input[type='date'], textarea, select { border: 2px solid #e8e8e8; @@ -351,6 +359,19 @@ form { transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1); user-select: none; } + + & + .form-message { + margin-top: -1.2rem; + } + + &.nolabel { + padding-bottom: 1.8rem; + padding-top: 1.7rem; + } + } + + .form-message--error { + color: #d00820; } select { @@ -378,6 +399,10 @@ form { top: 3rem; } } + + .form-message { + @include font-size(1.2rem); + } } .input--short { @@ -415,45 +440,6 @@ input[type='checkbox'] { display: none !important; } -.article__author { - font-size: 1.5rem; - font-weight: 400; - - &, - a { - color: #9fa1a7; - } - - a { - background: transparent; - transition: background-color 0.2s; - - &:hover { - background: #000; - color: #fff; - } - } -} - -.article__topic { - font-size: 1.2rem; - letter-spacing: 0.08em; - margin-bottom: 0.8rem; - text-transform: uppercase; - transition: background-color 0.2s; - - a { - background: transparent; - border: none; - color: $link-color; - - &:hover { - background: $link-color; - color: #fff; - } - } -} - figure { margin: 2em 0; } @@ -677,6 +663,8 @@ astro-island { } .shift-content { + position: relative; + @include media-breakpoint-up(md) { margin-left: 161px; } @@ -684,6 +672,27 @@ astro-island { @include media-breakpoint-up(lg) { margin-left: 235px; } + + .left-col { + height: 100%; + padding-right: 2rem; + position: absolute; + right: 100%; + top: 0; + + @include media-breakpoint-up(md) { + width: 161px; + } + + @include media-breakpoint-up(lg) { + width: 235px; + } + } + + .left-navigation { + position: sticky; + top: 0; + } } .center { @@ -790,3 +799,8 @@ details { -webkit-box-orient: vertical; white-space: normal; } + +.description { + @include font-size(1.4rem); + color: rgba(0 0 0 / 40%); +} From a15069120bb5cce9dc11103ead7d051e6085c3c9 Mon Sep 17 00:00:00 2001 From: tonyrewin Date: Fri, 25 Nov 2022 11:19:04 +0300 Subject: [PATCH 02/44] lintable --- .eslintrc.js | 16 +++----- src/components/Pages/profile/ProfilePage.tsx | 39 ++++++++++++++++++++ src/components/Root.tsx | 4 +- src/components/Views/Author.tsx | 3 +- 4 files changed, 49 insertions(+), 13 deletions(-) create mode 100644 src/components/Pages/profile/ProfilePage.tsx diff --git a/.eslintrc.js b/.eslintrc.js index 448e589e..5b15a85f 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -50,16 +50,8 @@ module.exports = { }, globals: {}, rules: { - // FIXME - 'unicorn/prefer-dom-node-append': 'off', - - // TEMP - // FIXME - 'solid/reactivity': 'off', - - // Should be enabled - // 'promise/catch-or-return': 'off', - + // Solid + 'solid/reactivity': 'off', // FIXME 'solid/no-innerhtml': 'off', /** Unicorn **/ @@ -73,8 +65,12 @@ module.exports = { 'unicorn/import-style': 'off', 'unicorn/numeric-separators-style': 'off', 'unicorn/prefer-node-protocol': 'off', + 'unicorn/prefer-dom-node-append': 'off', // FIXME + 'unicorn/prefer-top-level-await': 'warn', 'unicorn/consistent-function-scoping': 'warn', + // Promise + // 'promise/catch-or-return': 'off', // Should be enabled 'promise/always-return': 'off', eqeqeq: 'error', diff --git a/src/components/Pages/profile/ProfilePage.tsx b/src/components/Pages/profile/ProfilePage.tsx new file mode 100644 index 00000000..89d673a6 --- /dev/null +++ b/src/components/Pages/profile/ProfilePage.tsx @@ -0,0 +1,39 @@ +import { PageWrap } from '../../_shared/PageWrap' +import { AuthorView, PRERENDERED_ARTICLES_COUNT } from '../../Views/Author' +import type { PageProps } from '../../types' +import { createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js' +import { loadShouts, resetSortedArticles } from '../../../stores/zine/articles' +import { loadAuthor } from '../../../stores/zine/authors' +import { Loading } from '../../Loading' +import { useSession } from '../../../context/session' +import type { Author } from '../../../graphql/types.gen' + +export const ProfilePage = (props: PageProps) => { + const [isLoaded, setIsLoaded] = createSignal(Boolean(props.shouts)) + const { session } = useSession() + const profile = createMemo(() => session().user) + + // TODO: ass editing controls + + onMount(async () => { + if (isLoaded()) { + return + } + await loadShouts({ filters: { author: profile().slug }, limit: PRERENDERED_ARTICLES_COUNT }) + await loadAuthor({ slug: profile().slug }) + setIsLoaded(true) + }) + + onCleanup(() => resetSortedArticles()) + + return ( + + }> + + + + ) +} + +// for lazy loading +export default ProfilePage diff --git a/src/components/Root.tsx b/src/components/Root.tsx index 75a470f5..4eb927ac 100644 --- a/src/components/Root.tsx +++ b/src/components/Root.tsx @@ -33,6 +33,7 @@ import { InboxPage } from './Pages/InboxPage' import { LayoutShoutsPage } from './Pages/LayoutShoutsPage' import { SessionProvider } from '../context/session' import { ProfileSettingsPage } from './Pages/profile/ProfileSettingsPage' +import { ProfilePage } from './Pages/profile/ProfilePage' // TODO: lazy load // const SomePage = lazy(() => import('./Pages/SomePage')) @@ -60,7 +61,8 @@ const pagesMap: Record> = { principles: PrinciplesPage, termsOfUse: TermsOfUsePage, thanks: ThanksPage, - profileSettings: ProfileSettingsPage + profileSettings: ProfileSettingsPage, + profile: ProfilePage } export const Root = (props: PageProps) => { diff --git a/src/components/Views/Author.tsx b/src/components/Views/Author.tsx index 94635d88..59f4ab3f 100644 --- a/src/components/Views/Author.tsx +++ b/src/components/Views/Author.tsx @@ -17,7 +17,6 @@ import { splitToPages } from '../../utils/splitToPages' type AuthorProps = { shouts: Shout[] author: Author - authorSlug: string // FIXME author topics from server // topics: Topic[] } @@ -37,7 +36,7 @@ export const AuthorView = (props: AuthorProps) => { const { topicsByAuthor } = useTopicsStore() const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false) - const author = createMemo(() => authorEntities()[props.authorSlug]) + const author = createMemo(() => authorEntities()[props.author.slug]) const { searchParams, changeSearchParam } = useRouter() const loadMore = async () => { From 2831d0015fe69387a40ca877d9d1992c760ea9ec Mon Sep 17 00:00:00 2001 From: tonyrewin Date: Fri, 25 Nov 2022 11:24:07 +0300 Subject: [PATCH 03/44] fix-author-page --- src/components/Pages/AuthorPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Pages/AuthorPage.tsx b/src/components/Pages/AuthorPage.tsx index 556fbea3..2006c8a2 100644 --- a/src/components/Pages/AuthorPage.tsx +++ b/src/components/Pages/AuthorPage.tsx @@ -38,7 +38,7 @@ export const AuthorPage = (props: PageProps) => { return ( }> - + ) From 539c0454fff47e7d47a7919e3110a4da3b1b5738 Mon Sep 17 00:00:00 2001 From: Igor Lobanov Date: Fri, 25 Nov 2022 10:38:26 +0100 Subject: [PATCH 04/44] author loading fix --- src/components/Pages/AuthorPage.tsx | 2 +- src/components/Views/Author.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Pages/AuthorPage.tsx b/src/components/Pages/AuthorPage.tsx index 2006c8a2..556fbea3 100644 --- a/src/components/Pages/AuthorPage.tsx +++ b/src/components/Pages/AuthorPage.tsx @@ -38,7 +38,7 @@ export const AuthorPage = (props: PageProps) => { return ( }> - + ) diff --git a/src/components/Views/Author.tsx b/src/components/Views/Author.tsx index 59f4ab3f..94635d88 100644 --- a/src/components/Views/Author.tsx +++ b/src/components/Views/Author.tsx @@ -17,6 +17,7 @@ import { splitToPages } from '../../utils/splitToPages' type AuthorProps = { shouts: Shout[] author: Author + authorSlug: string // FIXME author topics from server // topics: Topic[] } @@ -36,7 +37,7 @@ export const AuthorView = (props: AuthorProps) => { const { topicsByAuthor } = useTopicsStore() const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false) - const author = createMemo(() => authorEntities()[props.author.slug]) + const author = createMemo(() => authorEntities()[props.authorSlug]) const { searchParams, changeSearchParam } = useRouter() const loadMore = async () => { From 7bd9320d249559fc913a16061174f9c3165554bd Mon Sep 17 00:00:00 2001 From: Igor Lobanov Date: Fri, 25 Nov 2022 12:03:51 +0100 Subject: [PATCH 05/44] fixes --- src/components/Article/FullArticle.tsx | 4 -- src/components/Nav/ProfilePopup.tsx | 9 +++-- src/components/Pages/profile/ProfilePage.tsx | 39 ------------------- .../Pages/profile/ProfileSettingsPage.tsx | 8 ++-- src/components/Root.tsx | 4 +- src/context/session.tsx | 5 ++- src/stores/router.ts | 2 - 7 files changed, 14 insertions(+), 57 deletions(-) delete mode 100644 src/components/Pages/profile/ProfilePage.tsx diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index ecc3c51b..36d176e4 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -43,7 +43,6 @@ const formatDate = (date: Date) => { export const FullArticle = (props: ArticleProps) => { const { session } = useSession() const formattedDate = createMemo(() => formatDate(new Date(props.article.createdAt))) - const [isSharePopupVisible, setIsSharePopupVisible] = createSignal(false) const mainTopic = () => (props.article.topics?.find((topic) => topic?.slug === props.article.mainTopic)?.title || '').replace( @@ -127,9 +126,6 @@ export const FullArticle = (props: ArticleProps) => { {/*
    */}
    { - setIsSharePopupVisible(isVisible) - }} containerCssClass={stylesHeader.control} trigger={} /> diff --git a/src/components/Nav/ProfilePopup.tsx b/src/components/Nav/ProfilePopup.tsx index 895458d5..caef2d15 100644 --- a/src/components/Nav/ProfilePopup.tsx +++ b/src/components/Nav/ProfilePopup.tsx @@ -2,20 +2,23 @@ import { useSession } from '../../context/session' import type { PopupProps } from '../_shared/Popup' import { Popup } from '../_shared/Popup' import styles from '../_shared/Popup/Popup.module.scss' +import { getPagePath } from '@nanostores/router' +import { router } from '../../stores/router' type ProfilePopupProps = Omit export const ProfilePopup = (props: ProfilePopupProps) => { const { - session, + userSlug, actions: { signOut } } = useSession() return ( + {/*TODO: l10n*/}

    ) - const [searchResults, setSearchResults] = createSignal([]) + const [filteredAuthors, setFilteredAuthors] = createSignal([]) // eslint-disable-next-line sonarjs/cognitive-complexity - const searchAuthors = (value) => { + const filterAuthors = (value) => { /* very stupid search algorithm with no deps */ let q = value.toLowerCase() if (q.length > 0) { - console.debug(q) - setSearchResults([]) - + setFilteredAuthors([]) if (locale() === 'ru') q = translit(q, 'ru') - const aaa: Author[] = [] + const aaa: Author[] = sortedAuthors() sortedAuthors().forEach((a) => { let flag = false a.slug.split('-').forEach((w) => { @@ -112,16 +113,17 @@ export const AllAuthorsView = (props: Props) => { }) } - if (flag && !aaa.includes(a)) aaa.push(a) + if (!flag && aaa.includes(a)) { + const idx = aaa.indexOf(a) + aaa.splice(idx, 1) + } }) - - setSearchResults((sr: Author[]) => [...sr, ...aaa]) - changeSearchParam('by', '') + setFilteredAuthors(aaa) } } return (
    - 0 || searchResults().length > 0}> + 0 || filteredAuthors().length > 0}>
    @@ -174,29 +176,10 @@ export const AllAuthorsView = (props: Props) => { - 0}> - - {(author) => ( - <> - - - - )} - - -
    - + {(author) => ( <> {
    - limit()}> + limit() && searchParams().by !== 'name'}>
    @@ -127,7 +130,7 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
    - 0 || searchResults().length > 0}> + 0}>
      @@ -173,21 +176,8 @@ export const AllTopicsView = (props: AllTopicsViewProps) => { - 1}> - - {(topic) => ( - - )} - - - - + {(topic) => ( <> { - limit()}> + limit() && searchParams().by !== 'title'}>
      - + + + + + +
      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' From 8ad358d749575beb38e746dcf7b82da9a4d72671 Mon Sep 17 00:00:00 2001 From: tonyrewin Date: Sun, 27 Nov 2022 14:35:27 +0300 Subject: [PATCH 11/44] added video and show literature --- src/components/Article/FullArticle.tsx | 5 ++-- src/components/Article/VideoPlayer.tsx | 36 +++++++++++++++++--------- 2 files changed, 26 insertions(+), 15 deletions(-) diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index 0f0e2039..45b2ac0c 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -13,6 +13,7 @@ import RatingControl from './RatingControl' import { clsx } from 'clsx' import { CommentsTree } from './CommentsTree' import { useSession } from '../../context/session' +import VideoPlayer from './VideoPlayer' interface ArticleProps { article: Shout @@ -45,9 +46,7 @@ const MediaView = (props: { media: MediaItem; kind: Shout['layout'] }) => {
      - + diff --git a/src/components/Article/VideoPlayer.tsx b/src/components/Article/VideoPlayer.tsx index 8ef45485..ec89f50f 100644 --- a/src/components/Article/VideoPlayer.tsx +++ b/src/components/Article/VideoPlayer.tsx @@ -1,12 +1,24 @@ -export default (props: { youtubeId?: string; vimeoId?: string; title?: string }) => { - // TODO: styling - return ( -