web-narrowcast/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>NARROWCAST</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--  <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" /> -->
  <link rel="stylesheet" type="text/css" media="all" href="narrowstyle.css"></link>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'>
</head>
<body>


  <div class="about"><a href="https://vvvvvvaria.org/logs/zamopuzo"  target="_blank">back<span> ↗</span><br>↬ stage </a></div>

  <div id="side" class="sidebar sidemin">
  <button class="minimize" onclick="fside()">⇔</button>

    <div class="sidetop">
      <!-- to add a new event copy paste above — as the ones below.  -->
      <!-- once the event is over remember to move to the sidebottom section-->
      <p>more TBA soon! <a href="https://varia.zone/en"  target="_blank" > &#128064; </a></p>


    </div>

    <div class="middle">
      <p>⇈ Will be awesome ⇈</p>
      <p id="livetitle">LIVE ↝ N↻W ⇶ </p>
      <p id="livesubtitle"></p>
      <p>⇊ Was amazing ↷ </p>
    </div>

    <div class="sidebottom">

      	<p>28th March'21: <a href="https://varia.zone/en/rr-sense-full-1.html"  target="_blank" >Read & Repair</a></p>


	    <p>23rd March'21: <a href="http://varia.zone/en/usercond01.html"  target="_blank" >User Condition S01E01</a></p>

		<p>13 March'21: <a href="https://varia.zone/en/fhm-servers-migrations.html"  target="_blank" >FHM #1  Feminist Hack Meetings: Feminist Servers</a></p>

	 	<p>28 February'21: <a href="https://varia.zone/en/rr-wireless-imagination-2.html" target="_blank" >Read & Repair: Wireless Imagination</a></p>
    
		<p>27 June'20: <a href="https://varia.zone/en/corporeal-whispers.html" target="_blank" >RE#SISTER: Corporeal Whispers</a></p>
		    
		<p>19 June'20: <a href="https://varia.zone/en/Groeten_Charlois.html" target="_blank" >Niek Hilkmann - Groeten uit Charlois</a></p>
		    
		<p>18 April'20: <a href="https://varia.zone/en/we-hope-this-email.html" target="_blank">We hope this email finds you well</a></p>
		    
		<p>14 March'20:<a href="https://varia.zone/en/radio-on-radio.html" target="_blank">Radio on the Radio</a></p>

	   </div>
	</div>

  <div class="live live-flex">

    <!-- AFTER EVENTS PLACEHOLDER   -->
    <!-- uncomment after the event to display the iframe below  -->
	
	<iframe class="resize-drag" src="https://loading.vvvvvvaria.org" allow="camera; microphone" width="600" height="680" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen>
    </iframe>


    <!-- CHAT INTERFACE 
    <div class="chat">
      <iframe src="https://chat.vvvvvvaria.org/"></iframe><br> ↬ 
      <a class="windowlinks" href="https://chat.vvvvvvaria.org/"  target="_blank"> chat.vvvvvvaria.org</a>
    </div>
    -->

    <!-- AUDIO STREAM 
    <audio controls loop="" class="audio" src="https://ice.suroh.tk/meander " type="audio/mp3"> </audio>
    -->

    <!-- AUDIO STREAM STYLE
    <div class="audio-stream">
      <button onclick="playpause('audioBG')" type="button" name="button" class="b-narrow"><i class="audioBG fa b-play"></i></button>
      <audio id="audioBG"
      preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur1,audioBG)"  ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration);">
            <source src="https://ice.suroh.tk/meander">
      </audio>
      <input id="dur1" type="range" name="rng" min="0" step="0.25" value="0" onchange="mSet(dur1,audioBG)" style="width: 150px">
      <span id="tracktime"> 00:00 / 0 </span> 
      <br>
      <span class="audio-link">  ↬ <a class="windowlinks" href="https://ice.suroh.tk/meander "  target="_blank"> direct link to audio</a></span>
    </div>
 	-->

	<!--  ETHERPAD IFRAME 
	<div class="halfscreen">
        <iframe src="https://pad.vvvvvvaria.org/read_repair_supreme_connections"></iframe><br> ↝
        <a class="windowlinks" href="https://pad.vvvvvvaria.org/read_repair_supreme_connections"  target="_blank"> pad.vvvvvvaria.org/read_repair_supreme_connections</a>
    </div> -->


	<!-- ESSAY IFRAME 
    <div class="halfscreen">
      <iframe src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_intelligent_life_scraps.pdf"></iframe><br> ↬ 
      <a class="windowlinks" href="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_intelligent_life_scraps.pdf"  target="_blank">read_supreme_connections_intelligent_life_scraps.pdf</a>
    </div> -->

   <!-- AUDIO NEW CODE 
   <span class="audio-stream">
		<audio id="player" preload="none" src="https://ice.suroh.tk/meander "> </audio>
		<p>
		Press play (best listened in FireFox). It might take a minute to load.</p>
		<div class="audio-buttons">
			<button class="stream-button b-narrow" onclick="document.getElementById('player').play()">Play</button>
			<button class="stream-button b-narrow" onclick="document.getElementById('player').pause();document.getElementById('player').src=document.getElementById('player').src;">Stop</button>
			<button class="stream-button b-narrow vol" onclick="document.getElementById('player').volume += 0.1">Vol +</button>
			<button class="stream-button b-narrow vol" onclick="document.getElementById('player').volume -= 0.1">Vol -</button>
		</div>
    <span class="audio-link">  ↬ <a class="windowlinks" href="https://ice.suroh.tk/meander "  target="_blank"> direct link to audio</a></span>
	</span>
	-->

	<!-- IMAGE GALLERY
	<p class="img-gallery-title"> ⇩ IMAGE ⇊ GALLERY ⇘ </p>
	<div class="img-gallery">
		<figure>	
			<img src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_Wired-Audio-Angle1-Dog2-317_RGB.jpg">
			<a class="windowlinks" href="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_Wired-Audio-Angle1-Dog2-317_RGB.jpg" target="_blank">read_supreme_connections_Wired-Audio-Angle1-Dog2-317_RGB.jpg</a>
		</figure>
		<figure>
			<img src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_anger.png">
			<a class="windowlinks" href="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_anger.png" target="_blank">read_supreme_connections_anger</a>
		</figure>
		<figure>
			<img src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_happiness.png">
			<a class="windowlinks" href="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_happiness.png" target="_blank">read_supreme_connections_happiness.png</a>
		</figure>
		<figure>
			<img src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_the_blonde_composer.jpg">
			<a class="windowlinks" href="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_the_blonde_composer.jpg" target="_blank">read_supreme_connections_the_blonde_composer.jpg</a>
		</figure>
	</div>
	-->

     
    <!-- TO ACTIVATE A BELOW SECTION FOR YOUR EVENT -->
    <!-- REMOVE THE UNCOMMENT " < ! -- " and " - - > " SIGNS -->
    <!-- AND ADD THE APPROPRIATE URLS -->


    <!-- EXAMPLE JITSI or similar -->

        <!--    
        <iframe class="resize-drag" src="https://meet.jit.si/varia.broadcats" allow="camera; microphone" width="640" height="480" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen>
        </iframe> 
        -->

	<!-- EXAMPLE VIDEO FILE -->

    <!--     
      <video class="resize-drag" autoplay="" loop="">
            <source src="https://ia600703.us.archive.org/3/items/vjmorph_pack1/BWdotSphereAVS01_1_640_512kb.mp4"
              type="video/mp4">   
      </video> 
    -->

	<!--   <div class="fullscreen" style="margin: 0% 0% 2% 0%;">
	    <video 
	      id="player"
	      class="video-js vjs-default-skin"
	      controls
	      preload="none"
	    >
	      <source
	        src="https://video.vvvvvvaria.org/test.m3u8"
	        type="application/x-mpegURL"
	      />
	    </video><br>
	    <a class="windowlinks" href="https://bbb.constantvzw.org/b/ang-twu-g0m-hib"  target="_blank">if you want to join the call click here to access direct link of the BBB!</a>
	  </div>  -->
    

    <p class="note"> <u>Note</u>: this interface is in experimental phase ☆ﾟ.*･｡ﾟ and some things may not work always smoothly *</p> 

   <!--  <p class="note"> <u>Note</u>: this interface is in experimental phase ☆ﾟ.*･｡ﾟ and some things may not work always smoothly. There is the option to open the direct url of each element in a new window.</p> -->


