+import OpenSeadragon from 'openseadragon';
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+const Viewer = () => {
+ const [viewer, setViewer] = React.useState(null);
+
+ const container = React.useRef();
+ const { t } = useTranslation();
+
+ React.useEffect(() => {
+ if (!container.current) return;
+
+ const v = OpenSeadragon({
+ element: container.current,
+ preserveViewport: true,
+ sequenceMode: true,
+ showNavigator: true,
+ showNavigationControl: false,
+ showSequenceControl: false,
+ //tileSources: [
+ // new OpenSeadragon.DziTileSource({
+ // width: 8192,
+ // height: 8192,
+ // tileSize: 256,
+ // tileOverlap: 0,
+ // minLevel: 8,
+ // maxLevel: 13,
+ // tilesUrl: '/media/alttp/map/lw_files/',
+ // fileFormat: 'png',
+ // }), new OpenSeadragon.DziTileSource({
+ // width: 8192,
+ // height: 8192,
+ // tileSize: 256,
+ // tileOverlap: 0,
+ // minLevel: 8,
+ // maxLevel: 13,
+ // tilesUrl: '/media/alttp/map/dw_files/',
+ // fileFormat: 'png',
+ // }), new OpenSeadragon.DziTileSource({
+ // width: 8192,
+ // height: 8192,
+ // tileSize: 256,
+ // tileOverlap: 0,
+ // minLevel: 8,
+ // maxLevel: 13,
+ // tilesUrl: '/media/alttp/map/sp_files/',
+ // fileFormat: 'png',
+ // }), new OpenSeadragon.DziTileSource({
+ // width: 16384,
+ // height: 16384,
+ // tileSize: 256,
+ // tileOverlap: 0,
+ // minLevel: 8,
+ // maxLevel: 14,
+ // tilesUrl: '/media/alttp/map/uw_files/',
+ // fileFormat: 'png',
+ // }),
+ //],
+ });
+ setViewer(v);
+ return () => {
+ v.destroy();
+ };
+ }, [container.current]);
+
+ const goToPage = React.useCallback((p) => {
+ if (viewer) viewer.goToPage(p);
+ }, [viewer]);
+
+ return <>
+ <div className="d-flex align-items-center justify-content-between">
+ <div className="button-bar">
+ <Button
+ onClick={() => goToPage(0)}
+ title={t('map.lwLong')}
+ variant="outline-secondary"
+ >
+ {t('map.lwShort')}
+ </Button>
+ <Button
+ onClick={() => goToPage(1)}
+ title={t('map.dwLong')}
+ variant="outline-secondary"
+ >
+ {t('map.dwShort')}
+ </Button>
+ <Button
+ onClick={() => goToPage(2)}
+ title={t('map.spLong')}
+ variant="outline-secondary"
+ >
+ {t('map.spShort')}
+ </Button>
+ <Button
+ onClick={() => goToPage(3)}
+ title={t('map.uwLong')}
+ variant="outline-secondary"
+ >
+ {t('map.uwShort')}
+ </Button>
+ </div>
+ </div>
+ <div ref={container} style={{ height: '80vh' }} />
+ </>;
+};
+
+export default Viewer;