Skip to content

Commit

Permalink
Don't include 2nd bundled copy of css on demo page. Resolves #487 of …
Browse files Browse the repository at this point in the history 
…samvera-labs/ramp
  • Loading branch information
@patrick-lienau
patrick-lienau committed May 1, 2024
1 parent 56c0bc4 commit a6e96ab
Showing 1 changed file with 174 additions and 173 deletions.
347 changes: 174 additions & 173 deletions demo/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import React from 'react';

import 'video.js/dist/video-js.css'; // must be at top so it can be overridden

import IIIFPlayer from '@Components/IIIFPlayer/IIIFPlayer';
import MediaPlayer from '@Components/MediaPlayer/MediaPlayer';
import StructuredNavigation from '@Components/StructuredNavigation/StructuredNavigation';
Expand All @@ -8,195 +11,193 @@ import SupplementalFiles from '@Components/SupplementalFiles/SupplementalFiles';
import AutoAdvanceToggle from '@Components/AutoAdvanceToggle/AutoAdvanceToggle';
import MarkersDisplay from '@Components/MarkersDisplay/MarkersDisplay';
import './app.scss';
import 'video.js/dist/video-js.css';
import '../dist/ramp.css';

const App = ({ manifestURL }) => {
const [userURL, setUserURL] = React.useState(manifestURL);
const [manifestUrl, setManifestUrl] = React.useState(manifestURL);

const tabValues = [
{ title: 'Details', ref: React.useRef(null) },
{ title: 'Transcripts', ref: React.useRef(null) },
{ title: 'Files', ref: React.useRef(null) },
{ title: 'Markers', ref: React.useRef(null) },
];

React.useEffect(() => {
setManifestUrl(manifestUrl);
}, [manifestUrl]);

const handleSubmit = (e) => {
e.preventDefault();
setManifestUrl(userURL);
};

const handleUserInput = (e) => {
setManifestUrl();
setUserURL(e.target.value);
};

return (
<div className='ramp-demo'>
<div className='ramp--details'>
<h1>Ramp</h1>
<p>An interactive, IIIF powered A/V player built with components
from <a href="https://www.npmjs.com/package/@samvera/ramp"
target="_blank">
@samvera/ramp
</a> library. This player supports <em>IIIF Presentation 3.0 Manifests</em>. Please enter the URL
of your <em>public</em> manifest to view it in the player.
</p>
<div className='ramp--form_container'>
<form onSubmit={handleSubmit}>
<div className='row'>
<div className='col-1'>
<label htmlFor="manifesturl" className="ramp-demo__manifest-input-label">Manifest URL</label>
</div>
<div className='col-2'>
<input type='url'
id='manifesturl'
name='manifesturl'
value={userURL}
onChange={handleUserInput}
placeholder='Manifest URL'
className="ramp-demo__manifest-input" />
<input type='submit' value='Set Manifest' className="ramp-demo__manifest-submit" />
</div>
const [userURL, setUserURL] = React.useState(manifestURL);
const [manifestUrl, setManifestUrl] = React.useState(manifestURL);

const tabValues = [
{ title: 'Details', ref: React.useRef(null) },
{ title: 'Transcripts', ref: React.useRef(null) },
{ title: 'Files', ref: React.useRef(null) },
{ title: 'Markers', ref: React.useRef(null) },
];

React.useEffect(() => {
setManifestUrl(manifestUrl);
}, [manifestUrl]);

const handleSubmit = (e) => {
e.preventDefault();
setManifestUrl(userURL);
};

const handleUserInput = (e) => {
setManifestUrl();
setUserURL(e.target.value);
};

return (
<div className='ramp-demo'>
<div className='ramp--details'>
<h1>Ramp</h1>
<p>An interactive, IIIF powered A/V player built with components
from <a href="https://www.npmjs.com/package/@samvera/ramp"
target="_blank">
@samvera/ramp
</a> library. This player supports <em>IIIF Presentation 3.0 Manifests</em>. Please enter the URL
of your <em>public</em> manifest to view it in the player.
</p>
<div className='ramp--form_container'>
<form onSubmit={handleSubmit}>
<div className='row'>
<div className='col-1'>
<label htmlFor="manifesturl" className="ramp-demo__manifest-input-label">Manifest URL</label>
</div>
<div className='col-2'>
<input type='url'
id='manifesturl'
name='manifesturl'
value={userURL}
onChange={handleUserInput}
placeholder='Manifest URL'
className="ramp-demo__manifest-input" />
<input type='submit' value='Set Manifest' className="ramp-demo__manifest-submit" />
</div>
</div>
</form>
</div>
</div>
</form>
</div>
</div>
<div className='ramp--player_container'>
<IIIFPlayer
manifestUrl={manifestUrl}
>
<div className="iiif-player-demo">
<MediaPlayer enableFileDownload={true} />
<div className="components-row">
<div className="nav">
<AutoAdvanceToggle />
<StructuredNavigation />
</div>
<Tabs tabValues={tabValues} manifestUrl={manifestUrl} />
<div className='ramp--player_container'>
<IIIFPlayer
manifestUrl={manifestUrl}
>
<div className="iiif-player-demo">
<MediaPlayer enableFileDownload={true} />
<div className="components-row">
<div className="nav">
<AutoAdvanceToggle />
<StructuredNavigation />
</div>
<Tabs tabValues={tabValues} manifestUrl={manifestUrl} />
</div>
</div>
</IIIFPlayer>
</div>
</div>
</IIIFPlayer>
</div>
</div>
);
</div>
);
};


