Adding new Icecast streaming component, fixing linting

CrimeIsDown · Aug 8, 2024 · 0bf7d55 · 0bf7d55
1 parent bf7aa5d
commit 0bf7d55
Show file tree

Hide file tree

Showing 20 changed files with 369 additions and 107 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -28,6 +28,7 @@ module.exports = {
     google: true,
     rome: true,
     bootstrap: true,
+    IcecastMetadataPlayer: true,
   },
   rules: {
     'ember/no-jquery': 'off',

diff --git a/app/components/icecast-player.hbs b/app/components/icecast-player.hbs
@@ -0,0 +1,7 @@
+<div {{did-insert (fn this.initializePlayer @stream)}}>
+    <p id="icecast-metadata"></p>
+    <audio id="icecast-audio" controls>
+        Your browser does not support HTML5 audio.
+    </audio>
+    <table id="icecast-metadataQueue"></table>
+</div>
diff --git a/app/components/icecast-player.js b/app/components/icecast-player.js
@@ -0,0 +1,25 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class IcecastPlayerComponent extends Component {
+  @action
+  initializePlayer(stream) {
+    const audioElement = document.getElementById('icecast-audio');
+    const metadataEl = document.getElementById('icecast-metadata');
+
+    const onMetadata = (metadata) => {
+      metadataEl.innerHTML = `<strong>Now Playing:</strong> ${metadata['StreamTitle']}`;
+    };
+
+    new IcecastMetadataPlayer(stream, {
+      audioElement, //                  audio element in HTML
+      onMetadata, //                    called when metadata is synced with the audio
+      metadataTypes: ['icy'], //        detect ICY metadata
+      icyDetectionTimeout: 5000, //     attempt to detect ICY metadata for 5 seconds
+      enableLogging: true, //           enable error logs to the console
+      onError: (message) => {
+        metadataEl.innerHTML = message;
+      },
+    });
+  }
+}
diff --git a/app/components/incident-map.js b/app/components/incident-map.js
@@ -632,7 +632,7 @@ export default class IncidentMap extends Component {
       }
     };
 
