getty-show/c1.js

const no = (function (e) {
  $i(a, e);
  var t,
    n,
    r =
      ((t = a),
      (n = (function () {
        if ("undefined" == typeof Reflect || !Reflect.construct) return !1;
        if (Reflect.construct.sham) return !1;
        if ("function" == typeof Proxy) return !0;
        try {
          return (
            Boolean.prototype.valueOf.call(
              Reflect.construct(Boolean, [], function () {})
            ),
            !0
          );
        } catch (e) {
          return !1;
        }
      })()),
      function () {
        var e,
          r = Zi(t);
        if (n) {
          var a = Zi(this).constructor;
          e = Reflect.construct(r, arguments, a);
        } else e = r.apply(this, arguments);
        return Ki(this, e);
      });
  function a(e) {
    var t;
    if (
      (Gi(this, a),
      ((t = r.call(this, e)).format = ".jpg"),
      document.body.classList.contains("webp-supported") &&
        (t.format = ".webp"),
      document.body.classList.contains("avif-supported") &&
        (t.format = ".avif"),
      (t.containerRef = (0, i.createRef)(null)),
      (t.viewerRef = (0, i.createRef)(null)),
      (t.viewerOffsetRef = (0, i.createRef)(null)),
      (t.canvasRef = (0, i.createRef)(null)),
      (t.loadingWrap = (0, i.createRef)(null)),
      (t.loadingProgress = (0, i.createRef)(null)),
      (t.playHead = (0, i.createRef)(null)),
      (t.playHeadProgress = (0, i.createRef)(null)),
      (t.context = !1),
      (t.width = 1552),
      (t.height = 873),
      t.props.canvasSize)
    ) {
      var n = c(t.props.canvasSize, 2);
      (t.width = n[0]), (t.height = n[1]);
    }
    return (
      (t.lastFrame = -1),
      (t.floatFrame = 0),
      (t.frame = t.props.startFrame || 0),
      (t.fullFrameCount = t.props.frameCount),
      (t.loadedCount = 0),
      (t.loadComplete = !1),
      (t.sequence = []),
      (t.loadedRenderPool = []),
      (t.loadedRenderTimeout = null),
      (t.poolAnimateDelay = 40),
      (t.timeline = !1),
      (t.progress = 0),
      t.props.pause &&
        Object.keys(t.props.pause).forEach(function (e) {
          t.fullFrameCount += t.props.pause[e];
        }),
      (t.enterTimeline = !1),
      (t.exitTimeline = !1),
      (t.notLoadedTween = {
        isActive: !1,
      }),
      (t.isAbove = !1),
      (t.isBelow = !0),
      (t.lastProgress = !1),
      (t.justScrolled = !1),
      t
    );
  }
  return (
    Yi(a, [
      {
        key: "componentDidMount",
        value: function () {
          this.loadAssets(),
            this.canvasRef.current && this.initializeContext(),
            !this.enterTimeline &&
              this.props.enterTween &&
              this.initializeEnterTween(),
            this.timeline || (this.initializeTimeline(), this.setTimeline()),
            !this.exitTimeline &&
              this.props.exitTween &&
              this.initializeExitTween(),
            Ci.refresh();
        },
      },
      {
        key: "getImagePath",
        value: function (e) {
          return (
            "https://static.getty.edu/mesopotamia/" +
            this.props.path +
            "/" +
            "".concat(e.toString().padStart(4, "0")) +
            this.format
          );
        },
      },
      {
        key: "loadAssets",
        value: function () {
          var e = this;
          this.loadImage(1),
            setTimeout(function () {
              for (var t = 2; t <= e.props.frameCount; t += 1) e.loadImage(t);
            }, 60);
        },
      },
      {
        key: "loadImage",
        value: function (e) {
          var t = this,
            n = new Image();
          if (
            ((n.retried = 0),
            (n.src = this.getImagePath(e)),
            (n.ogSrc = n.src),
            this.props.pause && e + "" in this.props.pause)
          )
            for (var r = this.props.pause[e]; r--; ) this.sequence.push(n);
          this.sequence.push(n),
            (n.onerror = function () {
              var e = Math.floor(Date.now() * Math.random())
                .toString()
                .substring(0, 8);
              n.retried < 2
                ? setTimeout(function () {
                    n.src = n.ogSrc + "?" + e;
                  }, 80)
                : n.retried < 3 &&
                  setTimeout(function () {
                    n.src = n.ogSrc.slice(0, -4) + ".jpg?" + e;
                  }, 80),
                n.retried++;
            }),
            (n.onload = function () {
              1 === e && t.renderImageToCanvas(0),
                t.frame > e &&
                  t.timeline.scrollTrigger.isActive &&
                  t.poolNewFrames(e - 1),
                (t.loadedCount += 1),
                (t.loadingProgress.current.style.width =
                  (t.loadedCount / (parseFloat(t.props.frameCount) - 1)) * 100 +
                  "%"),
                t.loadedCount === parseFloat(t.props.frameCount) - 1 &&
                  t.loadingComplete();
            });
        },
      },
      {
        key: "loadingComplete",
        value: function () {
          console.log(this.props.path, "loading complete"),
            (this.loadComplete = !0),
            this.isAbove && this.renderImageToCanvas(this.loadedCount - 1);
        },
      },
      {
        key: "poolNewFrames",
        value: function (e) {
          this.loadedRenderPool.unshift(e),
            this.loadedRenderPool.sort(function (e, t) {
              return t - e;
            }),
            this.animatePool();
        },
      },
      {
        key: "animatePool",
        value: function () {
          var e = this;
          !this.loadedRenderTimeout &&
            this.loadedRenderPool.length &&
            (this.loadedRenderTimeout = setTimeout(function () {
              e.loadedRenderTimeout = !1;
              var t = e.loadedRenderPool[e.loadedRenderPool.length - 1];
              if (t <= e.frame) {
                var n = e.loadedRenderPool.pop();
                e.renderImageToCanvas(n), e.animatePool();
              }
              e.frame < t && (e.loadedRenderPool = []);
            }, this.poolAnimateDelay));
        },
      },
      {
        key: "componentWillUnmount",
        value: function () {
          this.timeline && this.timeline.kill(!0);
        },
      },
      {
        key: "initializeContext",
        value: function () {
          (this.context = this.canvasRef.current.getContext("2d", {
            alpha: !1,
            desynchronized: !0,
            powerPreference: "high-performance",
          })),
            (this.context.imageSmoothingEnabled = !0),
            (this.context.imageSmoothingQuality = "high");
        },
      },
      {
        key: "initializeTimeline",
        value: function () {
          var e = this,
            t = null,
            n = function () {
              ra.to(e.loadingWrap.current, {
                autoAlpha: 1,
              });
            },
            r = function () {
              ra.to(e.loadingWrap.current, {
                autoAlpha: 0,
              });
            };
          r(),
            (this.timeline = ra.timeline({
              scrollTrigger: {
                trigger: this.containerRef.current,
                pin: this.viewerRef.current,
                scrub: 0.66,
                start: "top top",
                end: "bottom bottom",
                ease: "none",
                markers: this.props.debug && false,
                onUpdate: function (n) {
                  e.props.debug,
                    !1 === e.lastProgress && (e.lastProgress = n.progress),
                    e.lastProgress !== n.progress &&
                      ((e.justScrolled = !0),
                      clearTimeout(t),
                      (t = setTimeout(function () {
                        e.frame > e.loadedCount &&
                          !e.notLoadedTween.isActive &&
                          (e.notLoadedTween = ra.to(e.loadingWrap.current, {
                            backgroundColor: "#8888a0",
                            duration: 0.33,
                            repeat: 1,
                            yoyo: !0,
                          }));
                      }, 100)),
                      (e.lastProgress = n.progress));
                },
                onScrubComplete: function () {
                  e.justScrolled = !1;
                },
                onEnter: function () {
                  n(), (e.isAbove = !1);
                },
                onEnterBack: function () {
                  n(), (e.isBelow = !1);
                },
                onLeave: function () {
                  r(), (e.isAbove = !0);
                },
                onLeaveBack: function () {
                  r(), (e.isBelow = !0);
                },
              },
            }));
        },
      },
      {
        key: "setTimeline",
        value: function () {
          var e = this;
          this.timeline.to(this, {
            floatFrame: this.fullFrameCount - 1,
            ease: "none",
            onUpdate: function () {
              (e.frame = Math.floor(e.floatFrame)),
                e.lastFrame === e.frame ||
                  e.loadedRenderPool.length ||
                  e.renderImageToCanvas(e.frame);
            },
          });
        },
      },
      {
        key: "initializeEnterTween",
        value: function () {
          var e = this.props.enterTween.duration || 1;
          ra.set(this.viewerRef.current, {
            yPercent: -100 * e,
          });
          var t = !0;
          if (
            (void 0 !== this.props.enterTween.pin &&
              (t = this.props.enterTween.pin),
            (this.enterTimeline = ra.timeline({
              scrollTrigger: {
                trigger: this.viewerRef.current,
                scrub: !0,
                pin: t,
                start: function () {
                  return "top top";
                },
                end: function () {
                  return "top top-=" + window.innerHeight * e;
                },
              },
            })),
            this.props.enterTween.to &&
              this.enterTimeline.to(
                this.viewerRef.current,
                to(
                  {
                    ease: "none",
                  },
                  this.props.enterTween.to
                )
              ),
            this.props.enterTween.from &&
              this.enterTimeline.from(
                this.viewerRef.current,
                to(
                  {
                    ease: "none",
                  },
                  this.props.enterTween.from
                )
              ),
            this.props.enterTween.fromTo)
          ) {
            var n = this.props.enterTween.fromTo[0],
              r = this.props.enterTween.fromTo[1];
            this.enterTimeline.fromTo(
              this.viewerRef.current,
              n,
              to(
                {
                  ease: "none",
                },
                r
              )
            );
          }
        },
      },
      {
        key: "initializeExitTween",
        value: function () {
          if (
            (console.log(this.props.path, "initializing exit tween "),
            (this.exitTimeline = ra.timeline({
              scrollTrigger: {
                scrub: !0,
                trigger: this.containerRef.current,
                pin: this.viewerRef.current,
                onLeave: this.props.exitTween.onLeave,
                onLeaveBack: this.props.exitTween.onLeaveBack,
                onEnterBack: this.props.exitTween.onEnterBack,
                start: function () {
                  return "bottom bottom";
                },
                end: function () {
                  return "bottom top";
                },
              },
            })),
            this.props.exitTween.to &&
              this.exitTimeline.to(
                this.viewerRef.current,
                to(
                  {
                    ease: "none",
                  },
                  this.props.exitTween.to
                )
              ),
            this.props.exitTween.from &&
              this.exitTimeline.from(
                this.viewerRef.current,
                to(
                  {
                    ease: "none",
                  },
                  this.props.exitTween.from
                )
              ),
            this.props.exitTween.fromTo)
          ) {
            var e = this.props.exitTween.fromTo[0],
              t = this.props.exitTween.fromTo[1];
            this.exitTimeline.fromTo(
              this.viewerRef.current,
              e,
              to(
                to({}, t),
                {},
                {
                  ease: "none",
                }
              )
            );
          }
        },
      },
      {
        key: "renderImageToCanvas",
        value: function (e) {
          if (this.sequence[e])
            if (this.context.drawImage) {
              this.props.debug,
                this.context.drawImage(this.sequence[e], 0, 0),
                (this.lastFrame = e);
              var t = 100 - (this.frame / this.fullFrameCount) * 100 + "%",
                n = 100 - (e / this.fullFrameCount) * 100 + "%";
              (this.playHeadTween = ra.to(this.playHead.current, {
                duration: 0.05,
                right: n,
                ease: "none",
              })),
                (this.playHeadProgressTween = ra.to(
                  this.playHeadProgress.current,
                  {
                    duration: 0.05,
                    right: t,
                    ease: "none",
                  }
                ));
            } else this.initializeContext();
        },
      },
      {
        key: "render",
        value: function () {
          var e = {
            height: this.props.height || "500vh",
          };
          return (0, l.jsxs)(l.Fragment, {
            children: [
              (0, l.jsxs)("div", {
                ref: this.loadingWrap,
                className: o["load-progress-wrap"],
                children: [
                  (0, l.jsxs)("div", {
                    className: o["playhead-wrap"],
                    children: [
                      (0, l.jsx)("div", {
                        ref: this.playHead,
                        className: o.playhead,
                      }),
                      (0, l.jsx)("div", {
                        ref: this.playHeadProgress,
                        className: o["playhead-progress"],
                      }),
                    ],
                  }),
                  (0, l.jsx)("div", {
                    ref: this.loadingProgress,
                    className: o["load-progress"],
                    style: {
                      width: "0%",
                    },
                  }),
                ],
              }),
              (0, l.jsxs)("div", {
                ref: this.containerRef,
                className: o.sequence,
                style: e,
                children: [
                  (0, l.jsx)("div", {
                    ref: this.viewerRef,
                    className: o["canvas-viewer"],
                    children: (0, l.jsx)("div", {
                      style: {
                        overflow: "hidden",
                      },
                      children: (0, l.jsx)("canvas", {
                        ref: this.canvasRef,
                        className: o["sequence-canvas"],
                        width: this.width,
                        height: this.height,
                      }),
                    }),
                  }),
                  this.props.children,
                ],
              }),
            ],
          });
        },
      },
    ]),
    a
  );
})(i.Component);