</div>

<!-- SCRIPTS FOR THE NEW AUDIO PLAYER -->
<script>
(function(){

  function waitForIt(selector, time) {
    if(document.querySelector(selector)!=null) {

      var chat_title = document.getElementsByClassName("chatbox-title__text")[0];
      var element = document.createElement("span");

      element.innerHTML = '<audio id="player" preload="none" src="http://w-i-t-m.net:8001/radiodrama"></audio><div><button onclick="document.getElementById(\'player\').play()">Play</button><button onclick="document.getElementById(\'player\').pause();document.getElementById(\'player\').src=document.getElementById(\'player\').src;">Stop</button><button onclick="document.getElementById(\'player\').volume += 0.1">Vol +</button><button onclick="document.getElementById(\'player\').volume -= 0.1">Vol -</button></div>';

      chat_title.insertAdjacentElement('afterend', element);

      return;
    }
    else {
      setTimeout(function() {

        waitForIt(selector, time);

      }, time);
    }
  }

  waitForIt(".toggle-smiley", 1000);
})();

$(function() {
            console.log("PARENT READY");
            $("iframe").on("load", function(){
                console.log("LOADED");
                $(this).contents().find('.kiwi-startup-common').hide();
            });
        });
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


<!-- button to hide side pannel -->

<script type="text/javascript">

