Various requested fixes

demo.html

@@ -9,13 +9,18 @@
 <script crossorigin src="https://unpkg.com/openseadragon"></script>
 <script src="./dist/umd/@digirati/vam-viewer.js"></script>
 <link rel="stylesheet" href="./dist/assets/app.css" />
-<div id="test"></div>
+<div style="">
+  <div id="test"></div>
+</div>
 <script>
   console.log(OpenSeadragon);
   console.log(
     VAMViewer.createSlideShow(
       document.getElementById('test'),
-      'https://raw.githubusercontent.com/4d4mm/adam-digirati.github.io/master/balenciaga1-behaviors.json'
+      'https://raw.githubusercontent.com/4d4mm/adam-digirati.github.io/master/balenciaga1-behaviors.json',
+      true,
+      'white',
+      'test'
     )
   );
 </script>

src/ui-components/CanvasNavigation/CanvasNavigation.tsx

@@ -38,66 +38,41 @@ const CanvasNavigation: React.FC<CanvasNavigationProps> = ({
   const goToSlide = (index: number | string) => {
     index = index + '';
     if (addressable) {
-      const qParam = queryString.parse(window.location.hash);
-      if (
-        qParam.id &&
-        Array.isArray(qParam.id) &&
-        qParam.slideshow &&
-        Array.isArray(qParam.slideshow)
-      ) {
-        const indexOfQueryId = qParam.id.find(query => parseInt(query) === id);
-        if (indexOfQueryId) {
-          qParam.slideshow[parseInt(indexOfQueryId)] = currentIndex + '';
-          document.location.hash = queryString.stringify(qParam);
-        }
-      } else {
-        if (typeof qParam.id === 'string' && parseInt(qParam.id) !== id) {
-          document.location.hash =
-            document.location.hash + `&${buildId(currentIndex)}`;
-        } else {
-          document.location.hash = `#${buildId(currentIndex)}`;
-        }
+      const searchParams = new URLSearchParams(document.location.search);
+      const slideShowID = document.location.hash.slice(1);
+
+      if (!slideShowID || (id !== slideShowID)) {
+        history.pushState(null, '', `#${String(id)}`);
       }
+      searchParams.set('slide', index);
+      const newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + "?" + searchParams.toString() + window.location.hash;
+      history.pushState(null, '', newUrl);
     }
   };
 
-  const buildId = (index: number | string) => {
-    return `id=${id}&slideshow=${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)
-    ) {
-      const indexOfQueryId = qParam.id.find(
-        (query: string) => parseInt(query) === id
-      );
-      if (indexOfQueryId)
-        slideshow = qParam.slideshow[parseInt(indexOfQueryId)];
-      if (!slideshow || slideshow < 0 || slideshow >= canvasList.length)
-        slideshow = '0';
+    const searchParams = new URLSearchParams(window.location.search);
+    if (String(searchParams.get('slide')) !== "null") {
+      return parseInt(String(searchParams.get('slide')));
     } else {
-      slideshow = qParam.slideshow;
+      return 0;
     }
-    if (!slideshow) slideshow = '0';
-    return parseInt(slideshow);
   };
 
   useEffect(() => {
-    if (addressable && hash) {
-      if (typeof hash.slideshow === 'string') {
-        let slideId = hash.slideshow;
+    const searchParams = new URLSearchParams(document.location.search);
+    const hashToSlide = {
+        slide: String(searchParams.get('slide'))
+    };
+    if (addressable && hashToSlide) {
+      if (typeof hashToSlide.slide === 'string') {
+        let slideId = hashToSlide.slide;
         if (slideId) {
           parseInt(slideId);
         }
         let intSlideId = slideId ? parseInt(slideId) : 0;
         if (
-          !hash ||
+          !hashToSlide ||
           !intSlideId ||
           intSlideId < 0 ||
           intSlideId >= canvasList.length
@@ -114,7 +89,7 @@ const CanvasNavigation: React.FC<CanvasNavigationProps> = ({
   }, []);
 
   useEffect(() => {
-    goToSlide(getSlideByID());
+    goToSlide(currentIndex);
     document.addEventListener('keyup', handleKeyPress);
     return () => {
       document.removeEventListener('keyup', handleKeyPress);

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} />
           </>
         ) : (