Docker/planka
Docker/planka
1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-18 12:49:43 +02:00
Code Issues Releases Activity

fix: Improve PDF viewer cross-browser compatibility

Browse source 
Closes #1219
This commit is contained in:
Maksim Eltyshev 2025-07-02 18:26:03 +02:00
parent e58a9f5d21
commit f0680831c2
3 changed files with 48 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

25
client/src/components/attachments/Attachments/Item.jsx
View file

@ -16,6 +16,7 @@ import Encodings from '../../../constants/Encodings';
import { AttachmentTypes } from '../../../constants/Enums';
import ItemContent from './ItemContent';
import ContentViewer from './ContentViewer';
import PdfViewer from './PdfViewer';
import CsvViewer from './CsvViewer';
import styles from './Item.module.scss';
@ -40,10 +41,8 @@ const Item = React.memo(({ id, isVisible }) => {
switch (attachment.data.mimeType) {
case 'application/pdf':
content = (
// eslint-disable-next-line jsx-a11y/alt-text
<object
data={attachment.data.url}
type={attachment.data.mimeType}
<PdfViewer
src={attachment.data.url}
className={classNames(styles.content, styles.contentViewer)}
/>
);
@ -60,15 +59,6 @@ const Item = React.memo(({ id, isVisible }) => {
<audio controls src={attachment.data.url} className={styles.content} />
);
break;
case 'video/mp4':
case 'video/ogg':
case 'video/webm':
content = (
// eslint-disable-next-line jsx-a11y/media-has-caption
<video controls src={attachment.data.url} className={styles.content} />
);
break;
case 'text/csv':
content = (
@ -78,6 +68,15 @@ const Item = React.memo(({ id, isVisible }) => {
/>
);
break;
case 'video/mp4':
case 'video/ogg':
case 'video/webm':
content = (
// eslint-disable-next-line jsx-a11y/media-has-caption
<video controls src={attachment.data.url} className={styles.content} />
);
break;
default:
if (attachment.data.encoding === Encodings.UTF8) {

26
client/src/components/attachments/Attachments/PdfViewer.jsx Normal file
View file

@ -0,0 +1,26 @@
/*!
* Copyright (c) 2024 PLANKA Software GmbH
* Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
*/
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import styles from './PdfViewer.module.scss';
const PdfViewer = React.memo(({ src, className }) => (
// eslint-disable-next-line jsx-a11y/iframe-has-title
<iframe src={src} type="application/pdf" className={classNames(styles.wrapper, className)} />
));
PdfViewer.propTypes = {
src: PropTypes.string.isRequired,
className: PropTypes.string,
};
PdfViewer.defaultProps = {
className: undefined,
};
export default PdfViewer;

10
client/src/components/attachments/Attachments/PdfViewer.module.scss Normal file
View file

@ -0,0 +1,10 @@
/*!
* Copyright (c) 2024 PLANKA Software GmbH
* Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
*/
:global(#app) {
.wrapper {
border: 0;
}
}