function fside() {
   var element = document.getElementById("side");
   element.classList.toggle("sideminclicked");
}


function fsidemobile(x) {
  if (x.matches) { // If media query matches
  var element = document.getElementById("side");
   element.classList.toggle("sideminclicked");
  } else {
   element.classList.toggle("");
  }
}

var x = window.matchMedia("(max-width: 768px)")
fsidemobile(x) // Call listener function at run time
x.addListener(fsidemobile) // Attach listener function on state changes
</script>

<!-- drag and resize library: https://interactjs.io/docs/installation#cdn-streamlined -->
<script src="interact.min.js"></script>
<!-- script above same as <script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script> --> 

<!-- also found this other options:
  https://www.webcomponents.org/element/jifalops/drag-resize
  https://codepen.io/zz85/pen/gbOoVP -->

<script>
interact('.resize-drag')
  .draggable({
    onmove: window.dragMoveListener
  })
  .resizable({
    preserveAspectRatio: true,
    edges: { left: true, right: true, bottom: true, top: true }
  })
  .on('resizemove', function (event) {
    var target = event.target,
        x = (parseFloat(target.getAttribute('data-x')) || 0),
        y = (parseFloat(target.getAttribute('data-y')) || 0);

    // update the element's style
    target.style.width  = event.rect.width + 'px';
    target.style.height = event.rect.height + 'px';

    // translate when resizing from top or left edges
    x += event.deltaRect.left;
    y += event.deltaRect.top;

    target.style.webkitTransform = target.style.transform =
        'translate(' + x + 'px,' + y + 'px)';

    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
    target.textContent = event.rect.width + '×' + event.rect.height;
  });

function dragMoveListener (event) {
    var target = event.target,
        // keep the dragged position in the data-x/data-y attributes
        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    // translate the element
    target.style.webkitTransform =
    target.style.transform =
      'translate(' + x + 'px, ' + y + 'px)';

    // update the posiion attributes
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
  }
</script>

<!-- <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
<script>
  var player = videojs("#player");
</script>

<script type="text/javascript">
  var aud1= document.getElementById('audioBG');
  var dur1= document.getElementById('dur1');
  function mDur(dur,aud){dur.max= aud.duration};
  function mPlay(dur,aud){dur.value=aud.currentTime};
  function mSet(dur,aud){aud.currentTime=dur.value};


  function playpause(podcast){
  var myAudio = document.getElementById(podcast);
  var myIcon = document.querySelector("."+podcast);
  if (myAudio.paused) {
  myIcon.className = podcast+" fa b-pause";
  myAudio.play();
  } else {
  myIcon.className = podcast+" fa b-play";
  myAudio.pause();
  }
  }
</script>
-->
</body>
</html>
-												Upload files to ''

											
										
										
											2021-02-24 16:02:55 +01:00
+								<!DOCTYPE html>
 								<html>
 								<head>
 								  <meta charset="utf-8">
-												Run stripper on tabs

											
										
										
											2021-03-12 11:23:01 +01:00
+								  <title>NARROWCAST</title>
 								  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-												taking out videojs to make the audio stream work

											
										
										
											2021-03-27 19:43:34 +01:00
+								<!--  <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" /> -->
-												Run stripper on tabs

											
										
										
											2021-03-12 11:23:01 +01:00
+								  <link rel="stylesheet" type="text/css" media="all" href="narrowstyle.css"></link>
-												added style audio stream

											
										
										
											2021-03-22 16:00:47 +01:00
+								  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'>
-												Upload files to ''

											
										
										
											2021-02-24 16:02:55 +01:00
+								</head>
 								<body>
-												chrome style fix + improv animations + hover interactions

											
										
										
											2021-03-10 19:01:42 +01:00
-												Run stripper on tabs

											
										
										
											2021-03-12 11:23:01 +01:00
+								  <div class="about"><a href="https://vvvvvvaria.org/logs/zamopuzo"  target="_blank">back<span> ↗</span><br>↬ stage </a></div>
-												Upload files to ''

											
										
										
											2021-02-24 16:02:55 +01:00
-												Run stripper on tabs

											
										
										
											2021-03-12 11:23:01 +01:00
+								  <div id="side" class="sidebar sidemin">
-												created layout fem hack meeting stream mar 13

											
										
										
											2021-03-13 14:07:27 +01:00
+								  <button class="minimize" onclick="fside()">⇔</button>
-												Upload files to ''

											
										
										
											2021-02-24 16:02:55 +01:00
-												Run stripper on tabs

											
										
										
											2021-03-12 11:23:01 +01:00
+								    <div class="sidetop">
 								      <!-- to add a new event copy paste above — as the ones below.  -->
-												Upload files to ''

											
										
										
											2021-02-24 16:02:55 +01:00
+								      <!-- once the event is over remember to move to the sidebottom section-->
-												archived event + added back placeholder + bit clean up

											
										
										
											2021-03-29 17:00:39 +02:00
