Skip to content

Instantly share code, notes, and snippets.

@H7-25

H7-25/plugin-mediabot.html

Created March 14, 2022 21:07
Show Gist options
  • Save H7-25/a2ec20f6a5343167de454634fde7249a to your computer and use it in GitHub Desktop.
Save H7-25/a2ec20f6a5343167de454634fde7249a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
plugin-mediabot.html
<template id="radio-controls">
<div class="radio-controls">
<div class="radio-controls-buttons">
<div class="radio-controls-button" @click="skipStation(-1)" title="Previous Station">
<i class="fa fa-fast-backward" aria-hidden="true"></i>
</div>
<div v-if="playerPlaying" class="radio-controls-button" @click="pauseStation()" title="Pause">
<i class="fa fa-pause" aria-hidden="true"></i>
</div>
<div v-else class="radio-controls-button" @click="playStation()" title="Play">
<i class="fa fa-play" aria-hidden="true"></i>
</div>
<div class="radio-controls-button" @click="skipStation(1)" title="Next Station">
<i class="fa fa-fast-forward" aria-hidden="true"></i>
</div>
<div class="radio-controls-button" @click="openStationsList()" title="Show Station List">
<i class="fa fa-th-list" aria-hidden="true"></i>
</div>
<div class="radio-controls-button radio-controls-volume" @click="">
<i v-if="playerVolume == 0" class="fa fa-volume-off fa-fw" aria-hidden="true"></i>
<i v-else-if="playerVolume >= 0.5" class="fa fa-volume-up fa-fw" aria-hidden="true"></i>
<i v-else class="fa fa-volume-down fa-fw" aria-hidden="true"></i>
<div class="radio-controls-volume-container">
<input
type="range"
min="0"
max="1"
step="0.1"
value="0.8"
class="radio-controls-slider"
@change="changeVolume(playerVolume)"
v-model="playerVolume"
orient="vertical"
>
</div>
</div>
</div>
<div :class="[stationErrored ? 'radio-controls-errored' : '']" class="radio-controls-station">
{{ stationName }}
</div>
<audio id="radio-audio" preload="none" style="display: none"></audio>
</div>
</template>
<template id="radio-stations">
<div class="radio-stations">
<div>
<div class="radio-stations-close" @click="plugin.closeStationsList()">Close</div>
</div>
<table>
<tr v-for="station in plugin.stationsList" :key="station.id">
<td><img :src="station.image"></td>
<td>
<div class="radio-stations-details">
<div class="radio-stations-controls">
<div @click="plugin.toggleStarred(station)" class="radio-stations-favorite">
<i :class="[plugin.isStarred(station) ? 'fa-star' : 'fa-star-o']" class="fa" aria-hidden="true"></i>
</div>
<div @click="plugin.playStationClose(station)" class="radio-stations-play">
<i class="fa fa-play" aria-hidden="true"></i>
</div>
</div>
<span class="radio-stations-title">{{ station.name }}</span>
<div>
<span>{{ station.description }}</span>
</div>
</div>
</td>
</tr>
</table>
</div>
</template>
<template id="radio-card">
<div class="radio-card">
<i class="fa fa-headphones" aria-hidden="true"></i>
<span>Ascolta {{ station.name }} </span>
<span @click="plugin.playStation(station)"><i class="fa fa-caret-square-o-right bot-play"></i></span>
<span><a :href="message" target="_blank"><i class="fa fa-external-link-square" style="text-decoration:none;font-weight:bold;"></i></a></span>
<span v-if="station.requests != 0" @click="requestShow()"><i class="fa fa-commenting bot-play" style="color: #FFCC00;"></i></span>
<span v-if="station.twitch" @click="mediaViewerShow()"><i class="fa fa-twitch bot-twitch" style="color: #6441a5;"></i></span>
<div class="radio-motd">
<img :src="station.image">
<div class="radio-motd-text">{{ station.description }}</div>
</div>
</div>
</template>
<template id="twitch-iframe">
<div class="twitch-container">
<i class="fa fa-twitch fa-5x" style="color: #6441a5;position:absolute;top:20px;left:20px;"></i>
<div class="twitch-iframe">
<iframe
frameborder="0"
marginwidth="0"
marginheight="0"
:src="componentProps.twitch"
height="100%"
width="100%"
scrolling="no"
></iframe>
</div>
</div>
</template>
<template id="radio-request">
<div :class="['kiwi-' + themeName + '-simple-nick', 'u-form', 'u-input', 'u-input-text', 'u-input-text--focus', 'u-input-text--reveal-value']" id="request-form">
<div class="kiwi-request-header">
<div class="kiwi-request-img-container"><img :src="componentProps.station.image"></div>
<div>
<span class="radio-request-title">{{ componentProps.station.name }} - Richieste <i class="fa fa-music"></i></span>
<br>
<span class="radio-request-description">Chiedi al Dj la tua musica preferita, se vuoi, scrivi un messaggio!</span>
</div>
</div>
<div class="u-input-text kiwi-request-input">
<div class="u-input-text-inputs">
<input class="u-input" placeholder="Inserisci la tua richiesta" type="text" v-model="requestInput">
</div>
</div>
<div class="u-input-text kiwi-request-input">
<div class="u-input-text-inputs">
<textarea class="u-input" placeholder="Inserisci il tuo messaggio" type="text" v-model="msgInput"></textarea>
</div>
</div>
<div class="u-input-text kiwi-request-button">
<div class="u-input-text-underline-active"></div>
<div class="u-input-text kiwi-request-submit">
<button :class="['u-button', 'u-button-primary', 'kiwi-welcome-simple-start']" v-on:click="onRequest" >Invia Richiesta</button>
</div>
</div>
</div>
</template>
<template id="tube-card">
<div class="radio-card">
<i class="fa fa-youtube-square" aria-hidden="true" style="color:red;"></i>
<span>Video condiviso da <a class="kiwi-nick" :data-nick="nick">{{ nick }}</a> <i class="fa fa-info-circle" aria-hidden="true" style="opacity:0.5;"></i></span>
<div class="tube-motd">
<img :src="thumbnail">
<div class="tube-motd-text">
<div class="tube-title">{{ title }}</div>
<div>
<i class="fa fa-clock-o" aria-hidden="true"></i> <span style="font-size: 0.90em;margin-right:5px;">{{ duration }}</span>
<a class="tube-channel" :href="channelLink" target="_blank"><i class="fa fa-youtube-square" aria-hidden="true" style="color:red;"></i></a>
<span style="font-size: 0.90em;margin-right:5px;">Channel</span>
<a class="tube-channel" :href="media" target="_blank"><i class="fa fa-youtube-play" aria-hidden="true" style="color:red;"></i></a>
<span style="font-size: 0.90em;">Media Play</span>
<a class="tube-channel" :href="timeline" target="_blank"><i class="fa fa-history" aria-hidden="true" style="color:var(--brand-link-normal);"></i></a>
<span style="font-size: 0.90em;">Timeline</span>
</div>
</div>
</div>
</template>
<template id="mixcloud-card">
<div class="radio-card">
<i class="fa fa-mixcloud" aria-hidden="true" style="color:#5000ff ;"></i>
<span>Mix condiviso da <a class="kiwi-nick" :data-nick="nick">{{ nick }}</a> <i class="fa fa-info-circle" aria-hidden="true" style="opacity:0.5;"></i></span>
<div class="tube-motd">
<img :src="thumbnail">
<div class="tube-motd-text">
<div class="tube-title">{{ title }}</div>
<div>
<i class="fa fa-clock-o" aria-hidden="true"></i> <span style="font-size: 0.90em;margin-right:5px;">{{ duration }}</span>
<a class="tube-channel" :href="channelLink" target="_blank"><i class="fa fa-mixcloud" aria-hidden="true" style="color:#5000ff;"></i></a>
<span style="font-size: 0.90em;margin-right:5px;">{{ dj }}</span>
<a class="tube-channel" :href="media" target="_blank"><i class="fa fa-mixcloud" aria-hidden="true" style="color:#5000ff;"></i></a>
<span style="font-size: 0.90em;">Media Play</span>
<a class="tube-channel" :href="timeline" target="_blank"><i class="fa fa-history" aria-hidden="true" style="color:var(--brand-link-normal);"></i></a>
<span style="font-size: 0.90em;">Timeline</span>
</div>
</div>
</div>
</template>
<script>
kiwi.plugin('radio', function(kiwi, log) {
setDefaultSetting('url', 'stations.json');
setDefaultSetting('volume', '0.8');
setDefaultSetting('starred', []);
setDefaultSetting('active', '');
setDefaultSetting('reloadOnOpen', false);
var radioControlsComponent = null;
var stationsList = [];
loadStations();
function fancyTimeFormat(duration) {
// Hours, minutes and seconds
var hrs = ~~(duration / 3600);
var mins = ~~((duration % 3600) / 60);
var secs = ~~duration % 60;
// Output like "1:01" or "4:03:59" or "123:03:59"
var ret = "";
if (hrs > 0) {
ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
}
ret += "" + mins + ":" + (secs < 10 ? "0" : "");
ret += "" + secs;
return ret;
}
function convertDuration(t){
//dividing period from time
var x = t.split('T'),
duration = '',
time = {},
period = {},
//just shortcuts
s = 'string',
v = 'variables',
l = 'letters',
// store the information about ISO8601 duration format and the divided strings
d = {
period: {
string: x[0].substring(1,x[0].length),
len: 4,
// years, months, weeks, days
letters: ['Y', 'M', 'W', 'D'],
variables: {}
},
time: {
string: x[1],
len: 3,
// hours, minutes, seconds
letters: ['H', 'M', 'S'],
variables: {}
}
};
//in case the duration is a multiple of one day
if (!d.time.string) {
d.time.string = '';
}
for (var i in d) {
var len = d[i].len;
for (var j = 0; j < len; j++) {
d[i][s] = d[i][s].split(d[i][l][j]);
if (d[i][s].length>1) {
d[i][v][d[i][l][j]] = parseInt(d[i][s][0], 10);
d[i][s] = d[i][s][1];
} else {
d[i][v][d[i][l][j]] = 0;
d[i][s] = d[i][s][0];
}
}
}
period = d.period.variables;
time = d.time.variables;
time.H += 24 * period.D +
24 * 7 * period.W +
24 * 7 * 4 * period.M +
24 * 7 * 4 * 12 * period.Y;
if (time.H) {
duration = time.H + ':';
if (time.M < 10) {
time.M = '0' + time.M;
}
}
if (time.S < 10) {
time.S = '0' + time.S;
}
duration += time.M + ':' + time.S;
return duration;
}
function loadStations() {
// get our station list
var xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function onLoad(temp) {
if (xmlhttp.status !== 200) {
console.error('plugin-radio: error loading stations list');
return
}
try {
var json = JSON.parse(xmlhttp.responseText);
if (!json || json.length === 0) {
return;
}
} catch (err) {
console.error('plugin-radio: error parsing stations list:', err);
}
try {
if (radioControlsComponent === null) {
createComponents();
}
radioControlsComponent.stationsList = json;
} catch (err) {
console.error('plugin-radio: error creating components:', err);
}
}
xmlhttp.open('GET', kiwi.state.setting('plugin-radio.url'), true);
xmlhttp.send();
}
function createComponents() {
radioControlsComponent = new kiwi.Vue({
template: '#radio-controls',
data: function data() {
return {
stationsList: [],
playerElement: null,
playerPlaying: false,
playerVolume: 0,
playerMute: false,
stationActive: null,
stationErrored: false,
stationFavourites: []
};
},
mounted: function mounted() {
this.playerVolume = kiwi.state.setting('plugin-radio.volume');
this.checkActiveStation();
},
computed: {
stationName: function stationName() {
return this.stationActive ? this.stationActive.name : 'No Station Selected';
}
},
methods: {
playStation: function playStation(station) {
if (!this.playerElement) {
this.playerElement = document.getElementById('radio-audio');
this.playerElement.addEventListener('error', function onError(event) {
this.playerPlaying = false;
this.stationErrored = true;
});
}
// if there is not a station attempt to play the active station
if (!station) {
if (this.stationActive) {
station = this.stationActive;
} else {
// random station
station = this.stationsList[Math.floor(Math.random() * this.stationsList.length)];
}
}
this.playerElement.src = station.source;
this.makeStationActive(station);
this.playerElement.play();
this.playerPlaying = true;
},
playStationClose: function playStationClose(station) {
this.playStation(station);
if (kiwi.state.ui.is_narrow) {
kiwi.showView(null);
}
},
pauseStation: function pauseStation() {
this.playerElement.pause();
this.playerPlaying = false;
},
changeVolume: function changeVolume(volume) {
kiwi.state.setting('plugin-radio.volume', volume);
this.setVolume(volume)
},
setVolume: function setVolume(volume) {
if (!this.playerElement) {
return
}
this.playerElement.volume = parseFloat(volume);
},
makeStationActive: function makeStationActive(station) {
this.stationActive = station;
this.stationErrored = false;
kiwi.state.setting('plugin-radio.active', station.name);
},
skipStation: function skipStation(direction) {
// decide if we are skipping through stared or station list
var stations = this.getStarred();
if (stations.length <= 1) {
stations = this.stationsList;
}
var stationIdx = this.getStationIdx(stations, this.stationActive);
var playIdx = direction > 0 ? 0 : stations.length - 1;
if (stationIdx !== null) {
if (stationIdx + direction > stations.length - 1) {
playIdx = 0;
} else if (stationIdx + direction < 0) {
playIdx = stations.length - 1;
} else {
playIdx = stationIdx + direction;
}
}
var station = stations[playIdx];
if (this.playerPlaying) {
this.playStation(station);
} else {
this.makeStationActive(station);
}
},
getStationIdx: function getStationIdx(stations, station) {
if (!station) {
return -1;
}
for (var i in stations) {
var item = stations[i];
if (item.name === station.name) {
return parseFloat(i);
}
}
return null
},
getActive: function getActive() {
var active = kiwi.state.setting('plugin-radio.active');
if (!active) {
return;
}
for (var i in this.stationsList) {
var station = this.stationsList[i];
if (station.name === active) {
return station;
}
}
},
getStarred: function getStarred() {
var starred = kiwi.state.setting('plugin-radio.starred');
var out = [];
for (var i in starred) {
var name = starred[i];
for (var ii in this.stationsList) {
var station = this.stationsList[ii];
if (station.name === name) {
out.push(station);
break;
}
}
}
return out;
},
toggleStarred: function toggleStarred(station) {
var starred = kiwi.state.setting('plugin-radio.starred').slice();
if (this.isStarred(station)) {
for (var i = starred.length - 1; i >= 0; i--) {
if (starred[i] === station.name) {
starred.splice(i, 1);
break;
}
}
} else {
starred.push(station.name);
}
kiwi.state.setting('plugin-radio.starred', (starred.length > 0) ? starred : null);
},
isStarred: function isStarred(station) {
var starred = kiwi.state.setting('plugin-radio.starred');
for (var i in starred) {
if (starred[i] === station.name) {
return true;
}
}
return false;
},
checkActiveStation: function checkActiveStation() {
if (this.stationActive) {
return;
}
var active = this.getActive();
if (active) {
this.makeStationActive(active);
return
}
var starred = this.getStarred();
if (starred.length > 0) {
this.makeStationActive(starred[0]);
}
},
openStationsList: function openStationsList() {
if (kiwi.state.setting('plugin-radio.reloadOnOpen')) {
loadStations();
}
kiwi.showView('RadioStations');
if (kiwi.state.ui.is_narrow) {
kiwi.state.$emit('statebrowser.hide');
}
},
closeStationsList: function closeStationsList() {
kiwi.showView(null);
}
}
});
radioControlsComponent.$mount();
kiwi.addUi('browser', radioControlsComponent.$el);
var radioStationsComponent = {
template: '#radio-stations',
data: function data() {
return {
plugin: radioControlsComponent,
};
}
};
kiwi.addView('RadioStations', radioStationsComponent);
var twitchIframe = kiwi.Vue.extend({
template: '#twitch-iframe',
props: ['componentProps'],
});
var radioRequest = kiwi.Vue.extend({
template: '#radio-request',
props: ['componentProps'],
data: function data() {
return {
requestInput:'',
msgInput: '',
stationID: this.componentProps.stationID,
station : this.station,
}
},
computed: {
themeName: function() {
return kiwi.themes.currentTheme().name.toLowerCase();
}
},
methods: {
onRequest: function () {
let network = window.kiwi.state.getActiveNetwork();
let msgtxt = this.requestInput.replace('|', ' ') + '|' + this.msgInput.replace('|', ' ');
m = new network.ircClient.Message('PRIVMSG', 'MediaBot', msgtxt);
m.prefix = network.nick;
m.tags['+simosnap.org/radio_request'] = this.stationID;
network.ircClient.raw(m);
kiwi.state.$emit('mediaviewer.hide');
}
},
});
var radioCard = kiwi.Vue.extend({
template: '#radio-card',
props: ['plugin', 'station', 'message', 'stationID', 'twitch'],
methods: {
mediaViewerShow: function mediaViewerShow() {
//kiwi.state.$emit('mediaviewer.hide');
kiwi.Vue.nextTick(() => { kiwi.state.$emit('mediaviewer.show', { component: twitchIframe, componentProps: { twitch: this.twitch } }) });
},
requestShow: function requestShow() {
//kiwi.state.$emit('mediaviewer.hide');
kiwi.Vue.nextTick(() => { kiwi.state.$emit('mediaviewer.show', { component: radioRequest, componentProps: { stationID: this.stationID, station: this.station} }) });
},
},
});
var tubeCard = kiwi.Vue.extend({
template: '#tube-card',
props: [ 'title', 'id', 'link','duration','channelLink','channelTitle', 'media', 'thumbnail','nick','timeline'],
mounted: function data() {
},
});
var mixcloudCard = kiwi.Vue.extend({
template: '#mixcloud-card',
props: [ 'title', 'id', 'link', 'dj', 'duration','channelLink', 'media', 'thumbnail','nick','timeline'],
mounted: function data() {
},
});
kiwi.on('message.new', function (event) {
var message = event.message;
if (message.nick !== 'MediaBot') {
return;
}
if (message.type !== 'privmsg' || !message.tags || !message.tags['+simosnap.org/radio_station']) {
// always return asap
return;
}
var stationData = message.tags['+simosnap.org/radio_station'].split(";");
var stationName = stationData[0];
var stationID = stationData[1];
//console.log(stationID);
var station = radioControlsComponent.stationsList.find(function (station) {
return station.name === stationName;
});
if (!station) {
console.log('station not found');
return;
}
var twitch = station.twitch;
var dj = station.dj;
var component = new radioCard({
propsData: {
plugin: radioControlsComponent,
station: station,
stationID: stationID,
message: 'https://media.simosnap.com/player/'+stationID,
twitch: 'https://player.twitch.tv/?channel='+twitch+'&parent='+window.location.hostname,
},
});
component.$mount();
message.bodyTemplate = component;
});
kiwi.on('message.new', function (event) {
var message = event.message;
if (message.nick !== 'MediaBot') {
return;
}
if (message.type !== 'privmsg' || !message.tags || !message.tags['+simosnap.org/youtube']) {
// always return asap
return;
}
//console.log(encodeURIComponent(event.buffer.name));
var text = message.message.split(' *** ');
var title = text[1].trim();
var tubeData = message.tags['+simosnap.org/youtube'].split(";");
var tubeID = tubeData[0];
var duration = tubeData[1];
var tubeChannelID = tubeData[2];
var tubeChannelTitle = tubeData[3];
var media = 'https://media.simosnap.com/youtube/' + tubeID;
var nick = tubeData[4];
var timeline = 'https://www.simosnap.org/channel/' +encodeURIComponent(event.buffer.name) + '/profile#mediabot';
var component = new tubeCard({
propsData: {
title: title,
id: tubeID,
link: 'https://www.youtube.com/embed/' + tubeID,
media: 'https://media.simosnap.com/youtube/' + tubeID,
duration: convertDuration(duration),
channelLink: 'https://www.youtube.com/channel/' + tubeChannelID,
channelTitle: tubeChannelTitle,
thumbnail: 'https://i.ytimg.com/vi/' + tubeID + '/default.jpg',
nick: nick,
timeline: timeline,
},
});
component.$mount();
message.bodyTemplate = component;
});
kiwi.on('message.new', function (event) {
var message = event.message;
if (message.nick !== 'MediaBot') {
return;
}
if (message.type !== 'privmsg' || !message.tags || !message.tags['+simosnap.org/mixcloud']) {
// always return asap
return;
}
//console.log(encodeURIComponent(event.buffer.name));
var text = message.message.split(' *** ');
var data = text[1].split('[*]');
var title = data[0].trim();
var dj = data[1].trim();
var mixcloudData = message.tags['+simosnap.org/mixcloud'].split(";");
var mixcloudPath = mixcloudData[0];
var duration = mixcloudData[1];
var media = 'https://media.simosnap.com/mixcloud/' + mixcloudPath;
var nick = mixcloudData[2];
var thumbnail = mixcloudData[3];
var timeline = 'https://www.simosnap.org/channel/' +encodeURIComponent(event.buffer.name) + '/profile#mediabot';
var cdata = mixcloudPath.split('/');
var mixcloudChannel = cdata[0];
var component = new mixcloudCard({
propsData: {
title: title,
id: mixcloudPath,
link: 'https://www.mixcloud.com/' + mixcloudPath,
media: 'https://media.simosnap.com/mixcloud/' + mixcloudPath,
duration: fancyTimeFormat(duration),
channelLink: 'https://www.mixcloud.com/' + mixcloudChannel,
thumbnail: thumbnail,
nick: nick,
dj: dj,
timeline: timeline,
},
});
component.$mount();
message.bodyTemplate = component;
});
}
function setDefaultSetting(name, val) {
if (!kiwi.state.getSetting('settings.plugin-radio.' + name)) {
kiwi.state.setSetting('settings.plugin-radio.' + name, val);
}
}
});
</script>
<style>
.radio-controls {
padding-bottom: 10px;
}
.radio-controls-buttons {
display: inline-block;
}
.radio-controls-button {
display: inline-block;
cursor: pointer;
padding: 2px;
margin-right: 10px;
}
.radio-controls-button:last-of-type {
margin-right: 0;
}
.radio-controls-volume {
position: relative;
}
.radio-controls-volume:hover .radio-controls-volume-container {
display: inherit;
}
.radio-controls-volume-container {
top: -92px;
left: -6px;
display: none;
position: absolute;
}
.radio-controls-slider {
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* WebKit */
width: 6px;
height: 80px;
margin: 12px;
}
.radio-controls-errored {
color: #F00;
}
.radio-stations {
display: flex;
flex-direction: column;
padding: 20px;
height: 100%;
overflow-x: scroll;
}
.radio-stations img {
margin: 0 7px;
margin-top: 7px;
max-height: 100px;
max-width: 200px;
}
.radio-stations table {
border-collapse: separate;
border-spacing: 0 10px;
}
.radio-stations table tr {
background-color: rgba(128, 128, 128, 0.2);
text-align: center;
}
.radio-stations table tr > td:last-of-type {
width: 100%;
text-align: left;
}
.radio-stations-details {
height: 100%;
min-height: 116px;
display: flex;
flex-direction: column;
justify-content: center;
}
.radio-stations-play {
display: inline-block;
padding: 2px;
cursor: pointer;
}
.radio-stations-favorite {
display: inline-block;
padding: 2px;
cursor: pointer;
}
.radio-stations-title {
font-size: 1.3em;
}
.radio-stations-close {
display: none;
padding: 0 6px;
float: right;
color: #fff;
font-weight: 600;
background: #c00;
}
.bot-play-button {
background: var(--brand-primary);
border-radius: 5px;
padding: 2px;
font-size: 0.75em;
line-height: 1em;
color: white;
font-weight: bold;
}
.bot-play-button:hover {
background: var(--brand-link--hover);
}
.bot-play, .bot-twitch, .bot-play-button {
cursor: pointer;
}
.bot-play:hover {
opacity: 0.5;
}
.radio-motd , .tube-motd {
display: flex; width:480px; height:40px; max-height: 40px; border:1px solid rgba(0,0,0,0.2);border-radius:5px;
align-items: center;
background: rgba(204, 204, 204, 0.15);
margin-bottom:5px;
}
.radio-motd a , .tube-motd a{
cursor: pointer;
}
.radio-motd img {
margin-right: 0.25em;
margin-left:2px;
width:36px;height:36px;
}
.tube-motd img {
margin-right: 0.25em;
margin-left:2px;
height:36px;
}
.radio-motd-text , .tube-motd-text {
font-size: 90%;
line-height:1.25em;
}
.tube-motd-text {
display: flex;
flex-direction: column;
width: 100%;
}
.tube-title {
font-weight: 500;
overflow: hidden;
white-space: nowrap;
width: 424px;
text-overflow: ellipsis;
}
.tube-channel {
border-radius: 5px;
}
.tube-channel a {
color: white;
}
.twitch-container {
display:flex;
justify-content:center;
width: 100%;
height:100%;
background: black;
}
.twitch-iframe {
width: 480px !important;
height:340px !important;
position: relative;
cursor: pointer;
top:0px;
margin:0px;
padding:0px;
box-sizing: border-box;
background: black;
}
#request-form {
height:auto;
width:480px;
display:flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
margin:0 auto;
1px solid rgba(0,0,0,0.2);border-radius:5px;
margin-top:10px;
margin-bottom:10px;
box-sizing: border-box;
background: rgba(204, 204, 204, 0.15);
}
.kiwi-request-header {
width: 460px;
max-width:468px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
box-sizing: border-box;
margin-top:10px;
height: 48px;
display:flex;
flex-direction: row;
align-content: center;
align-items: center;
line-height: 1.25em;
}
.kiwi-request-img-container {
width: 48px;
height: 48px;
margin-right: 5px;
}
.kiwi-request-img-container img {
width: 48px;
height: 48px;
border-radius:5px;
}
.radio-request-title {
font-weight: bold;
}
.kiwi-request-input {
width: 460px;
max-width:460px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.kiwi-request-input .u-input-text-inputs {
background: rgba(204, 204, 204, 0.15);
}
.kiwi-request-input .u-input-text-inputs input, .kiwi-request-input .u-input-text-inputs textarea {
background: var(--brand-default-bg);
}
.kiwi-request-button {
width: 460px;
max-width:460px;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px !important;
box-sizing: border-box;
background:transparent;
}
.kiwi-request-submit {
margin-bottom: 0px;
background:transparent;
}
#request-form .input-text-underline {
width:460px;
box-sizing: border-box;
}
@media screen and (max-width: 769px) {
.radio-stations-close {
display: inline-block;
}
.radio-motd , .tube-motd {
width:100%;
}
.tube-title {
width: calc(100% - 56px);
}
.twitch-iframe {
width: 100% !important;
border:0px;
}
#request-form, .kiwi-request-header, .kiwi-request-input , .kiwi-request-button {
width: 100%;
}
#request-form {
margin:10px;
padding: 0px;
border: 0px;
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment