web-narrowcast/index.html

355 lines
14 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>
-->
<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>
<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="http://w-i-t-m.net:8001/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="http://w-i-t-m.net:8001/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>
-->
<!-- 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);
})();
$(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>