+								      <p>more TBA soon! <a href="https://varia.zone/en"  target="_blank" > &#128064; </a></p>
-												Upload files to ''

											
										
										
											2021-02-24 16:02:55 +01:00
-												Run stripper on tabs

											
										
										
											2021-03-12 11:23:01 +01:00
+								    </div>
-												Upload files to ''

											
										
										
											2021-03-24 10:22:30 +01:00
-												Run stripper on tabs

											
										
										
											2021-03-12 11:23:01 +01:00
+								    <div class="middle">
-												created layout fem hack meeting stream mar 13

											
										
										
											2021-03-13 14:07:27 +01:00
+								      <p>⇈ Will be awesome ⇈</p>
-												Run stripper on tabs

											
										
										
											2021-03-12 11:23:01 +01:00
+								      <p id="livetitle">LIVE ↝ N↻W ⇶ </p>
-												added placeholder and moved live event to past

											
										
										
											2021-03-14 14:46:03 +01:00
+								      <p id="livesubtitle"></p>
-												Run stripper on tabs

											
										
										
											2021-03-12 11:23:01 +01:00
+								      <p>⇊ Was amazing ↷ </p>
 								    </div>
-												Upload files to ''

											
										
										
											2021-03-24 10:22:30 +01:00
-												Run stripper on tabs

											
										
										
											2021-03-12 11:23:01 +01:00
+								    <div class="sidebottom">
-												created layout fem hack meeting stream mar 13

											
										
										
											2021-03-13 14:07:27 +01:00
-												archived event + added back placeholder + bit clean up

											
										
										
											2021-03-29 17:00:39 +02:00
+								      	<p>28th March'21: <a href="https://varia.zone/en/rr-sense-full-1.html"  target="_blank" >Read & Repair</a></p>
-												Upload files to ''

											
										
										
											2021-03-24 10:22:30 +01:00
+									    <p>23rd March'21: <a href="http://varia.zone/en/usercond01.html"  target="_blank" >User Condition S01E01</a></p>
-												changed dates written style and tweaked 'live now' font size

tweaks after Manetta's feedback < 3

											
										
										
											2021-03-21 16:09:02 +01:00
-												Upload files to ''

											
										
										
											2021-03-24 10:22:30 +01:00
+										<p>13 March'21: <a href="https://varia.zone/en/fhm-servers-migrations.html"  target="_blank" >FHM #1  Feminist Hack Meetings: Feminist Servers</a></p>
 									 	<p>28 February'21: <a href="https://varia.zone/en/rr-wireless-imagination-2.html" target="_blank" >Read & Repair: Wireless Imagination</a></p>
-												changed dates written style and tweaked 'live now' font size

tweaks after Manetta's feedback < 3

											
										
										
											2021-03-21 16:09:02 +01:00
-												Upload files to ''

											
										
										
											2021-03-24 10:22:30 +01:00
+										<p>27 June'20: <a href="https://varia.zone/en/corporeal-whispers.html" target="_blank" >RE#SISTER: Corporeal Whispers</a></p>
 										<p>19 June'20: <a href="https://varia.zone/en/Groeten_Charlois.html" target="_blank" >Niek Hilkmann - Groeten uit Charlois</a></p>
 										<p>18 April'20: <a href="https://varia.zone/en/we-hope-this-email.html" target="_blank">We hope this email finds you well</a></p>
 										<p>14 March'20:<a href="https://varia.zone/en/radio-on-radio.html" target="_blank">Radio on the Radio</a></p>
 									   </div>
 									</div>
-												Upload files to ''

											
										
										
											2021-02-24 16:02:55 +01:00
-												created layout fem hack meeting stream mar 13

											
										
										
											2021-03-13 14:07:27 +01:00
+								  <div class="live live-flex">
-												Upload files to ''

											
										
										
											2021-02-24 16:02:55 +01:00
-												Upload files to ''

											
										
										
											2021-03-24 10:22:30 +01:00
+								    <!-- AFTER EVENTS PLACEHOLDER   -->
 								    <!-- uncomment after the event to display the iframe below  -->
-												added ReadRepair HTML elements + style

also did a bit cleaning on the CSS

											
										
										
											2021-03-27 14:28:07 +01:00
-												archived event + added back placeholder + bit clean up

											
										
										
											2021-03-29 17:00:39 +02:00
+									<iframe class="resize-drag" src="https://loading.vvvvvvaria.org" allow="camera; microphone" width="600" height="680" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen>
 								    </iframe>
-												Upload files to ''

											
										
										
											2021-03-24 10:22:30 +01:00
 								    <!-- CHAT INTERFACE
-												test user cond event 1

											
										
										
											2021-03-19 17:19:11 +01:00
+								    <div class="chat">
 								      <iframe src="https://chat.vvvvvvaria.org/"></iframe><br> ↬
 								      <a class="windowlinks" href="https://chat.vvvvvvaria.org/"  target="_blank"> chat.vvvvvvaria.org</a>
 								    </div>
