forked from varia/web-narrowcast
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
4.3 KiB
137 lines
4.3 KiB
4 years ago
|
// SCRIPTS FOR THE NEW AUDIO PLAYER
|
||
|
|
||
|
(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 for button to hide side pannel -->
|
||
|
|
||
|
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)
|
||
|
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);
|
||
|
}
|
||
|
|
||
|
|
||
|
// src="https://vjs.zencdn.net/7.10.2/video.min.js"
|
||
|
|
||
|
// var player = videojs("#player");
|
||
|
|
||
|
|
||
|
// 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();
|
||
|
// }
|
||
|
// }
|