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. 165
      index.html
  2. 130
      narrowscripts.js
  3. 123
      narrowstyle.css

165
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>
@ -65,37 +64,58 @@
</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
<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> <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,56 +125,33 @@
<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>
-->
<!-- 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> </div>
-->
<!-- TO ACTIVATE A BELOW SECTION FOR YOUR EVENT --> <!-- JITSI -->
<!-- REMOVE THE UNCOMMENT " < ! -- " and " - - > " SIGNS -->
<!-- AND ADD THE APPROPRIATE URLS --> <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>
<!-- EXAMPLE JITSI or similar --> <!-- ESSAY -->
<!-- <div class="halfscreen hide" id="showEssay">
<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 src=""></iframe><br> ↬
</iframe> <a class="windowlinks" href="" target="_blank"> direct link to PDF</a>
--> </div>
<!-- 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 -->
<div class="fullscreen hide" id="showVideo">
<video <video
id="player" id="player"
class="video-js vjs-default-skin" class="video-js vjs-default-skin"
@ -165,9 +162,52 @@
src="https://video.vvvvvvaria.org/test.m3u8" src="https://video.vvvvvvaria.org/test.m3u8"
type="application/x-mpegURL" type="application/x-mpegURL"
/> />
</video><br> </video>
<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> <br> ↬
</div> --> <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>
<figure>
<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://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://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://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>
@ -178,5 +218,6 @@
</div> </div>
</body> </body>
</html> </html>

130
narrowscripts.js
View File

@ -56,58 +56,87 @@ $(function() {
fsidemobile(x) fsidemobile(x)
x.addListener(fsidemobile) 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 function hideshowWelcome() {
target.style.webkitTransform = var elwel = document.getElementById("showWel");
target.style.transform = elwel.classList.toggle("hide");
'translate(' + x + 'px, ' + y + 'px)';
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");
// update the posiion attributes var bether = document.getElementById("bhide_ether");
target.setAttribute('data-x', x); bether.classList.toggle("bhide_chat_off")
target.setAttribute('data-y', y); }
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")
} }
@ -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