nimrodkerrett
/
eye-of-beholder


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
							<!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/eob-logo.png">
</head>
<body data-bs-theme="dark" class="overflow-hidden" style="cursor: none">
  <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="background-color:#ff0000; position:absolute; left:0; bottom:3.5rem; z-index:23">
            <!-- img style="height:10rem; position:absolute; left:-2px; bottom:-1.15rem; z-index:46" src="/static/gfx/zio-kahana-mic.png" / -->
            <div id="the-ticker" class="w-100 text-nowrap">
              <h1 id="ticker-text" class="fw-bolder text-white" style="direction:rtl; font-size:4rem;">
              </h1>
            </div>
            <div id="the-source" class="w-100 text-nowrap bg-white" style="position: absolute; bottom: -2.5rem; left: 0">
              <h3 id="source-text" class="fw-bolder text-danger px-1" style="direction:rtl; text-align:left; font-size:2rem;">
              </h3>
            </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, source_text) {
    $("#the-ticker").marquee("destroy");
    if (ticker_text) {
      $("#ticker-wrapper").show();
      $("#ticker-text").text(ticker_text);
      $("#the-ticker").marquee({
        "direction": "right",
        "duplicated": true,
        "speed": 161
      });
    } else {
        $("#ticker-wrapper").hide();
    }
    $("#source-text").text(source_text)
  }
  window.item_index = 0;
  function nextItem() {
    document.getElementById("vid-src").setAttribute('src', '/static/video/'+ITEMS[item_index].vid);
    // console.log(document.getElementById("vid-src").getAttribute('src'));
    document.getElementById("the-video").load();
    document.getElementById("the-video").play();
    setTicker(ITEMS[item_index].ticker, ITEMS[item_index].source);
    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("ticker-wrapper").style.filter=`blur(${tickerblur}px)`;
  }
  window.update_interval = setInterval(updateDistance, 300);
  </script>
</body>
</html>