-												Upload files to ''

											
										
										
											2021-03-24 10:22:30 +01:00
+								    -->
-												test user cond event 1

											
										
										
											2021-03-19 17:19:11 +01:00
-												added style audio stream

											
										
										
											2021-03-22 16:00:47 +01:00
+								    <!-- AUDIO STREAM
-												replaced angeliki's server with max' server for tomorrow

											
										
										
											2021-03-27 20:56:41 +01:00
+								    <audio controls loop="" class="audio" src="https://ice.suroh.tk/meander " type="audio/mp3"> </audio>
-												added style audio stream

											
										
										
											2021-03-22 16:00:47 +01:00
+								    -->
-												Upload files to ''

											
										
										
											2021-03-24 10:22:30 +01:00
+								    <!-- AUDIO STREAM STYLE
-												added style audio stream

											
										
										
											2021-03-22 16:00:47 +01:00
+								    <div class="audio-stream">
 								      <button onclick="playpause('audioBG')" type="button" name="button" class="b-narrow"><i class="audioBG fa b-play"></i></button>
 								      <audio id="audioBG"
 								      preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur1,audioBG)"  ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration);">
-												replaced angeliki's server with max' server for tomorrow

											
										
										
											2021-03-27 20:56:41 +01:00
+								            <source src="https://ice.suroh.tk/meander">
-												added style audio stream

											
										
										
											2021-03-22 16:00:47 +01:00
+								      </audio>
-												commented span track time

											
										
										
											2021-03-22 16:40:21 +01:00
+								      <input id="dur1" type="range" name="rng" min="0" step="0.25" value="0" onchange="mSet(dur1,audioBG)" style="width: 150px">
-												Upload files to ''

											
										
										
											2021-03-24 10:22:30 +01:00
+								      <span id="tracktime"> 00:00 / 0 </span>
-												added script hide sidebar on mobile

also added other minor adjustments on mobile and updated Read and Repair link and time info

											
										
										
											2021-03-23 12:20:19 +01:00
+								      <br>
-												replaced angeliki's server with max' server for tomorrow

											
										
										
											2021-03-27 20:56:41 +01:00
+								      <span class="audio-link">  ↬ <a class="windowlinks" href="https://ice.suroh.tk/meander "  target="_blank"> direct link to audio</a></span>
-												added style audio stream

											
										
										
											2021-03-22 16:00:47 +01:00
+								    </div>
-												Upload files to ''

											
										
										
											2021-03-24 10:22:30 +01:00
+								 	-->
-												added style audio stream

											
										
										
											2021-03-22 16:00:47 +01:00
-												archived event + added back placeholder + bit clean up

											
										
										
											2021-03-29 17:00:39 +02:00
+									<!--  ETHERPAD IFRAME
-												added ReadRepair HTML elements + style

also did a bit cleaning on the CSS

											
										
										
											2021-03-27 14:28:07 +01:00
+									<div class="halfscreen">
 								        <iframe src="https://pad.vvvvvvaria.org/read_repair_supreme_connections"></iframe><br> ↝
 								        <a class="windowlinks" href="https://pad.vvvvvvaria.org/read_repair_supreme_connections"  target="_blank"> pad.vvvvvvaria.org/read_repair_supreme_connections</a>
-												archived event + added back placeholder + bit clean up

											
										
										
											2021-03-29 17:00:39 +02:00
+								    </div> -->
-												added ReadRepair HTML elements + style

also did a bit cleaning on the CSS

											
										
										
											2021-03-27 14:28:07 +01:00
-												archived event + added back placeholder + bit clean up

											
										
										
											2021-03-29 17:00:39 +02:00
+									<!-- ESSAY IFRAME
-												added ReadRepair HTML elements + style

also did a bit cleaning on the CSS

											
										
										
											2021-03-27 14:28:07 +01:00
+								    <div class="halfscreen">
 								      <iframe src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_intelligent_life_scraps.pdf"></iframe><br> ↬
-												removed gallery, added stream url, changed title of the pdf

											
										
										
											2021-03-27 19:16:31 +01:00
+								      <a class="windowlinks" href="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_intelligent_life_scraps.pdf"  target="_blank">read_supreme_connections_intelligent_life_scraps.pdf</a>
-												archived event + added back placeholder + bit clean up

											
										
										
											2021-03-29 17:00:39 +02:00
+								    </div> -->
-												added ReadRepair HTML elements + style

also did a bit cleaning on the CSS

											
										
										
											2021-03-27 14:28:07 +01:00
-												archived event + added back placeholder + bit clean up

											
										
										
											2021-03-29 17:00:39 +02:00
+								   <!-- AUDIO NEW CODE
-												added ReadRepair HTML elements + style

also did a bit cleaning on the CSS

											
										
										
											2021-03-27 14:28:07 +01:00
