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>28th March'21 — 11:00 CET: <a href="https://varia.zone/en/rr-sense-full-1.html"  target="_blank" >Read & Repair</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>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>


    <!-- essay frame 
    <div class="essay">
      <iframe src="https://theusercondition.computer/"></iframe><br> ↬ 
      <a class="windowlinks" href="https://theusercondition.computer/"  target="_blank">theusercondition.computer</a>
    </div>
    -->

    <!-- 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="http://w-i-t-m.net:8001/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="http://w-i-t-m.net:8001/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="http://w-i-t-m.net:8001/meander"  target="_blank"> direct link to audio</a></span>
    </div>
 	-->

  <!-- AUDIO NEW CODE -->
  <span class="stream">
<audio id="player" preload="none" src="http://w-i-t-m.net:8001/meander"> </audio><br>
Press play (best listened in FireFox). It might take a minute to load.
<div>
<button class="stream-button" onclick="document.getElementById('player').play()">Play</button>
<button class="stream-button" onclick="document.getElementById('player').pause();document.getElementById('player').src=document.getElementById('player').src;">Stop</button>
<button class="stream-button" onclick="document.getElementById('player').volume += 0.1">Vol +</button>
<button class="stream-button" onclick="document.getElementById('player').volume -= 0.1">Vol -</button>
</div>
</span>

    <!-- lil face 
    <div class="lil-face loading">
      <a href="https://silviolorusso.com" target="_blank">
        <img src="https://i.ytimg.com/vi/AsFBRdkFKx8/mqdefault.jpg" style="width: 100px; border-radius: 25px; box-shadow: 0.3rem 0.2rem 0.3rem #ffe4fd;"/>
      </a>
    </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>  -->
    

    <!-- EXAMPLE ETHERPAD -->   
<!--     <div class="halfscreen">
        <iframe src="https://pad.vvvvvvaria.org/fhm#1.notes"></iframe><br> ↝
        <a class="windowlinks" href="https://pad.vvvvvvaria.org/fhm#1.notes"  target="_blank">  pad.vvvvvvaria.org/fhm#1.notes</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);
})();
</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">
-												Embed live stream

											
										
										
											2021-03-12 12:05:25 +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-->
-												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
+								      <p>28th March'21 — 11:00 CET: <a href="https://varia.zone/en/rr-sense-full-1.html"  target="_blank" >Read & Repair</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
-												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  -->
 								    <iframe class="resize-drag" src="https://loading.vvvvvvaria.org" allow="camera; microphone" width="600" height="680" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen>
 								    </iframe>
 								    <!-- essay frame
-												test user cond event 1

											
										
										
											2021-03-19 17:19:11 +01:00
+								    <div class="essay">
-												test user cond event 1

											
										
										
											2021-03-19 16:30:03 +01:00
+								      <iframe src="https://theusercondition.computer/"></iframe><br> ↬
 								      <a class="windowlinks" href="https://theusercondition.computer/"  target="_blank">theusercondition.computer</a>
 								    </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
-												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
-												test user cond event 1

											
										
										
											2021-03-19 17:19:11 +01:00
+								    <audio controls loop="" class="audio" src="http://w-i-t-m.net:8001/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);">
-												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
+								            <source src="http://w-i-t-m.net:8001/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>
 								      <span class="audio-link">  ↬ <a class="windowlinks" href="http://w-i-t-m.net:8001/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
-												added new js code for audio

											
										
										
											2021-03-24 18:13:11 +01:00
+								  <!-- AUDIO NEW CODE -->
 								  <span class="stream">
-												changed stream url

											
										
										
											2021-03-24 18:15:21 +01:00
+								<audio id="player" preload="none" src="http://w-i-t-m.net:8001/meander"> </audio><br>
-												added new js code for audio

											
										
										
											2021-03-24 18:13:11 +01:00
