fix: save

src/App.jsx

@@ -36,10 +36,11 @@ ScrollTrigger.config({
 
 let resizeTimer = null;
 
+const defaultDebug = localStorage.getItem("debug") === "true" ? true : false;
 function App() {
   const container = useRef();
   const { debug } = useControls({
-    debug: false,
+    debug: defaultDebug,
   });
   const handlerResize = () => {
     clearTimeout(resizeTimer);
@@ -74,11 +75,13 @@ function App() {
     handlerResize();
     document.documentElement.style.overflow = "auto";
     var vConsole = new window.VConsole();
+
     if (debug) {
       vConsole.showSwitch();
     } else {
       vConsole.hideSwitch();
     }
+    localStorage.setItem("debug", debug);
   });
   const props = {
     // scrollSpeed: scrollSpeed,

src/components/Viewer.jsx

@@ -47,9 +47,9 @@ Viewer.propTypes = {
 };
 
 class ViewerInner extends Component {
-  constructor() {
+  constructor(props) {
     super();
-    console.log("hello constructor");
+
     //ref
     this.containerRef = createRef(null);
     this.viewerRef = createRef(null);
@@ -84,10 +84,12 @@ class ViewerInner extends Component {
     this.lastProgress = false;
     this.isBelow = true;
     this.isAbove = false;
+
+    props.debug && console.log("init ", props.name);
   }
   static propTypes = Viewer.propTypes;
   componentWillUnmount() {
-    console.error("remove-timeline");
+    this.props.debug && console.warn("remove-timeline");
     if (this.timeline) {
       this.timeline.kill(true);
     }
@@ -136,6 +138,21 @@ class ViewerInner extends Component {
       }
     }
     this.sequence.push(img);
+    img.onerror = () => {
+      var timeStamp = Math.floor(Date.now() * Math.random())
+        .toString()
+        .substring(0, 8);
+      img.retried < 2
+        ? setTimeout(() => {
+            img.src = img.ogSrc + "?" + timeStamp;
+          }, 80)
+        : img.retried < 3 &&
+          setTimeout(() => {
+            img.src = img.ogSrc.slice(0, -4) + ".jpg?" + timeStamp;
+          }, 80),
+        img.retried++;
+      this.props.debug && console.log("img.retried", img.retried);
+    };
 
     img.onload = () => {
       index === 1 && this.renderImageToCanvas(0);
@@ -146,8 +163,10 @@ class ViewerInner extends Component {
       ) {
         this.poolNewFrames(index - 1);
       }
-      // var t = 100 - (this.frame / this.fullFrameCount) * 100 + "%";
-      // this.loadingProgress.current.style.width
+      var t = 100 - (this.frame / this.fullFrameCount) * 100 + "%";
+      if (this.preProcessingRef.current) {
+        this.preProcessingRef.current.style.width = t;
+      }
       this.loadedCount += 1;
       if (this.loadedCount === parseFloat(this.props.frameCount) - 1) {
         this.loadingComplete();

src/view/Closing.jsx

@@ -33,7 +33,7 @@ export default function Closing() {
           <div
             
             css={css`
-              font-size: 25px;
+              font-size: 24px;
               width: 225px;
               margin: 0 auto;
             `}