+								   <span class="audio-stream">
-												replaced angeliki's server with max' server for tomorrow

											
										
										
											2021-03-27 20:56:41 +01:00
+										<audio id="player" preload="none" src="https://ice.suroh.tk/meander "> </audio>
-												added ReadRepair HTML elements + style

also did a bit cleaning on the CSS

											
										
										
											2021-03-27 14:28:07 +01:00
+										<p>
 										Press play (best listened in FireFox). It might take a minute to load.</p>
 										<div class="audio-buttons">
-												Update 'index.html'

											
										
										
											2021-03-27 19:45:33 +01:00
+											<button class="stream-button b-narrow" onclick="document.getElementById('player').play()">Play</button>
 											<button class="stream-button b-narrow" onclick="document.getElementById('player').pause();document.getElementById('player').src=document.getElementById('player').src;">Stop</button>
 											<button class="stream-button b-narrow vol" onclick="document.getElementById('player').volume += 0.1">Vol +</button>
 											<button class="stream-button b-narrow vol" onclick="document.getElementById('player').volume -= 0.1">Vol -</button>
-												added ReadRepair HTML elements + style

also did a bit cleaning on the CSS

											
										
										
											2021-03-27 14:28:07 +01:00
+										</div>
-												replaced angeliki's server with max' server for tomorrow

											
										
										
											2021-03-27 20:56:41 +01:00
+								    <span class="audio-link">  ↬ <a class="windowlinks" href="https://ice.suroh.tk/meander "  target="_blank"> direct link to audio</a></span>
-												added ReadRepair HTML elements + style

also did a bit cleaning on the CSS

											
										
										
											2021-03-27 14:28:07 +01:00
+									</span>
-												archived event + added back placeholder + bit clean up

											
										
										
											2021-03-29 17:00:39 +02:00
+									-->
-												added ReadRepair HTML elements + style

also did a bit cleaning on the CSS

											
										
										
											2021-03-27 14:28:07 +01:00
-												archived event + added back placeholder + bit clean up

											
										
										
											2021-03-29 17:00:39 +02:00
+									<!-- IMAGE GALLERY
-												added ReadRepair HTML elements + style

also did a bit cleaning on the CSS

											
										
										
											2021-03-27 14:28:07 +01:00
+									<p class="img-gallery-title"> ⇩ IMAGE ⇊ GALLERY ⇘ </p>
 									<div class="img-gallery">
 										<figure>
 											<img src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_Wired-Audio-Angle1-Dog2-317_RGB.jpg">
 											<a class="windowlinks" href="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_Wired-Audio-Angle1-Dog2-317_RGB.jpg" target="_blank">read_supreme_connections_Wired-Audio-Angle1-Dog2-317_RGB.jpg</a>
 										</figure>
 										<figure>
 											<img src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_anger.png">
 											<a class="windowlinks" href="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_anger.png" target="_blank">read_supreme_connections_anger</a>
 										</figure>
 										<figure>
 											<img src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_happiness.png">
 											<a class="windowlinks" href="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_happiness.png" target="_blank">read_supreme_connections_happiness.png</a>
 										</figure>
 										<figure>
 											<img src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_the_blonde_composer.jpg">
 											<a class="windowlinks" href="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_the_blonde_composer.jpg" target="_blank">read_supreme_connections_the_blonde_composer.jpg</a>
 										</figure>
 									</div>
-												Upload files to ''

											
										
										
											2021-03-24 10:22:30 +01:00
+									-->
-												test user cond event 1

											
										
										
											2021-03-19 16:30:03 +01:00
-												archived event + added back placeholder + bit clean up

											
										
										
											2021-03-29 17:00:39 +02:00
-												Upload files to ''

											
										
										
											2021-02-24 16:02:55 +01:00
-												changed placeholder iframe

											
										
										
											2021-02-24 16:27:03 +01:00
+								    <!-- TO ACTIVATE A BELOW SECTION FOR YOUR EVENT -->
 								    <!-- REMOVE THE UNCOMMENT " < ! -- " and " - - > " SIGNS -->
 								    <!-- AND ADD THE APPROPRIATE URLS -->
 								    <!-- EXAMPLE JITSI or similar -->
-												Run stripper on tabs

											
										
										
											2021-03-12 11:23:01 +01:00
+								        <!--
-												changed placeholder iframe

											
										
										
											2021-02-24 16:27:03 +01:00
+								        <iframe class="resize-drag" src="https://meet.jit.si/varia.broadcats" allow="camera; microphone" width="640" height="480" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen>
 								        </iframe>
 								        -->
-												archived event + added back placeholder + bit clean up

											
										
										
											2021-03-29 17:00:39 +02:00
 									<!-- EXAMPLE VIDEO FILE -->
