commit cbc6a366cc7068675f0c6644991168ea728bf151
parent 2b5e651922e30196026e662c7720a5a6fb089279
Author: Nirmal Kumar R <tildezero@gmail.com>
Date: Tue, 19 Mar 2024 18:53:57 +0530
New design and functionality
Diffstat:
| M | emptyfm.js | | | 32 | +++++++++++++++++++++----------- |
| M | index.html | | | 58 | ++++++++++++++++++++++++++++++++++++++++++++-------------- |
2 files changed, 65 insertions(+), 25 deletions(-)
diff --git a/emptyfm.js b/emptyfm.js
@@ -1,9 +1,9 @@
let player;
-document.addEventListener('DOMContentLoaded', function () {
- player = videojs('emptyfm');
- player.play();
-});
+// document.addEventListener('DOMContentLoaded', function () {
+// player = videojs('emptyfm');
+// player.play();
+// });
async function fetchFMStations() {
let countrySelect = document.getElementById("countryCode");
@@ -30,9 +30,19 @@ async function fetchFMStations() {
const response = await fetch("https://de1.api.radio-browser.info/json/stations/search?" + queryParams);
const stations = await response.json();
- console.log(stations);
-
- changeSource(stations[1].url);
+
+ let fmList = document.getElementById("fmlist");
+
+ fmList.InnerHTML = "";
+ for (var k in stations) {
+ let atag = document.createElement("a");
+ atag.className = "fmitem";
+ atag.href = stations[k].url;
+ atag.innerText = stations[k].name;
+ atag.onclick = () => alert(atag.href);
+
+ fmList.appendChild(atag);
+ }
}
function changeSource(url) {
@@ -45,10 +55,10 @@ function listCountries() {
fetch('./iso-3166-1-alpha2-countrycode.json')
.then((response) => response.json())
.then((json) => {
+ let selectElem = document.getElementById("countryCode");
+
for (var k in json) {
if (json.hasOwnProperty(k)) {
- let selectElem = document.getElementById("countryCode");
-
let option = document.createElement("option");
option.text = json[k];
option.value = k;
@@ -63,10 +73,10 @@ function listLanguages() {
fetch('./iso-639-lang.json')
.then((response) => response.json())
.then((json) => {
+ let selectElem = document.getElementById("languages");
+
for (var k in json) {
if (json.hasOwnProperty(k)) {
- let selectElem = document.getElementById("languages");
-
let option = document.createElement("option");
option.text = json[k];
option.value = k;
diff --git a/index.html b/index.html
@@ -6,25 +6,48 @@
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
<style>
body {
- max-width: 1080px;
- margin: 0 auto;
- padding: 2.5em;
+ margin: 0;
+ padding: 0;
font-family: sans-serif;
font-size: 17px;
color: #222;
background-color: #FCE3A5;
}
- header {
- margin: 2em auto;
- padding: 1em;
- border: 3px solid #444;
+ .logo {
+ padding: 0.5em;
+ border-bottom: 3px solid #444;
+ }
+
+ header,
+ .fmstations {
+ position: fixed;
+ width: 300px;
+ height: 100vh;
+ margin: 0;
+ padding: 0;
+ border-right: 3px solid #444;
background-color: #E97C7C;
box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .fmstations {
+ background-color: transparent;
+ width: 240px;
+ margin-left: 300px;
+ overflow-x: hidden;
+ overflow-y: auto;
+ }
+
+ .form-item,
+ .fmstations a {
+ margin: 0.7em 0.5em;
}
- .form-item {
- margin: 1em;
+ a {
+ color: #000;
}
.form-item:last-child {
@@ -33,6 +56,7 @@
select,
button {
+ width: 100%;
height: 32px;
font-size: 17px;
box-sizing: border-box;
@@ -45,6 +69,10 @@
color: white;
cursor: pointer;
}
+
+ #emptyfm {
+ margin-left: 500px;
+ }
</style>
</head>
<body>
@@ -71,11 +99,16 @@
<button onclick="fetchFMStations()">Find stations</button>
</div>
</header>
-
+
+ <div class="fmstations" id="fmlist">
+ <a href="/">Kodai FM</a>
+ </div>
<video
id="emptyfm"
- class="video-js vjs-default-skin vjs-16-9"
+ class="video-js vjs-default-skin"
+ width="300px"
+ height="300px"
controls
preload="auto"
poster="https://img.freepik.com/free-photo/radio-nature-concept_23-2150246091.jpg?w=740&t=st=1710837307~exp=1710837907~hmac=406857451731b48b11d0cb06346e6346e3891e5392c09cb977e77901e6432826"
@@ -83,9 +116,6 @@
muted="muted"
data-setup="{}"
>
- <source
- src="https://air.pc.cdn.bitgravity.com/air/live/pbaudio051/playlist.m3u8"
- type="application/x-mpegURL">
</video>
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
