nimrodkerrett
/
eye-of-beholder


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
							<!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="ticker-wrapper" class="alert alert-danger opacity-75 w-100" role="alert" style="position:fixed; left:0; bottom:3rem; z-index:23">
            <div id="the-ticker" class="w-100 text-nowrap">
              <h1 id="ticker-text" class="fw-bolder text-white py-2" style="direction:rtl; font-size:5rem;">
              </h1>
            </div>
        </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) {
    $("#the-ticker").marquee("destroy");
    if (ticker_text) {
      $("#ticker-wrapper").show();
      $("#ticker-text").text(ticker_text);
      $("#the-ticker").marquee({
        "direction": "right",
        "duplicated": true,
        "speed": 115
      });
    } else {
        $("#ticker-wrapper").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, 300);
  </script>
</body>
</html>