-												changed placeholder iframe

											
										
										
											2021-02-24 16:27:03 +01:00
 								    <!--
 								      <video class="resize-drag" autoplay="" loop="">
 								            <source src="https://ia600703.us.archive.org/3/items/vjmorph_pack1/BWdotSphereAVS01_1_640_512kb.mp4"
 								              type="video/mp4">
 								      </video>
 								    -->
-												added placeholder and moved live event to past

											
										
										
											2021-03-14 14:46:03 +01:00
-												archived event + added back placeholder + bit clean up

											
										
										
											2021-03-29 17:00:39 +02:00
+									<!--   <div class="fullscreen" style="margin: 0% 0% 2% 0%;">
 									    <video
 									      id="player"
 									      class="video-js vjs-default-skin"
 									      controls
 									      preload="none"
 									    >
 									      <source
 									        src="https://video.vvvvvvaria.org/test.m3u8"
 									        type="application/x-mpegURL"
 									      />
 									    </video><br>
 									    <a class="windowlinks" href="https://bbb.constantvzw.org/b/ang-twu-g0m-hib"  target="_blank">if you want to join the call click here to access direct link of the BBB!</a>
 									  </div>  -->
-												Update 'index.html'

											
										
										
											2021-03-12 12:56:22 +01:00
-												added placeholder and moved live event to past

											
										
										
											2021-03-14 14:46:03 +01:00
-												test user cond event 1

											
										
										
											2021-03-19 17:19:11 +01:00
+								    <p class="note"> <u>Note</u>: this interface is in experimental phase ☆ﾟ.*･｡ﾟ and some things may not work always smoothly *</p>
-												changed placeholder iframe

											
										
										
											2021-02-24 16:27:03 +01:00
-												added placeholder and moved live event to past

											
										
										
											2021-03-14 14:46:03 +01:00
+								   <!--  <p class="note"> <u>Note</u>: this interface is in experimental phase ☆ﾟ.*･｡ﾟ and some things may not work always smoothly. There is the option to open the direct url of each element in a new window.</p> -->
-												changed placeholder iframe

											
										
										
											2021-02-24 16:27:03 +01:00
-												Upload files to ''

											
										
										
											2021-02-24 16:02:55 +01:00
-												chrome style fix + improv animations + hover interactions

											
										
										
											2021-03-10 19:01:42 +01:00
+								</div>
-												added new js code for audio

											
										
										
											2021-03-24 18:13:11 +01:00
+								<!-- SCRIPTS FOR THE NEW AUDIO PLAYER -->
 								<script>
 								(function(){
 								  function waitForIt(selector, time) {
 								    if(document.querySelector(selector)!=null) {
-												changed some part of the audio code

											
										
										
											2021-03-24 18:26:34 +01:00
+								      var chat_title = document.getElementsByClassName("chatbox-title__text")[0];
-												added new js code for audio

											
										
										
											2021-03-24 18:13:11 +01:00
+								      var element = document.createElement("span");
 								      element.innerHTML = '<audio id="player" preload="none" src="http://w-i-t-m.net:8001/radiodrama"></audio><div><button onclick="document.getElementById(\'player\').play()">Play</button><button onclick="document.getElementById(\'player\').pause();document.getElementById(\'player\').src=document.getElementById(\'player\').src;">Stop</button><button onclick="document.getElementById(\'player\').volume += 0.1">Vol +</button><button onclick="document.getElementById(\'player\').volume -= 0.1">Vol -</button></div>';
-												changed some part of the audio code

											
										
										
											2021-03-24 18:26:34 +01:00
+								      chat_title.insertAdjacentElement('afterend', element);
-												added new js code for audio

											
										
										
											2021-03-24 18:13:11 +01:00
 								      return;
 								    }
 								    else {
 								      setTimeout(function() {
 								        waitForIt(selector, time);
 								      }, time);
 								    }
 								  }
 								  waitForIt(".toggle-smiley", 1000);
 								})();
-												changed some part of the audio code

											
										
										
											2021-03-24 18:26:34 +01:00
 								$(function() {
 								            console.log("PARENT READY");
 								            $("iframe").on("load", function(){
 								                console.log("LOADED");
 								                $(this).contents().find('.kiwi-startup-common').hide();
 								            });
 								        });
-												added new js code for audio

											
										
										
											2021-03-24 18:13:11 +01:00
+								</script>
 								<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-												chrome style fix + improv animations + hover interactions

											
										
										
											2021-03-10 19:01:42 +01:00
+								<!-- button to hide side pannel -->
 								<script type="text/javascript">
 								function fside() {
 								   var element = document.getElementById("side");
 								   element.classList.toggle("sideminclicked");
 								}
-												added script hide sidebar on mobile

also added other minor adjustments on mobile and updated Read and Repair link and time info

											
										
										
											2021-03-23 12:20:19 +01:00
 								function fsidemobile(x) {
 								  if (x.matches) { // If media query matches
 								  var element = document.getElementById("side");
 								   element.classList.toggle("sideminclicked");
 								  } else {
 								   element.classList.toggle("");
 								  }
 								}
 								var x = window.matchMedia("(max-width: 768px)")
 								fsidemobile(x) // Call listener function at run time
 								x.addListener(fsidemobile) // Attach listener function on state changes
