<!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 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 > ';
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 >
