2021-02-24 16:02:55 +01:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
2021-03-12 11:23:01 +01:00
< title > NARROWCAST< / title >
< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1" >
2021-03-12 12:05:25 +01:00
< link href = "https://vjs.zencdn.net/7.10.2/video-js.css" rel = "stylesheet" / >
2021-03-12 11:23:01 +01:00
< link rel = "stylesheet" type = "text/css" media = "all" href = "narrowstyle.css" > < / link >
2021-02-24 16:02:55 +01:00
< / head >
< body >
2021-03-10 19:01:42 +01:00
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 >
2021-02-24 16:02:55 +01:00
2021-03-12 11:23:01 +01:00
< div id = "side" class = "sidebar sidemin" >
< button class = "minimize" onclick = "fside()" > ⇔< / button >
2021-02-24 16:02:55 +01:00
2021-03-12 11:23:01 +01:00
< div class = "sidetop" >
<!-- to add a new event copy paste above — as the ones below. -->
2021-02-24 16:02:55 +01:00
<!-- once the event is over remember to move to the sidebottom section -->
< p > 2021.03.23: < a href = "" target = "_blank" > User Condition S01E01< / a > < / p >
2021-03-12 11:23:01 +01:00
< / div >
< div class = "middle" >
< p > ⇈ Will be awesome ↟ < / p >
< p id = "livetitle" > LIVE ↝ N↻W ⇶ < / p >
2021-03-12 12:56:22 +01:00
< p > 2021.03.13: < a href = "" target = "_blank" > Feminist Hack Meetings: Feminist Servers< / a > < / p >
2021-03-12 11:23:01 +01:00
< p > ⇊ Was amazing ↷ < / p >
< / div >
< div class = "sidebottom" >
2021-02-24 16:02:55 +01:00
< p > 2021.02.28: < a href = "https://varia.zone/en/rr-wireless-imagination-2.html" target = "_blank" > Read & Repair: Wireless Imagination< / a > < / p >
< p > 2020.06.27: < a href = "https://varia.zone/en/corporeal-whispers.html" target = "_blank" > RE#SISTER: Corporeal Whispers< / a > < / p >
< p > 2020.06.19: < a href = "https://varia.zone/en/Groeten_Charlois.html" target = "_blank" > Niek Hilkmann - Groeten uit Charlois< / a > < / p >
< p > 2020.04.18: < a href = "https://varia.zone/en/we-hope-this-email.html" target = "_blank" > We hope this email finds you well< / a > < / p >
< p > 2020.03.14:< a href = "https://varia.zone/en/radio-on-radio.html" target = "_blank" > Radio on the Radio< / a > < / p >
2021-03-12 11:23:01 +01:00
< / div >
< / div >
2021-02-24 16:02:55 +01:00
2021-03-12 11:23:01 +01:00
< div class = "live" >
2021-02-24 16:02:55 +01:00
2021-03-11 13:36:52 +01:00
<!--
2021-02-24 16:27:03 +01:00
< iframe class = "resize-drag" src = "https://loading.vvvvvvaria.org" allow = "camera; microphone" width = "600" height = "680" frameborder = "0" webkitallowfullscreen = "true" mozallowfullscreen = "true" allowfullscreen >
2021-02-24 16:02:55 +01:00
< / iframe >
2021-03-11 13:36:52 +01:00
-->
2021-02-24 16:02:55 +01:00
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 -->
2021-03-12 11:23:01 +01:00
<!--
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 >
-->
2021-03-12 12:56:22 +01:00
<!-- EXAMPLE VIDEO FILE -->
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 >
-->
2021-03-12 12:47:09 +01:00
< div class = "resize-drag" >
2021-03-12 12:10:33 +01:00
< video
2021-03-12 12:05:25 +01:00
id="player"
2021-03-12 12:47:09 +01:00
class="video-js vjs-default-skin"
2021-03-12 12:05:25 +01:00
height="360"
width="640"
controls
preload="none"
>
< source
src="https://video.vvvvvvaria.org/test.m3u8"
type="application/x-mpegURL"
/>
< / video >
2021-03-12 12:56:22 +01:00
< a class = "windowlinks" href = "https://chat.vvvvvvaria.org/" target = "_" > URL of the BBB< / a >
2021-03-12 12:47:09 +01:00
< / div >
2021-03-12 12:56:22 +01:00
<!-- CHAT INTERFACE -->
< div class = "resize-drag" >
< iframe src = "https://chat.vvvvvvaria.org/" > < / iframe >
< a class = "windowlinks" href = "https://chat.vvvvvvaria.org/" target = "_" > chat.vvvvvvaria.org< / a >
< / div >
<!-- AUDIO STREAM -->
<!-- <audio controls loop="" class="resize - drag" src="http://w - i - t - m.net:8001/meander" type="audio/mp3"> </audio> -->
<!-- EXAMPLE ETHERPAD -->
< div class = "resize-drag" >
< iframe src = "https://pad.vvvvvvaria.org/fhm#1.notes" > < / iframe >
< a class = "windowlinks" href = "https://pad.vvvvvvaria.org/fhm#1.notes" target = "_" > pad.vvvvvvaria.org/fhm#1.notes< / a >
< / div >
2021-02-24 16:27:03 +01:00
2021-03-12 12:56:22 +01:00
<!-- <p class="note"> * move and resize the elements above by dragging their corners / sides and click on the page to set the position *</p> -->
< p class = "note" > the iterface is in experimental phase and some things may not work properly. There is the option to open the url of each element in a new window.< / p >
2021-02-24 16:27:03 +01:00
2021-02-24 16:02:55 +01:00
2021-03-10 19:01:42 +01:00
< / div >
<!-- button to hide side pannel -->
< script type = "text/javascript" >
function fside() {
var element = document.getElementById("side");
element.classList.toggle("sideminclicked");
}
< / script >
<!-- drag and resize library: https://interactjs.io/docs/installation#cdn - streamlined -->
2021-03-12 12:41:28 +01:00
<!-- <script src="interact.min.js"></script> -->
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:
2021-03-12 11:23:01 +01:00
https://www.webcomponents.org/element/jifalops/drag-resize
https://codepen.io/zz85/pen/gbOoVP -->
2021-03-10 19:01:42 +01:00
2021-03-12 12:41:28 +01:00
<!-- <script>
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 + '×
});
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;
2021-02-24 16:02:55 +01:00
2021-03-10 19:01:42 +01:00
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
2021-02-24 16:02:55 +01:00
2021-03-10 19:01:42 +01:00
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
2021-03-12 12:41:28 +01:00
< / script > -->
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 >
2021-02-24 16:02:55 +01:00
< / body >
2021-03-11 13:36:52 +01:00
< / html >
