garrettmills/commafeed
1
0
Fork 0
forked from Archives/Athou_commafeed
Code Pull Requests Activity

require src and alt for images

Browse Source
This commit is contained in:
Athou
2022-11-08 11:50:09 +01:00
parent fc2c3740a0
commit 9e65f5726c
4 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx
View File

@@ -3,8 +3,8 @@ import { useState } from "react"
import { TbPhoto } from "react-icons/tb" import { TbPhoto } from "react-icons/tb"
interface ImageWithPlaceholderWhileLoadingProps { interface ImageWithPlaceholderWhileLoadingProps {
src?: string src: string
alt?: string alt: string
title?: string title?: string
width?: number width?: number
height?: number | "auto" height?: number | "auto"

5
commafeed-client/src/components/content/Content.tsx
View File

@@ -29,7 +29,9 @@ const transform: TransformCallback = node => {
if (node.tagName === "IMG") { if (node.tagName === "IMG") {
// show placeholders for loading img tags, this allows the entry to have its final height immediately // show placeholders for loading img tags, this allows the entry to have its final height immediately
const src = node.getAttribute("src") ?? undefined const src = node.getAttribute("src") ?? undefined
const alt = node.getAttribute("alt") ?? undefined if (!src) return undefined
const alt = node.getAttribute("alt") ?? "image"
const title = node.getAttribute("title") ?? undefined const title = node.getAttribute("title") ?? undefined
const nodeWidth = node.getAttribute("width") const nodeWidth = node.getAttribute("width")
const nodeHeight = node.getAttribute("height") const nodeHeight = node.getAttribute("height")
@@ -40,6 +42,7 @@ const transform: TransformCallback = node => {
height, height,
maxWidth: Constants.layout.entryMaxWidth, maxWidth: Constants.layout.entryMaxWidth,
}) })
return ( return (
<ImageWithPlaceholderWhileLoading <ImageWithPlaceholderWhileLoading
src={src} src={src}

2
commafeed-client/src/components/content/Enclosure.tsx
View File

@@ -1,7 +1,7 @@
import { TypographyStylesProvider } from "@mantine/core" import { TypographyStylesProvider } from "@mantine/core"
import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading" import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
export function Enclosure(props: { enclosureType?: string; enclosureUrl?: string }) { export function Enclosure(props: { enclosureType: string; enclosureUrl: string }) {
const hasVideo = props.enclosureType && props.enclosureType.indexOf("video") === 0 const hasVideo = props.enclosureType && props.enclosureType.indexOf("video") === 0
const hasAudio = props.enclosureType && props.enclosureType.indexOf("audio") === 0 const hasAudio = props.enclosureType && props.enclosureType.indexOf("audio") === 0
const hasImage = props.enclosureType && props.enclosureType.indexOf("image") === 0 const hasImage = props.enclosureType && props.enclosureType.indexOf("image") === 0

2
commafeed-client/src/components/content/FeedEntryBody.tsx
View File

@@ -14,7 +14,7 @@ export function FeedEntryBody(props: FeedEntryBodyProps) {
<Box> <Box>
<Content content={props.entry.content} /> <Content content={props.entry.content} />
</Box> </Box>
{props.entry.enclosureUrl && ( {props.entry.enclosureType && props.entry.enclosureUrl && (
<Box pt="md"> <Box pt="md">
<Enclosure enclosureType={props.entry.enclosureType} enclosureUrl={props.entry.enclosureUrl} /> <Enclosure enclosureType={props.entry.enclosureType} enclosureUrl={props.entry.enclosureUrl} />
</Box> </Box>