Changing slide param names

package.json

@@ -22,8 +22,8 @@
     "@fesk/babel-config": "^1.3.0-next.2945936d",
     "@fesk/eslint-config-standard": "^1.2.2",
     "@fesk/scripts": "1.4.0-pr.b1c982eb",
-    "@storybook/react": "^5.3.10",
     "@storybook/addon-knobs": "^5.2.4",
+    "@storybook/react": "^5.3.10",
     "@types/enzyme": "^3.10.3",
     "@types/jest": "^24.0.9",
     "@types/react": "^16.9.9",
@@ -37,14 +37,13 @@
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-react-hooks": "^2.1.2",
     "jest": "^24.9.0",
+    "manifesto.js": "^4.0.0",
     "react": "16.13.1",
     "react-dom": "16.13.1",
-
     "react-swipeable": "^5.5.1",
     "react-test-renderer": "^16.10.2",
     "sass-loader": "^8.0.0",
     "ts-jest": "^24.1.0",
-    "manifesto.js": "^4.0.0",
     "typescript": "^3.6.3"
   },
   "fesk": {
@@ -58,16 +57,17 @@
     }
   },
   "peerDependencies": {
+    "manifesto": ">= 4.1",
     "react": ">= 16.8",
-    "react-dom": ">= 16.8",
-    "manifesto": ">= 4.1"
+    "react-dom": ">= 16.8"
   },
   "dependencies": {
-    "canvas-panel-beta": "2.0.6",
     "@reach/router": "^1.3.3",
     "bezier-easing": "^2.1.0",
+    "canvas-panel-beta": "2.0.6",
     "query-string": "^6.11.1",
     "react-flip-move": "^3.0.2",
-    "react-swipeable": "^5.5.1"
+    "react-swipeable": "^5.5.1",
+    "style-loader": "^2.0.0"
   }
 }

src/ui-components/CanvasNavigation/CanvasNavigation.tsx

