// (c) Copyright Ascensio System SIA 2009-2024 // // This program is a free software product. // You can redistribute it and/or modify it under the terms // of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software // Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended // to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of // any third-party rights. // // This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty // of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see // the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html // // You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021. // // The interactive user interfaces in modified source and object code versions of the Program must // display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3. // // Pursuant to Section 7(b) of the License you must retain the original Product logo when // distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under // trademark law for use of our trademarks. // // All the Product's GUI elements, including illustrations and icon sets, as well as technical writing // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode import { useState } from "react"; import { Meta, StoryObj } from "@storybook/react"; import { useTranslation } from "react-i18next"; import { DeviceType } from "../../enums"; import type { TFile } from "../../api/files/types"; import { iconSize24, iconSize96 } from "../../utils/image-helpers"; import i18nextStoryDecorator from "../../.storybook/decorators/i18nextStoryDecorator"; import { Portal } from "../portal"; import { Button } from "../button"; import MediaViewer from "./MediaViewer"; import type { MediaViewerProps, PlaylistType } from "./MediaViewer.types"; type MediaViewerType = typeof MediaViewer; type Story = StoryObj; const meta = { title: "Components/MediaViewer", component: MediaViewer, parameters: {}, decorators: [i18nextStoryDecorator], } satisfies Meta; export default meta; const DefaultTemplate = (props: MediaViewerProps) => { const { onClose, files, nextMedia, prevMedia } = props; const { t } = useTranslation(); const [visible, setVisible] = useState(false); const [playlistPos, setPlaylistPos] = useState(0); const openMediaViewer = () => setVisible(true); const onCloseMediaViewer = () => { onClose?.(); setVisible(false); setPlaylistPos(0); }; const playlist: PlaylistType[] = files.map((file, index) => ({ id: index, fileId: file.id, src: file.viewUrl, title: file.title, fileExst: file.fileExst, fileStatus: file.fileStatus, canShare: file.canShare, version: file.version, thumbnailUrl: "", })); const onNextMedia = () => { const nextPlaylistPos = (playlistPos + 1) % playlist.length; if (nextPlaylistPos !== 0) setPlaylistPos(nextPlaylistPos); nextMedia?.(); }; const onPrevMedia = () => { const nextPlaylistPos = playlistPos - 1; if (nextPlaylistPos !== -1) setPlaylistPos(nextPlaylistPos); prevMedia?.(); }; const getIconUrl = (size: number, extension: string) => { const extensions: Record = { ".mp4": "mp4.svg", ".png": "png.svg", ".jpg": "jpg.svg", ".mp3": "sound.svg", }; const icons: Record> = { 24: iconSize24, 96: iconSize96, }; const result = icons[size]?.get(extensions[extension]); return result; }; const getIconStory = (size: number, ext: string) => { return getIconUrl(size, ext) ?? ""; }; return ( <>