/*Reference: https://accessible-react.eevis.codes/components/tabs */
const Tabs = ({ tabValues, manifestUrl }) => {
const [activeTab, setActiveTab] = React.useState(0);

let tabs = [];

const handleClick = (index) => {
setActiveTab(index);
};

const handleNextTab = (firstTabInRound, nextTab, lastTabInRound) => {
const tabToSelect =
activeTab === lastTabInRound ? firstTabInRound : nextTab;
setActiveTab(tabToSelect);
tabValues[tabToSelect].ref.current.focus();
};

const handleKeyPress = (event) => {
const tabCount = Object.keys(tabValues).length - 1;

if (event.key === "ArrowLeft") {
const last = tabCount;
const next = activeTab - 1;
handleNextTab(last, next, 0);
}
if (event.key === "ArrowRight") {
const first = 0;
const next = activeTab + 1;
handleNextTab(first, next, tabCount);
}
};

tabValues.map((t, index) => {
tabs.push(
<Tab
key={index}
id={t.title.toLowerCase()}
tabPanelId={`${t.title.toLowerCase()}Tab`}
index={index}
handleChange={handleClick}
activeTab={activeTab}
title={t.title}
tabRef={t.ref}
/>
const [activeTab, setActiveTab] = React.useState(0);

let tabs = [];

const handleClick = (index) => {
setActiveTab(index);
};

const handleNextTab = (firstTabInRound, nextTab, lastTabInRound) => {
const tabToSelect =
activeTab === lastTabInRound ? firstTabInRound : nextTab;
setActiveTab(tabToSelect);
tabValues[tabToSelect].ref.current.focus();
};

const handleKeyPress = (event) => {
const tabCount = Object.keys(tabValues).length - 1;

if (event.key === "ArrowLeft") {
const last = tabCount;
const next = activeTab - 1;
handleNextTab(last, next, 0);
}
if (event.key === "ArrowRight") {
const first = 0;
const next = activeTab + 1;
handleNextTab(first, next, tabCount);
}
};

tabValues.map((t, index) => {
tabs.push(
<Tab
key={index}
id={t.title.toLowerCase()}
tabPanelId={`${t.title.toLowerCase()}Tab`}
index={index}
handleChange={handleClick}
activeTab={activeTab}
title={t.title}
tabRef={t.ref}
/>
);
});

return (
<section className="tabs-wrapper">
<div className="switcher">
<ul
role="tablist"
className="tablist switcher"
aria-label="more Ramp components in tabs"
onKeyDown={handleKeyPress}>
{tabs}
</ul>
</div>
<TabPanel id="detailsTab" tabId="details" tabIndex={0} activeTab={activeTab}>
<MetadataDisplay showHeading={false} />
</TabPanel>
<TabPanel id="transcriptsTab" tabId="transcripts" tabIndex={1} activeTab={activeTab}>
<Transcript
playerID="iiif-media-player"
manifestUrl={manifestUrl}
/>
</TabPanel>
<TabPanel id="filesTab" tabId="files" tabIndex={2} activeTab={activeTab}>
<SupplementalFiles showHeading={false} />
</TabPanel>
<TabPanel id="markersTab" tabId="markers" tabIndex={3} activeTab={activeTab}>
<MarkersDisplay showHeading={false} />
</TabPanel>
</section>
);
});

return (
<section className="tabs-wrapper">
<div className="switcher">
<ul
role="tablist"
className="tablist switcher"
aria-label="more Ramp components in tabs"
onKeyDown={handleKeyPress}>
{tabs}
</ul>
</div>
<TabPanel id="detailsTab" tabId="details" tabIndex={0} activeTab={activeTab}>
<MetadataDisplay showHeading={false} />
</TabPanel>
<TabPanel id="transcriptsTab" tabId="transcripts" tabIndex={1} activeTab={activeTab}>
<Transcript
playerID="iiif-media-player"
manifestUrl={manifestUrl}
/>
</TabPanel>
<TabPanel id="filesTab" tabId="files" tabIndex={2} activeTab={activeTab}>
<SupplementalFiles showHeading={false} />
</TabPanel>
<TabPanel id="markersTab" tabId="markers" tabIndex={3} activeTab={activeTab}>
<MarkersDisplay showHeading={false} />
</TabPanel>
</section>
);
};

const Tab = ({ id, tabPanelId, index, handleChange, activeTab, title, tabRef }) => {
const handleClick = () => { handleChange(index); };
return (
<li role="presentation">
<button
role="tab"
id={id}
aria-selected={activeTab === index}
aria-controls={tabPanelId}
onClick={handleClick}
tabIndex={activeTab === index ? 0 : -1}
ref={tabRef}
>
{title}
</button>
</li>
);
const handleClick = () => { handleChange(index); };
return (
<li role="presentation">
<button
role="tab"
id={id}
aria-selected={activeTab === index}
aria-controls={tabPanelId}
onClick={handleClick}
tabIndex={activeTab === index ? 0 : -1}
ref={tabRef}
>
{title}
</button>
</li>
);
};

const TabPanel = ({ id, tabId, activeTab, tabIndex, children }) => {
return (
<section
role="tabpanel"
id={id}
aria-labelledby={tabId}
hidden={activeTab !== tabIndex}
tabIndex={0}
className="tabpanel"
>
{children}
</section>
);
return (
<section
role="tabpanel"
id={id}
aria-labelledby={tabId}
hidden={activeTab !== tabIndex}
tabIndex={0}
className="tabpanel"
>
{children}
</section>
);
};

export default App;

0 comments on commit a6e96ab

Please sign in to comment.