-    const debounce = {"onMouseMove": onMouseMove};
+    const debounce = { onMouseMove: onMouseMove };
 
     this.map.on('mousemove', (e) => {
       if (e.originalEvent.buttons === 0) {

diff --git a/app/components/notification-subscription-form.js b/app/components/notification-subscription-form.js
@@ -81,12 +81,19 @@ export default class NotificationSubscriptionFormComponent extends Component {
     }
     let isJustNtfy = true;
     for (const channel of formdata.getAll('notification_channels')) {
-      if (await this.store.peekRecord('notification-channel', channel).service != 'ntfy') {
+      if (
+        (await this.store.peekRecord('notification-channel', channel)
+          .service) != 'ntfy'
+      ) {
         isJustNtfy = false;
         break;
       }
     }
-    if (formdata.get('keywords').length == 0 && !formdata.get('address') && !isJustNtfy) {
+    if (
+      formdata.get('keywords').length == 0 &&
+      !formdata.get('address') &&
+      !isJustNtfy
+    ) {
       alert('You must enter at least one keyword or address.');
       return;
     }

diff --git a/app/components/transcript-search.js b/app/components/transcript-search.js
@@ -85,7 +85,7 @@ export default class TranscriptSearchComponent extends Component {
     if (window.location.hash.startsWith('#hit-')) {
       this.selectedHit = window.location.hash.split('#hit-')[1];
     }
-    const savedSearches = localStorage.getItem('savedSearches')
+    const savedSearches = localStorage.getItem('savedSearches');
     if (savedSearches) {
       let savedSearchesArray = JSON.parse(savedSearches);
       if (!Array.isArray(savedSearchesArray)) {
@@ -329,7 +329,7 @@ export default class TranscriptSearchComponent extends Component {
     this.search.setUiState(state);
   }
 
-  @action saveSearch(event) {
+  @action saveSearch() {
     let searchName = prompt('Enter a name for this search');
     if (!searchName) {
       return;
@@ -347,7 +347,7 @@ export default class TranscriptSearchComponent extends Component {
     }
   }
 
-  @action removeSavedSearch(index, event) {
+  @action removeSavedSearch(index) {
     this.savedSearches.removeAt(index);
     try {
       localStorage.setItem('savedSearches', JSON.stringify(this.savedSearches));

diff --git a/app/router.js b/app/router.js
@@ -35,4 +35,5 @@ Router.map(function () {
     path: '/transcripts/notifications',
   });
   this.route('settings');
+  this.route('airshow');
 });
diff --git a/app/routes/airshow.js b/app/routes/airshow.js
@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class AirshowRoute extends Route {}
diff --git a/app/routes/audio.js b/app/routes/audio.js
@@ -9,12 +9,16 @@ export default class AudioRoute extends Route {
     model.streams = await response.json();
 
     try {
-      const ytResponse = await fetch('https://worker.erictendian.workers.dev/youtubelive/');
+      const ytResponse = await fetch(
+        'https://worker.erictendian.workers.dev/youtubelive/',
+      );
       const ytResponseData = await ytResponse.text();
 
       const parser = new DOMParser();
       const doc = parser.parseFromString(ytResponseData, 'text/html');
-      model.youtubeEmbedUrl = doc.querySelector('meta[property="og:video:secure_url"]').attributes.content.value;
+      model.youtubeEmbedUrl = doc.querySelector(
+        'meta[property="og:video:secure_url"]',
+      ).attributes.content.value;
     } catch (e) {
       console.error('Error fetching YouTube data', e);
     }

diff --git a/app/styles/_transcript_search.scss b/app/styles/_transcript_search.scss
@@ -44,6 +44,10 @@
   }
 }
 
+#saved-h-menu .list-group-item {
+  padding-top: 0.75rem !important;
+}
+
 .ais-Hits-item, .ais-InfiniteHits-item {
   display: block;
   margin: 0 -0.5rem;

diff --git a/app/templates/airshow.hbs b/app/templates/airshow.hbs
@@ -0,0 +1,5 @@
+{{page-title "Airshow"}}
+<div class="container">
+    <h2>Chicago Air and Water Show radio</h2>
+    <IcecastPlayer @stream="https://icecast.crimeisdown.com/airshow" />
+</div>
diff --git a/app/templates/audio.hbs b/app/templates/audio.hbs
@@ -2,22 +2,23 @@
 <div class="container">
   <div class="row">
     <div class="col-lg-6">
-      <div class="row">
-        <div class="col-md-12 d-lg-none">
-          <p><em><a href="#lookuprecording">Jump to scanner recording download</a></em></p>
-        </div>
-        <div class="col-md-12 mb-3">
-          <VirtualScanner @streams={{this.model.streams}} />
-        </div>
-        <div class="col-md-12">
-          <h3>General #ChicagoScanner feed</h3>
-          <p>Scanner feed of ISP Dist. Chicago, Metra PD, CPD Citywides, various CFD incident channels, Marine 16, and aviation UNICOM. Scan list subject to change.<br><br><a href="https://www.youtube.com/@EricTendian/live" target="_blank" rel="noopener noreferrer">View on YouTube</a></p>
-          <iframe id="youtube-player" title="YouTube scanner feed" src="{{this.model.youtubeEmbedUrl}}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-        </div>
-        <div class="col-md-12">
-          <div class="accordion" id="accordion">
-            <MapTools />
-          </div>
+      <div class="d-lg-none">
+        <p><em><a href="#lookuprecording">Jump to scanner recording download</a></em></p>
+      </div>
+      <div class="mb-3">
+        <VirtualScanner @streams={{this.model.streams}} />
+      </div>
+      <div>
+        <h3>General #ChicagoScanner feed</h3>
+        <p>Scanner feed of ISP Dist. Chicago, Metra PD, CPD Citywides, various CFD incident channels, Marine 16, and aviation UNICOM. Scan list subject to change.<br><br><a href="https://www.youtube.com/@EricTendian/live" target="_blank" rel="noopener noreferrer">View on YouTube</a></p>
+        <iframe id="youtube-player" title="YouTube scanner feed" src="{{this.model.youtubeEmbedUrl}}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+        <h3>Chicago Air and Water Show radio</h3>
+        <IcecastPlayer @stream="https://icecast.crimeisdown.com/airshow" />
+      </div>
+      <div class="mt-3">
+        <div class="accordion" id="accordion">
+          <MapTools />
         </div>
       </div>
     </div>
@@ -81,13 +82,16 @@
               <p><a href="https://openmhz.com/system/sc21102" target="_blank" rel="noopener noreferrer">STARCOM21</a></p>
             </li>
             <li>
-              <p><a href="https://openmhz.com/system/chi_oemc" target="_blank" rel="noopener noreferrer">Chicago OEMC 800MHz (NEW)</a></p>
+              <p><a href="https://openmhz.com/system/chi_oemc" target="_blank" rel="noopener noreferrer">Chicago OEMC 800MHz</a> (includes CFD)</p>
+            </li>
+            <li>
+              <p><a href="https://openmhz.com/system/chi_cfd" target="_blank" rel="noopener noreferrer">Chicago Fire Department</a> (old system, not in use usually)</p>
             </li>
             <li>
-              <p><a href="https://openmhz.com/system/chi_cfd" target="_blank" rel="noopener noreferrer">Chicago Fire Department</a></p>
+              <p><a href="https://openmhz.com/system/chi_cpd" target="_blank" rel="noopener noreferrer">Chicago Police Department</a> (including delayed encrypted feeds)</p>
             </li>
             <li>
-              <p><a href="https://openmhz.com/system/chi_cpd" target="_blank" rel="noopener noreferrer">Chicago Police Department</a></p>
+              <p><a href="https://openmhz.com/system/chisuburbs" target="_blank" rel="noopener noreferrer">Chicago Suburbs</a></p>
             </li>
             <li>
               <p><a href="https://www.broadcastify.com/calls/" target="_blank" rel="noopener noreferrer">Broadcastify Calls</a></p>

diff --git a/app/templates/components/transcript-search.hbs b/app/templates/components/transcript-search.hbs
@@ -98,7 +98,7 @@
               {{/unless}}
               {{#each this.savedSearches as |search index|}}
               <ul class="list-group list-group-horizontal pb-2">
-                <a href="{{search.url}}" class="list-group-item list-group-item-action" style="padding-top: 0.7rem">
+                <a href="{{search.url}}" class="list-group-item list-group-item-action">
                   {{search.name}}
                 </a>
                 <li class="list-group-item">
@@ -336,7 +336,7 @@
                   <p>
                     {{#if (get segment "0")}}
                     {{!-- template-lint-disable no-triple-curlies --}}
-                    <a href="{{get segment "0.filter_link"}}" title="Radio ID {{get segment "0.src"}}" {{on "click" (fn this.filterSrc (get segment "0") hit)}}>{{{get segment "0.label"}}}</a>{{#if segment.0.address}} <a href="javascript:;" data-bs-toggle="tooltip" data-bs-title="{{{get segment "0.address"}}}"><FaIcon @icon="map-marker-alt" /></a>{{/if}}:
+                    <a href="{{get segment "0.filter_link"}}" title="Radio ID {{get segment "0.src"}}" {{on "click" (fn this.filterSrc (get segment "0") hit)}}>{{{get segment "0.label"}}}</a>{{#if (get segment "0.address")}} <a href="javascript:;" data-bs-toggle="tooltip" data-bs-title="{{{get segment "0.address"}}}"><FaIcon @icon="map-marker-alt" /></a>{{/if}}:
                     {{/if}}
                     {{!-- template-lint-disable no-triple-curlies --}}
                     {{{get segment "1"}}}

diff --git a/ember-cli-build.js b/ember-cli-build.js
@@ -161,11 +161,22 @@ module.exports = function (defaults) {
   app.import('node_modules/ogv/dist/ogv.js');
   app.import('vendor/videojs-ogvjs.js');
 
-  app.import('node_modules/videojs-wavesurfer/node_modules/wavesurfer.js/dist/wavesurfer.js');
-  app.import('node_modules/videojs-wavesurfer/node_modules/wavesurfer.js/dist/plugin/wavesurfer.timeline.js');
+  app.import(
+    'node_modules/videojs-wavesurfer/node_modules/wavesurfer.js/dist/wavesurfer.js',
+  );
+  app.import(
+    'node_modules/videojs-wavesurfer/node_modules/wavesurfer.js/dist/plugin/wavesurfer.timeline.js',
+  );
   app.import('node_modules/videojs-wavesurfer/dist/videojs.wavesurfer.js');
   app.import('node_modules/videojs-wavesurfer/dist/css/videojs.wavesurfer.css');
 
+  app.import(
+    'node_modules/icecast-metadata-player/build/icecast-metadata-player-1.17.3.main.min.js',
+  );
+  app.import(
+    'node_modules/icecast-metadata-player/build/icecast-metadata-player-1.17.3.mediasource.min.js',
+  );
+
   const ogvAssets = new Funnel('node_modules/ogv/dist', {
     srcDir: '/',
     include: ['**/*.*'],
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Route from '@ember/routing/route';

		export default class AirshowRoute extends Route {}