@@ -40,18 +40,18 @@ const CanvasNavigation: React.FC<CanvasNavigationProps> = ({
     if (addressable) {
       const qParam = queryString.parse(window.location.hash);
       if (
-        qParam.id &&
-        Array.isArray(qParam.id) &&
         qParam.slideshow &&
-        Array.isArray(qParam.slideshow)
+        Array.isArray(qParam.slideshow) &&
+        qParam.slide &&
+        Array.isArray(qParam.slide)
       ) {
-        const indexOfQueryId = qParam.id.find(query => parseInt(query) === id);
+        const indexOfQueryId = qParam.slideshow.find(query => parseInt(query) === id);
         if (indexOfQueryId) {
-          qParam.slideshow[parseInt(indexOfQueryId)] = currentIndex + '';
+          qParam.slide[parseInt(indexOfQueryId)] = currentIndex + '';
           document.location.hash = queryString.stringify(qParam);
         }
       } else {
-        if (typeof qParam.id === 'string' && parseInt(qParam.id) !== id) {
+        if (typeof qParam.slideshow === 'string' && parseInt(qParam.slideshow) !== id) {
           document.location.hash =
             document.location.hash + `&${buildId(currentIndex)}`;
         } else {
@@ -62,36 +62,36 @@ const CanvasNavigation: React.FC<CanvasNavigationProps> = ({
   };
 
   const buildId = (index: number | string) => {
-    return `id=${id}&slideshow=${index}`;
+    return `slideshow=${id}&slide=${index}`;
   };
 
   const getSlideByID = () => {
     const qParam = queryString.parse(window.location.hash);
     let slideshow: any;
     if (
-      qParam.id &&
-      Array.isArray(qParam.id) &&
       qParam.slideshow &&
-      Array.isArray(qParam.slideshow)
+      Array.isArray(qParam.slideshow) &&
+      qParam.slide &&
+      Array.isArray(qParam.slide)
     ) {
-      const indexOfQueryId = qParam.id.find(
+      const indexOfQueryId = qParam.slideshow.find(
         (query: string) => parseInt(query) === id
       );
       if (indexOfQueryId)
-        slideshow = qParam.slideshow[parseInt(indexOfQueryId)];
+        slideshow = qParam.slide[parseInt(indexOfQueryId)];
       if (!slideshow || slideshow < 0 || slideshow >= canvasList.length)
         slideshow = '0';
     } else {
-      slideshow = qParam.slideshow;
+      slideshow = qParam.slide;
     }
     if (!slideshow) slideshow = '0';
     return parseInt(slideshow);
   };
 
   useEffect(() => {
     if (addressable && hash) {
-      if (typeof hash.slideshow === 'string') {
-        let slideId = hash.slideshow;
+      if (typeof hash.slide === 'string') {
+        let slideId = hash.slide;
         if (slideId) {
           parseInt(slideId);
         }

src/ui-components/IFrameYouTube/IFrameYouTube.tsx

@@ -26,6 +26,7 @@ export const IFrameYouTube: React.FC<IFrameYouTubeProps> = ({
       onDragStart();
     }
   };
+
   return (
     <div
       style={{
@@ -41,7 +42,7 @@ export const IFrameYouTube: React.FC<IFrameYouTubeProps> = ({
       <iframe
         width="100%"
         height="60%"
-        src={`${url}`}
+        src={`http://www.youtube.com/embed/${new URL(url).searchParams.get('v')}`}
         frameBorder="0"
         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
         allowFullScreen

src/ui-components/Slide/Slide.tsx

@@ -72,7 +72,7 @@ const Slide: React.FC<SlideProps> = ({
   return (
     <div
       className={bem.modifiers(
-        behaviors.reduce((acc: any, next: any) => {
+        behaviors.filter((b:any) => b !== 'embedded-tour').reduce((acc: any, next: any) => {
           acc[next] = true;
           return acc;
         }, {})
@@ -103,33 +103,39 @@ const Slide: React.FC<SlideProps> = ({
           {(
             // @ts-ignore
             { label, body, attributionLabel, attribution }
-          ) =>
-            mobile ? (
-              <>
-                {open ? renderInfoPanel(label, attribution, body) : <></>}
-                <InfoButton bem={bem} onClick={setOpen} />
-              </>
-            ) : (
-              <div
-                className={bem
-                  .element('overlay')
-                  .modifiers({ isMobile: mobile })}
-              >
-                <div className={bem.element('overlay-content')}>
-                  {label ? (
-                    <h3 className={bem.element('title')}>{label}</h3>
-                  ) : null}
-                  {body ? <p className={bem.element('text')}>{body}</p> : null}
+          ) => {
+            return (
+              mobile ? (
+                <>
+                  {open ? renderInfoPanel(label, attribution, body) : <></>}
+                  <InfoButton bem={bem} onClick={setOpen} />
+                </>
+              ) : (
+                <div
+                  className={bem
+                    .element('overlay')
+                    .modifiers({ isMobile: mobile })}
+                >
+                  {
+                    (label || body) &&
+                    (<div className={bem.element('overlay-content')}>
+                      {label ? (
+                        <h3 className={bem.element('title')}>{label}</h3>
+                      ) : null}
+                      {body ? <p className={bem.element('text')}>{body}</p> : null}
+                    </div>)
+                  }
+                  <div className={bem.element('overlay-floating')}>
+                    <p className={bem.element('required-statement')}>
+                      {attributionLabel}
+                      {attribution}
+                    </p>
+                  </div>
                 </div>
-                <div className={bem.element('overlay-floating')}>
-                  <p className={bem.element('required-statement')}>
-                    {attributionLabel}
-                    {attribution}
-                  </p>
-                </div>
-              </div>
+              )
             )
-          }
+
+          }}
         </CanvasDetail>
       )}
     </div>

src/ui-components/Slideshow/SlideShow.tsx

@@ -39,6 +39,7 @@ const SlideShow: React.FC<SlideShowProps> = ({
   renderPanel,
   bem,
 }) => {
+
   const [innerWidth, setInnerWidth] = useState(0);
   const [qualifiesForMobile, setQualifiesForMobile] = useState(false);
   const [isMobileFullScreen, setIsMobileFullScreen] = useState(false);
@@ -100,13 +101,21 @@ const SlideShow: React.FC<SlideShowProps> = ({
                           isMobileFullScreen={isMobileFullScreen}
                           addressable={addressable}
                           id={id}
+                          // @ts-ignore
                           manifest={manifest}
+                          // @ts-ignore
                           previousRange={previousRange}
+                          // @ts-ignore
                           nextRange={nextRange}
+                          // @ts-ignore
                           fullscreenProps={fullscreenProps}
+                          // @ts-ignore
                           exitFullscreen={setIsMobileFullScreen}
+                          // @ts-ignore
                           canvas={canvas}
+                          // @ts-ignore
                           manifestUri={manifestUri}
+                          // @ts-ignore
                           {...rangeProps}
                         />
                       ) : (

src/ui-components/SwappableViewer/SwappableViewer.tsx

@@ -98,6 +98,7 @@ const SwappableViewer: React.FC<SwappableViewerProps> = ({
     const describers = getEmbeddedAnnotations(canvas).filter(
       (object: any) => object.motivation === 'describing'
     );
+
     setEmbeddedTour(
       (canvas &&
         canvas.__jsonld &&
@@ -136,17 +137,20 @@ const SwappableViewer: React.FC<SwappableViewerProps> = ({
     // }
   };
 
+  const describers = getEmbeddedAnnotations(canvas).filter(
+    (object: any) => object.motivation === 'describing'
+  );
+
   return (
     <>
-      <FullscreenButton {...fullscreenProps} />
       <div
         className={bem
           .element('viewport')
           .modifiers({ interactive: isInteractive || !isZoomedOut })}
       >
+        <FullscreenButton {...fullscreenProps} />
         {embeddedTour ? (
           <>
-            <FullscreenButton {...fullscreenProps} />
             <PatchworkEmbed canvas={canvas} fitContainer={true} {...props} />
           </>
         ) : (