anglk
/
web-narrowcast
forked from varia/web-narrowcast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

toggle hide/show buttons on stream + cleaning files

master
JoanaChicau 4 years ago
parent
a98b94715d
commit
194e5c7957
3 changed files with 291 additions and 169 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 193
      index.html
  2. 138
      narrowscripts.js
  3. 123
      narrowstyle.css

193
index.html
View File

@ -11,9 +11,8 @@
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'>
<!-- OUR SCRIPTS --> <!-- OUR SCRIPTS -->
<script type="text/javascript" src="narrowscripts.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="interact.min.js"></script> <script type="text/javascript" src="narrowscripts.js"></script>
</head> </head>
<body> <body>
@ -48,54 +47,75 @@
<p>28th March'21: <a href="https://varia.zone/en/rr-sense-full-1.html" target="_blank" >Read & Repair</a></p> <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>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>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>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>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>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>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> <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> </div>
<div class="live live-flex"> <div class="live live-flex">
<!-- INSTRUCTIONS -->
<!-- TO ACTIVATE A BELOW SECTION FOR YOUR EVENT -->
<!-- REMOVE THE UNCOMMENT " < ! -- " and " - - > " SIGNS -->
<!-- AND ADD THE APPROPRIATE URLS -->
<div class="b_allmedia">
<button onclick="hideshowWelcome()" class="" id="bhide_wel">WELCOME</button>
<button onclick="hideshowChat()" class="bhide_chat_off" id="bhide_chat">CHAT</button>
<button onclick="hideshowPad()" class="bhide_chat_off" id="bhide_ether">PAD</button>
<button onclick="hideshowAudio()" class="bhide_chat_off" id="bhide_au">AUDIO</button>
<button onclick="hideshowJitsi()" class="bhide_chat_off" id="bhide_jit">JITSI</button>
<button onclick="hideshowEssay()" class="bhide_chat_off" id="bhide_ess">ESSAY</button>
<button onclick="hideshowVideo()" class="bhide_chat_off" id="bhide_vid">VIDEO</button>
<button onclick="hideshowIMG()" class="bhide_chat_off" id="bhide_img">IMAGE</button>
<button onclick="hideshowGal()" class="bhide_chat_off" id="bhide_gal">GALLERY</button>
</div>
<!-- AFTER EVENTS PLACEHOLDER --> <!-- 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 class="fullscreen" id="showWel" src="https://loading.vvvvvvaria.org" allow="camera; microphone" width="600" height="680" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen>
</iframe> </iframe>
<!-- CHAT INTERFACE
<div class="chat">
<!-- CHAT -->
<div class="chat halfscreen hide" id="showChat">
<iframe src="https://chat.vvvvvvaria.org/"></iframe><br> ↬ <iframe src="https://chat.vvvvvvaria.org/"></iframe><br> ↬
<a class="windowlinks" href="https://chat.vvvvvvaria.org/" target="_blank"> chat.vvvvvvaria.org</a> <a class="windowlinks" href="https://chat.vvvvvvaria.org/" target="_blank"> direct link to chat! </a>
</div> </div>
-->
<!-- ETHERPAD IFRAME
<div class="halfscreen">
<!-- ETHERPAD -->
<div class="halfscreen hide" id="showEther">
<iframe src="https://pad.vvvvvvaria.org/read_repair_supreme_connections"></iframe><br> ↝ <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> <a class="windowlinks" href="https://pad.vvvvvvaria.org/read_repair_supreme_connections" target="_blank"> direct to pad </a>
</div> --> </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 <!-- AUDIO -->
<span class="audio-stream">
<div class="audio-stream fullscreen hide" id="showAudio">
<audio id="player" preload="none" src="https://ice.suroh.tk/meander "> </audio> <audio id="player" preload="none" src="https://ice.suroh.tk/meander "> </audio>
<p> <p>
Press play (best listened in FireFox). It might take a minute to load.</p> Press play (best listened in FireFox). It might take a minute to load.</p>
@ -105,78 +125,99 @@
<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>
<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> </div>
<span class="audio-link"> ↬ <a class="windowlinks" href="https://ice.suroh.tk/meander " target="_blank"> direct link to audio</a></span> <span class="audio-link"> ↬ <a class="windowlinks" href="https://ice.suroh.tk/meander " target="_blank"> direct link to audio! </a></span>
</span> </div>
-->
<!-- JITSI -->
<div class="halfscreen hide" id="showJit">
<iframe src="https://meet.jit.si/varia.broadcats" allow="camera; microphone" width="640" height="480" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen>
</iframe>
<br> ↬
<a class="windowlinks" href="" target="_blank"> direct link to Jitsi</a>
</div>
<!-- ESSAY -->
<div class="halfscreen hide" id="showEssay">
<iframe src=""></iframe><br> ↬
<a class="windowlinks" href="" target="_blank"> direct link to PDF</a>
</div>
<!-- VIDEO -->
<div class="fullscreen hide" id="showVideo">
<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"> direct link to video </a>
</div>
<!-- IMAGE -->
<figure class="halfscreen hide" id="showImg">
<img src="https://varia.zone/images/de_varia.jpg">
<br> ↬
<a class="windowlinks" href="https://varia.zone/images/de_varia.jpg" target="_blank" alt=""> caption + link to .jpg</a>
</figure>
<!-- IMAGE GALLERY -->
<div class="img-gallery hide" id="showGal">
<p class="img-gallery-title"> ⇩ IMAGE ⇊ GALLERY ⇘ </p>
<!-- IMAGE GALLERY
<p class="img-gallery-title"> ⇩ IMAGE ⇊ GALLERY ⇘ </p>
<div class="img-gallery">
<figure> <figure>
<img src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_Wired-Audio-Angle1-Dog2-317_RGB.jpg"> <img src="https://varia.zone/images/de_varia.jpg"><br> ↬
<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> <a class="windowlinks" href="https://varia.zone/images/de_varia.jpg" target="_blank" alt=""> caption + link to .jpg</a>
</figure> </figure>
<figure> <figure>
<img src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_anger.png"> <img src="https://varia.zone/images/de_varia.jpg"><br> ↬
<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> <a class="windowlinks" href="https://varia.zone/images/de_varia.jpg" target="_blank" alt=""> caption + link to .jpg</a>
</figure> </figure>
<figure> <figure>
<img src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_happiness.png"> <img src="https://varia.zone/images/de_varia.jpg"><br> ↬
<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> <a class="windowlinks" href="https://varia.zone/images/de_varia.jpg" target="_blank" alt=""> caption + link to .jpg</a>
</figure> </figure>
<figure> <figure>
<img src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_the_blonde_composer.jpg"> <img src="https://varia.zone/images/de_varia.jpg"><br> ↬
<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> <a class="windowlinks" href="https://varia.zone/images/de_varia.jpg" target="_blank" alt=""> caption + link to .jpg</a>
</figure> </figure>
</div> </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 --> <p class="note"> <u>Note</u>: this interface is in experimental phase ☆ﾟ.*･｡ﾟ and some things may not work always smoothly *</p>
<!--
<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> --> <!-- <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> </div>
</body> </body>
</html> </html>

