varia
/
web-narrowcast
14
0
Fork 1
Code Issues 11 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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 199
      index.html
  2. 138
      narrowscripts.js
  3. 123
      narrowstyle.css

199
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'>
<!-- 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="interact.min.js"></script>
<script type="text/javascript" src="narrowscripts.js"></script>
</head>
<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>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 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 -->
<!-- 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>
<!-- CHAT INTERFACE
<div class="chat">
<!-- CHAT -->
<div class="chat halfscreen hide" id="showChat">
<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>
-->
<!-- ETHERPAD IFRAME
<div class="halfscreen">
<!-- ETHERPAD -->
<div class="halfscreen hide" id="showEther">
<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> -->
<a class="windowlinks" href="https://pad.vvvvvvaria.org/read_repair_supreme_connections" target="_blank"> direct to pad </a>
</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
<span class="audio-stream">
<!-- AUDIO -->
<div class="audio-stream fullscreen hide" id="showAudio">
<audio id="player" preload="none" src="https://ice.suroh.tk/meander "> </audio>
<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>
</div>
<span class="audio-link"> ↬ <a class="windowlinks" href="https://ice.suroh.tk/meander " target="_blank"> direct link to audio</a></span>
</span>
-->
<span class="audio-link"> ↬ <a class="windowlinks" href="https://ice.suroh.tk/meander " target="_blank"> direct link to audio! </a></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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
</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> -->
<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 *</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>
</body>
</html>

138
narrowscripts.js
View File

@ -56,59 +56,88 @@ $(function() {
fsidemobile(x)
x.addListener(fsidemobile)
// SCRIPT DRAG AND RESIZE
// library: https://interactjs.io/docs/installation#cdn-streamlined
// needs embed <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 and https://codepen.io/zz85/pen/gbOoVP
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);
}
function hideshowWelcome() {
var elwel = document.getElementById("showWel");
elwel.classList.toggle("hide");
var bwel = document.getElementById("bhide_wel");
bwel.classList.toggle("bhide_chat_off")
}
function hideshowChat() {
var elchat = document.getElementById("showChat");
elchat.classList.toggle("hide");
var bchat = document.getElementById("bhide_chat");
bchat.classList.toggle("bhide_chat_off")
}
function hideshowPad() {
var elether = document.getElementById("showEther");
elether.classList.toggle("hide");
var bether = document.getElementById("bhide_ether");
bether.classList.toggle("bhide_chat_off")
}
function hideshowAudio() {
var elau = document.getElementById("showAudio");
elau.classList.toggle("hide");
var bau = document.getElementById("bhide_au");
bau.classList.toggle("bhide_chat_off")
}
function hideshowJitsi() {
var eljit = document.getElementById("showJit");
eljit.classList.toggle("hide");
var bjit = document.getElementById("bhide_jit");
bjit.classList.toggle("bhide_chat_off")
}
function hideshowEssay() {
var eless = document.getElementById("showEssay");
eless.classList.toggle("hide");
var bess = document.getElementById("bhide_ess");
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"
@ -134,3 +163,6 @@ $(function() {
// myAudio.pause();
// }
// }

123
narrowstyle.css
View File

@ -86,7 +86,7 @@ p.about {
position: fixed;
top: 0;
right: 0;
margin: 1rem;
margin: 1%;
color: #ffffe5;
z-index: 99;
max-width: 80px;
@ -254,14 +254,67 @@ button.minimize:hover {
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 {
margin-left: 300px;
display: inline-block;
/* height: 100%;
width: 100%; */
transition: margin-left 2s;
}
.live-flex {
display: flex;
box-sizing: border-box;
@ -276,11 +329,22 @@ button.minimize:hover {
word-wrap: break-word;
}
.fullscreen, .fullscreen > video, .fullscreen > #player , .fullscreen > iframe, .halfscreen > iframe, .thirdscreen > iframe {
width: 100%;
.fullscreen, .fullscreen > video, .fullscreen > iframe, .halfscreen > iframe, .thirdscreen > iframe {
margin: 1%;
width: 95%;
}
.fullscreen > * {
height: 60vh;
border-radius: 0.2rem;
}
.fullscreen > img, .halfscreen > img, .thirdscreen > img {
max-width: 100% !important;
height: auto !important;
}
#showAudio > * {
height: auto !important;
}
.halfscreen {
@ -290,46 +354,22 @@ button.minimize:hover {
.halfscreen > * {
height: 60vh;
border-radius: 0.2rem;
}
.thirdscreen {
margin: 1%;
width: 25%;
}
.live > * {
/* touch-action: none;*/
}
.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;
.thirdscreen > * {
height: 60vh;
border-radius: 0.2rem;
}
.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 {
box-shadow: 0.2rem 0.2rem 0.6rem #ffe4fd;
animation: corners 8s infinite alternate;
-o-animation: corners 8s infinite alternate;
-moz-animation: corners 8s infinite alternate;
-webkit-animation: corners 8s infinite alternate;
.live > * {
/* touch-action: none;*/
}
@keyframes corners {
@ -426,6 +466,15 @@ content: 'PLAY';
content: 'PAUSE';
}
img {
width: 100%;
height: auto;
border-radius: 0.2rem;
max-width: 100%;
}
.img-gallery {
display: flex;
flex-direction: row;

Write Preview
Loading…
Cancel
Save