nimrodkerrett
/
eye-of-beholder


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
							<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Eye of Beholder</title>
  <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link rel="icon" href="/static/gfx/eye-horus.png">
</head>
<body data-bs-theme="dark" class="overflow-hidden">
  <div class="container-fluid text-center">
    <div class="row">
      <div class="col12">
        <video id="the-video" style="height:100vh; margin:0 auto" class="object-fit-contain" muted>
          <source id="vid-src" type="video/mp4" src=""/>
        </video>
      </div>
    </div>
    <div class="row">
      <div class="col12">
        <div id="the-ticker" class="marquee alert alert-warning fw-bolder w100 opacity-50 text-nowrap" role="alert" style="direction:rtl; font-size:5rem; position:fixed; left:0; bottom:2rem; z-index:23">
          <h2 id="ticker-text" class="fw-bolder bg-danger text-white my-2 p-4">
          </h2>
        </div>
      </div>
    </div>
  </div>
  <script src="/static/js/config.js"></script>
  <script src="/static/js/jquery-3.7.1.min.js"></script>
  <script src="/static/js/jquery.marquee.min.js"></script>
  <script src="/static/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script>
  function setTicker(ticker_text) {
    $(".marquee").marquee("destroy");
    if (ticker_text) {
      $(".marquee").show();
      $(".marquee").text(ticker_text);
      $(".marquee").marquee({
        "direction": "right",
        "duplicated": true,
        "speed": 115
      });
    } else {
      $(".marquee").hide();
    }
  }
  window.item_index = 0;
  function nextItem() {
    document.getElementById("vid-src").setAttribute('src', '/static/video/'+ITEMS[item_index].vid);
    document.getElementById("the-video").load();
    document.getElementById("the-video").play();
    setTicker(ITEMS[item_index].ticker);
    item_index = (item_index+1)%ITEMS.length;
  }
  $(()=> {
    document.getElementById('the-video').addEventListener('ended',nextItem);
    nextItem();
  });
  async function getDistance() {
    try {
      let response = await fetch("/d");
      let data = await response.json();
      return data.distance;
    } catch {
      return 0;
    }
  };
  async function updateDistance() {
    var dist = await getDistance();
    var vidblur = 0, tickerblur = TICKER_BLUR_WHEN_FAR;
    if (dist && dist<MIN_DIST) {
      dist = MIN_DIST;
    }
    if (dist && dist<MAX_DIST) {
      vidblur = parseInt(VID_BLUR_WHEN_CLOSE*(MAX_DIST-dist)/(MAX_DIST-MIN_DIST));
      tickerblur = parseInt(TICKER_BLUR_WHEN_FAR*(dist-MIN_DIST)/(MAX_DIST-MIN_DIST));
    }

    // console.log(vidblur,tickerblur);
    // console.log(`${vidblur}, ${tickerblur}`);
    document.getElementById("the-video").style.filter=`blur(${vidblur}px)`;
    document.getElementById("the-ticker").style.filter=`blur(${tickerblur}px)`;
  }
  window.update_interval = setInterval(updateDistance, 200);
  </script>
</body>
</html>