138
narrowscripts.js
View File

@ -56,59 +56,88 @@ $(function() {
fsidemobile(x) fsidemobile(x)
x.addListener(fsidemobile) x.addListener(fsidemobile)
// SCRIPT DRAG AND RESIZE
function hideshowWelcome() {
// library: https://interactjs.io/docs/installation#cdn-streamlined var elwel = document.getElementById("showWel");
// needs embed <script src="interact.min.js"></script> elwel.classList.toggle("hide");
// 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 and https://codepen.io/zz85/pen/gbOoVP var bwel = document.getElementById("bhide_wel");
bwel.classList.toggle("bhide_chat_off")
}
interact('.resize-drag')
.draggable({ function hideshowChat() {
onmove: window.dragMoveListener var elchat = document.getElementById("showChat");
}) elchat.classList.toggle("hide");
.resizable({
preserveAspectRatio: true, var bchat = document.getElementById("bhide_chat");
edges: { left: true, right: true, bottom: true, top: true } bchat.classList.toggle("bhide_chat_off")
}) }
.on('resizemove', function (event) {
var target = event.target, function hideshowPad() {
x = (parseFloat(target.getAttribute('data-x')) || 0), var elether = document.getElementById("showEther");
y = (parseFloat(target.getAttribute('data-y')) || 0); elether.classList.toggle("hide");
// update the element's style var bether = document.getElementById("bhide_ether");
target.style.width = event.rect.width + 'px'; bether.classList.toggle("bhide_chat_off")
target.style.height = event.rect.height + 'px'; }
// translate when resizing from top or left edges
x += event.deltaRect.left; function hideshowAudio() {
y += event.deltaRect.top; var elau = document.getElementById("showAudio");
elau.classList.toggle("hide");
target.style.webkitTransform = target.style.transform =
'translate(' + x + 'px,' + y + 'px)'; var bau = document.getElementById("bhide_au");
bau.classList.toggle("bhide_chat_off")
target.setAttribute('data-x', x); }
target.setAttribute('data-y', y);
target.textContent = event.rect.width + '×' + event.rect.height;
});
function hideshowJitsi() {
function dragMoveListener (event) { var eljit = document.getElementById("showJit");
var target = event.target, eljit.classList.toggle("hide");
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx, var bjit = document.getElementById("bhide_jit");
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; bjit.classList.toggle("bhide_chat_off")
}
// translate the element
target.style.webkitTransform =
target.style.transform = function hideshowEssay() {
'translate(' + x + 'px, ' + y + 'px)'; var eless = document.getElementById("showEssay");
eless.classList.toggle("hide");
// update the posiion attributes
target.setAttribute('data-x', x); var bess = document.getElementById("bhide_ess");
target.setAttribute('data-y', y); bess.classList.toggle("bhide_chat_off")
} }
function hideshowVideo() {
var elvid = document.getElementById("showVideo");
elvid.classList.toggle("hide");
var bvid = document.getElementById("bhide_vid");
bvid.classList.toggle("bhide_chat_off")
}
function hideshowIMG() {
var elimg = document.getElementById("showImg");
elimg.classList.toggle("hide");
var bimg = document.getElementById("bhide_img");
bimg.classList.toggle("bhide_chat_off")
}
function hideshowGal() {
var elgal = document.getElementById("showGal");
elgal.classList.toggle("hide");
var bgal = document.getElementById("bhide_gal");
bgal.classList.toggle("bhide_chat_off")
}
// src="https://vjs.zencdn.net/7.10.2/video.min.js" // src="https://vjs.zencdn.net/7.10.2/video.min.js"
@ -134,3 +163,6 @@ $(function() {
// myAudio.pause(); // myAudio.pause();
// } // }
// } // }

123
narrowstyle.css
View File

@ -86,7 +86,7 @@ p.about {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
margin: 1rem; margin: 1%;
color: #ffffe5; color: #ffffe5;
z-index: 99; z-index: 99;
max-width: 80px; max-width: 80px;
@ -254,14 +254,67 @@ button.minimize:hover {
padding-bottom: 2rem; padding-bottom: 2rem;
} }
.b_allmedia {
top: 100px;
margin: 1%;
z-index: 99;
}
.hide {
display: none !important;
opacity: 0;
transition: visibility 0s linear 300ms, opacity 300ms;
}
.b_allmedia {
position: fixed;
right: 0;
width: auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.b_allmedia button {
font-family: "Computer Modern Typewriter Light";
color: #ffe4fd;
box-shadow: inset 0.3rem 0.2rem 0.3rem #ffe4fd;
border-radius: 1.2rem;
font-size: 0.8rem;
line-height: 1.2rem;
align-items: center;
background-color: #393c56;
margin: 0.5rem;
border: none;
}
.b_allmedia button:hover {
box-shadow: 0.3rem 0.2rem 0.3rem #ffe4fd;
}
.bhide_chat_off {
color: #393c56 !important;
background-color: #ffe4fd !important;
box-shadow: none !important;
border: 0.03rem solid #393c56 !important;
}
.bhide_chat_off{
background: rgb(242,217,242);
background: -moz-linear-gradient(0deg, rgba(242,217,242,1) 33%, rgba(57,60,86,1) 49%, rgba(255,228,253,1) 67%, rgba(255,228,253,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(242,217,242,1) 33%, rgba(57,60,86,1) 49%, rgba(255,228,253,1) 67%, rgba(255,228,253,1) 100%);
background: linear-gradient(0deg, rgba(242,217,242,1) 33%, rgba(57,60,86,1) 49%, rgba(255,228,253,1) 67%, rgba(255,228,253,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f2d9f2",endColorstr="#ffe4fd",GradientType=1);
/*content: " OFF";*/
}
.live { .live {
margin-left: 300px; margin-left: 300px;
display: inline-block; display: inline-block;
/* height: 100%; transition: margin-left 2s;
width: 100%; */
} }
.live-flex { .live-flex {
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
@ -276,11 +329,22 @@ button.minimize:hover {
word-wrap: break-word; word-wrap: break-word;
} }
.fullscreen, .fullscreen > video, .fullscreen > #player , .fullscreen > iframe, .halfscreen > iframe, .thirdscreen > iframe { .fullscreen, .fullscreen > video, .fullscreen > iframe, .halfscreen > iframe, .thirdscreen > iframe {
width: 100%; margin: 1%;
width: 95%;
} }
.fullscreen > * { .fullscreen > * {
height: 60vh; height: 60vh;
border-radius: 0.2rem;
}
.fullscreen > img, .halfscreen > img, .thirdscreen > img {
max-width: 100% !important;
height: auto !important;
}
#showAudio > * {
height: auto !important;
} }
.halfscreen { .halfscreen {
@ -290,46 +354,22 @@ button.minimize:hover {
.halfscreen > * { .halfscreen > * {
height: 60vh; height: 60vh;
border-radius: 0.2rem;
} }
.thirdscreen { .thirdscreen {
margin: 1%;
width: 25%; width: 25%;
} }
.live > * { .thirdscreen > * {
/* touch-action: none;*/ height: 60vh;
} border-radius: 0.2rem;
.resize-drag {
width: 620px;
padding: 0.4rem 1.8rem 1.8rem 0.4rem;
margin: 1rem;
touch-action: none;
box-sizing: border-box;
box-shadow: inset -0.6rem 0rem 0.8rem #ffe4fd;
border-radius: 0.1rem 0.1rem 0.2rem 0.1rem;
position: relative;
} }
.resize-drag::before {
content: "⇱";
font-size: 2rem;
width: 1rem;
height: 1rem;
color: #393c56;
position: absolute !important;
z-index: 999;
top: 0;
left: 0;
display: block;
}
.resize-drag:hover { .live > * {
box-shadow: 0.2rem 0.2rem 0.6rem #ffe4fd; /* touch-action: none;*/
animation: corners 8s infinite alternate;
-o-animation: corners 8s infinite alternate;
-moz-animation: corners 8s infinite alternate;
-webkit-animation: corners 8s infinite alternate;
} }
@keyframes corners { @keyframes corners {
@ -426,6 +466,15 @@ content: 'PLAY';
content: 'PAUSE'; content: 'PAUSE';
} }
img {
width: 100%;
height: auto;
border-radius: 0.2rem;
max-width: 100%;
}
.img-gallery { .img-gallery {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

Write Preview
Loading…
Cancel
Save