-												chrome style fix + improv animations + hover interactions

											
										
										
											2021-03-10 19:01:42 +01:00
+								</script>
 								<!-- drag and resize library: https://interactjs.io/docs/installation#cdn-streamlined -->
-												created layout fem hack meeting stream mar 13

											
										
										
											2021-03-13 14:07:27 +01:00
+								<script src="interact.min.js"></script>
-												chrome style fix + improv animations + hover interactions

											
										
										
											2021-03-10 19:01:42 +01:00
+								<!-- script above same as <script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script> -->
 								<!-- also found this other options:
-												Run stripper on tabs

											
										
										
											2021-03-12 11:23:01 +01:00
+								  https://www.webcomponents.org/element/jifalops/drag-resize
 								  https://codepen.io/zz85/pen/gbOoVP -->
-												chrome style fix + improv animations + hover interactions

											
										
										
											2021-03-10 19:01:42 +01:00
-												created layout fem hack meeting stream mar 13

											
										
										
											2021-03-13 14:07:27 +01:00
+								<script>
-												chrome style fix + improv animations + hover interactions

											
										
										
											2021-03-10 19:01:42 +01:00
+								interact('.resize-drag')
 								  .draggable({
 								    onmove: window.dragMoveListener
 								  })
 								  .resizable({
 								    preserveAspectRatio: true,
 								    edges: { left: true, right: true, bottom: true, top: true }
 								  })
 								  .on('resizemove', function (event) {
 								    var target = event.target,
 								        x = (parseFloat(target.getAttribute('data-x')) || 0),
 								        y = (parseFloat(target.getAttribute('data-y')) || 0);
 								    // update the element's style
 								    target.style.width  = event.rect.width + 'px';
 								    target.style.height = event.rect.height + 'px';
 								    // translate when resizing from top or left edges
 								    x += event.deltaRect.left;
 								    y += event.deltaRect.top;
 								    target.style.webkitTransform = target.style.transform =
 								        'translate(' + x + 'px,' + y + 'px)';
 								    target.setAttribute('data-x', x);
 								    target.setAttribute('data-y', y);
 								    target.textContent = event.rect.width + '×' + event.rect.height;
 								  });
 								function dragMoveListener (event) {
 								    var target = event.target,
 								        // keep the dragged position in the data-x/data-y attributes
 								        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
 								        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
-												Upload files to ''

											
										
										
											2021-02-24 16:02:55 +01:00
-												chrome style fix + improv animations + hover interactions

											
										
										
											2021-03-10 19:01:42 +01:00
+								    // translate the element
 								    target.style.webkitTransform =
 								    target.style.transform =
 								      'translate(' + x + 'px, ' + y + 'px)';
-												Upload files to ''

											
										
										
											2021-02-24 16:02:55 +01:00
-												chrome style fix + improv animations + hover interactions

											
										
										
											2021-03-10 19:01:42 +01:00
+								    // update the posiion attributes
 								    target.setAttribute('data-x', x);
 								    target.setAttribute('data-y', y);
 								  }
-												created layout fem hack meeting stream mar 13

											
										
										
											2021-03-13 14:07:27 +01:00
+								</script>
-												taking out videojs to make the audio stream work

											
										
										
											2021-03-27 19:43:34 +01:00
 								<!-- <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
-												Embed live stream

											
										
										
											2021-03-12 12:05:25 +01:00
+								<script>
 								  var player = videojs("#player");
 								</script>
-												Upload files to ''

											
										
										
											2021-02-24 16:02:55 +01:00
-												added style audio stream

											
										
										
											2021-03-22 16:00:47 +01:00
+								<script type="text/javascript">
 								  var aud1= document.getElementById('audioBG');
 								  var dur1= document.getElementById('dur1');
 								  function mDur(dur,aud){dur.max= aud.duration};
 								  function mPlay(dur,aud){dur.value=aud.currentTime};
 								  function mSet(dur,aud){aud.currentTime=dur.value};
 								  function playpause(podcast){
 								  var myAudio = document.getElementById(podcast);
 								  var myIcon = document.querySelector("."+podcast);
 								  if (myAudio.paused) {
 								  myIcon.className = podcast+" fa b-pause";
 								  myAudio.play();
 								  } else {
 								  myIcon.className = podcast+" fa b-play";
 								  myAudio.pause();
 								  }
 								  }
 								</script>
-												taking out videojs to make the audio stream work

											
										
										
											2021-03-27 19:43:34 +01:00
+								-->
-												Upload files to ''

											
										
										
											2021-02-24 16:02:55 +01:00
+								</body>
-												Comment out loading for now

											
										
										
											2021-03-11 13:36:52 +01:00
+								</html>