+								Press play (best listened in FireFox). It might take a minute to load.
 								<div>
 								<button class="stream-button" onclick="document.getElementById('player').play()">Play</button>
 								<button class="stream-button" onclick="document.getElementById('player').pause();document.getElementById('player').src=document.getElementById('player').src;">Stop</button>
 								<button class="stream-button" onclick="document.getElementById('player').volume += 0.1">Vol +</button>
 								<button class="stream-button" onclick="document.getElementById('player').volume -= 0.1">Vol -</button>
 								</div>
 								</span>
-												Upload files to ''

											
										
										
											2021-03-24 10:22:30 +01:00
+								    <!-- lil face
-												testing style mobile user cond event

added styles @media only screen and (max-width: 768px) for /* SILVIO*/ classes

											
										
										
											2021-03-21 15:58:02 +01:00
+								    <div class="lil-face loading">
 								      <a href="https://silviolorusso.com" target="_blank">
-												test user cond event 1

											
										
										
											2021-03-19 16:30:03 +01:00
+								        <img src="https://i.ytimg.com/vi/AsFBRdkFKx8/mqdefault.jpg" style="width: 100px; border-radius: 25px; box-shadow: 0.3rem 0.2rem 0.3rem #ffe4fd;"/>
 								      </a>
 								    </div>
-												Upload files to ''

											
										
										
											2021-03-24 10:22:30 +01:00
+									-->
-												Update 'index.html'

											
										
										
											2021-03-12 13:12:06 +01:00
-												test user cond event 1

											
										
										
											2021-03-19 16:30:03 +01:00
-												Update 'index.html'

											
										
										
											2021-03-12 13:12:06 +01: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>
 								        -->
-												Update 'index.html'

											
										
										
											2021-03-12 12:56:22 +01: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
 								<!--   <div class="fullscreen" style="margin: 0% 0% 2% 0%;">
-												Update 'index.html'

											
										
										
											2021-03-12 12:10:33 +01:00
+								    <video
-												Embed live stream

											
										
										
											2021-03-12 12:05:25 +01:00
+								      id="player"
-												Update 'index.html'

											
										
										
											2021-03-12 12:47:09 +01:00
+								      class="video-js vjs-default-skin"
-												Embed live stream

											
										
										
											2021-03-12 12:05:25 +01:00
+								      controls
 								      preload="none"
 								    >
 								      <source
 								        src="https://video.vvvvvvaria.org/test.m3u8"
 								        type="application/x-mpegURL"
 								      />
-												Update 'index.html'

											
										
										
											2021-03-12 12:57:30 +01:00
+								    </video><br>
-												created layout fem hack meeting stream mar 13

											
										
										
											2021-03-13 14:07:27 +01:00
+								    <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>
-												added placeholder and moved live event to past

											
										
										
											2021-03-14 14:46:03 +01:00
+								  </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
-												Update 'index.html'

											
										
										
											2021-03-12 12:56:22 +01:00
-												Revert "Testing NC embed"

This reverts commit 2022ac9f252153ec709fb46cfc4f53954b5780c3.

Testing done.

											
										
										
											2021-03-19 15:37:24 +01:00
-												added placeholder and moved live event to past

											
										
										
											2021-03-14 14:46:03 +01:00
-												Update 'index.html'

											
										
										
											2021-03-12 12:56:22 +01:00
+								    <!-- EXAMPLE ETHERPAD -->
-												added placeholder and moved live event to past

											
										
										
											2021-03-14 14:46:03 +01:00
+								<!--     <div class="halfscreen">
-												created layout fem hack meeting stream mar 13

											
										
										
											2021-03-13 14:07:27 +01:00
+								        <iframe src="https://pad.vvvvvvaria.org/fhm#1.notes"></iframe><br> ↝
 								        <a class="windowlinks" href="https://pad.vvvvvvaria.org/fhm#1.notes"  target="_blank">  pad.vvvvvvaria.org/fhm#1.notes</a>
-												added placeholder and moved live event to past

											
										
										
											2021-03-14 14:46:03 +01:00
+								    </div> -->
-												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) {
 								      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);
 								})();
 								</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>
-												Embed live stream

											
										
										
											2021-03-12 12:05:25 +01:00
+								<script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
 								<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>
-												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>