QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-19 08:04:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

simplifying/clarifying youtube video code/datastructures (#10882)

Browse Source 
* simplifying/clarifying youtube video code/datastructures

* adding role to clickable div
This commit is contained in:
Evan Rusackas
2020-09-16 09:57:04 -07:00
committed by GitHub
parent 87fc425be9
commit d4ee073bfe
1 changed files with 22 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
docs/src/pages/resources.tsx
View File

@@ -54,31 +54,20 @@ const installationLinks = [
], ],
]; ];
const youtubeRefs = [ const youtubeVideos = [
'https://www.youtube.com/embed/24XDOkGJrEY',
'https://www.youtube.com/embed/AqousXQ7YHw',
'https://www.youtube.com/embed/JGeIHrQYhIs',
'https://www.youtube.com/embed/z350Gbi463I',
];
const youtubeIds = [
[ [
0,
'24XDOkGJrEY', '24XDOkGJrEY',
'The history and anatomy of Apache Superset', 'The history and anatomy of Apache Superset',
], ],
[ [
1,
'AqousXQ7YHw', 'AqousXQ7YHw',
'Apache Superset for visualization and for data science', 'Apache Superset for visualization and for data science',
], ],
[ [
2,
'JGeIHrQYhIs', 'JGeIHrQYhIs',
'Apache Superset- Interactive Multi Tab Multiple Dashboards Samples', 'Apache Superset- Interactive Multi Tab Multiple Dashboards Samples',
], ],
[ [
3,
'z350Gbi463I', 'z350Gbi463I',
'Apache Superset - Interactive Sales Dashboard (Demo 1)', 'Apache Superset - Interactive Sales Dashboard (Demo 1)',
], ],
@@ -104,7 +93,7 @@ const resourcesContainer = css`
interface featureProps { interface featureProps {
title: string, title: string,
descr: Array, links: string[][],
} }
const LinkSection = ({ title, links }: featureProps) => ( const LinkSection = ({ title, links }: featureProps) => (
<div className="link-section"> <div className="link-section">
@@ -126,11 +115,11 @@ const LinkSection = ({ title, links }: featureProps) => (
const Resources = () => { const Resources = () => {
const [showModal, setModal] = useState(false); const [showModal, setModal] = useState(false);
const [url, setUrl] = useState(null); const [videoId, setVideoId] = useState(null);
const [cardTitle, setCardTitle] = useState(null); const [cardTitle, setCardTitle] = useState(null);
const handleClose = () => { const handleClose = () => {
setModal(false); setModal(false);
setUrl(null); setVideoId(null);
setCardTitle(null); setCardTitle(null);
}; };
return ( return (
@@ -178,7 +167,7 @@ const Resources = () => {
<iframe <iframe
width="560" width="560"
height="315" height="315"
src={youtubeRefs[url]} src={`https://www.youtube.com/embed/${(youtubeVideos[videoId] && youtubeVideos[videoId][0])}`}
frameBorder="0" frameBorder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen allowFullScreen
@@ -186,20 +175,23 @@ const Resources = () => {
</Modal> </Modal>
<h2>Videos</h2> <h2>Videos</h2>
<Card> <Card>
{youtubeIds.map(([idx, ids, title]) => ( {youtubeVideos.map(([id, title], idx) => (
<Card.Grid <Card.Grid>
onClick={() => { <div
setModal(true); role="button"
setUrl(idx); onClick={() => {
setCardTitle(title); setModal(true);
}} setVideoId(idx);
> setCardTitle(title);
<h4>{title}</h4> }}
<img >
width="100%" <h4>{title}</h4>
alt="youtube vid" <img
src={`http://img.youtube.com/vi/${ids}/maxresdefault.jpg`} width="100%"
/> alt="youtube vid"
src={`http://img.youtube.com/vi/${id}/maxresdefault.jpg`}
/>
</div>
</Card.Grid> </Card.Grid>
))} ))}
</Card> </Card>