Station listeners counter

app/assets/stylesheets/player.css

@@ -89,3 +89,19 @@
   @apply text-secondary;
   animation: pulse 1s infinite;
 }
+
+.player--listeners {
+  @apply text-white text-small w-full flex flex-row items-center bg-primary rounded-md ml-2 px-1;
+}
+
+.player--listeners--icon {
+  @apply text-white flex items-center;
+}
+
+.player--listeners--icon > svg {
+  @apply h-5;
+}
+
+.player--listeners--count {
+  @apply ml-1 font-semibold;
+}

app/channels/station_listeners_channel.rb

@@ -0,0 +1,32 @@
+class StationListenersChannel < Turbo::StreamsChannel
+  include ActionView::RecordIdentifier
+
+  after_subscribe :track_listener
+  after_unsubscribe :untrack_listener
+
+  def track_listener
+    StationTracker.track_listener(station)
+    broadcast_counter_update
+  end
+
+  def untrack_listener
+    StationTracker.untrack_listener(station)
+    broadcast_counter_update
+  end
+
+  private
+
+  def station
+    @station ||= LiveStation.find(params[:station_id])
+  end
+
+  def broadcast_counter_update
+    counter = StationTracker.current_listeners(station)
+
+    Turbo::StreamsChannel.broadcast_update_to(
+      verified_stream_name_from_params,
+      target: dom_id(station, "listeners_counter"),
+      content: counter
+    )
+  end
+end

app/lib/station_tracker.rb

@@ -0,0 +1,19 @@
+module StationTracker
+  module_function
+
+  def track_listener(station)
+    store.increment(station.id)
+  end
+
+  def untrack_listener(station)
+    store.decrement(station.id)
+  end
+
+  def current_listeners(station)
+    store.get(station.id)
+  end
+
+  def store
+    @store ||= Store.new(key_prefix: "station_")
+  end
+end

app/lib/station_tracker/store.rb

@@ -0,0 +1,36 @@
+module StationTracker
+  class Store
+    attr_reader :expiry, :key_prefix
+
+    def initialize(key_prefix:, expiry: 60 * 60 * 24)
+      @key_prefix = key_prefix
+      @expiry = expiry
+    end
+
+    def increment(key)
+      cache.increment(cache_key(key), 1)
+    end
+
+    def decrement(key)
+      cache.decrement(cache_key(key), 1)
+    end
+
+    def get(key)
+      cache.get(cache_key(key)).to_i
+    end
+
+    def reset(key)
+      cache.delete(cache_key(key))
+    end
+
+    private
+
+    def cache
+      @cache ||= Litecache.new(expiry: expiry)
+    end
+
+    def cache_key(key)
+      [key_prefix, key].join("_")
+    end
+  end
+end

app/views/icons/_user_circle.html

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
+  <path fill-rule="evenodd" d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" clip-rule="evenodd" />
+</svg>

app/views/player/_player.html.erb

@@ -24,12 +24,21 @@
   <% end %>
   <div class="player--track">
     <% if station %>
+      <%= turbo_stream_from station, channel: StationListenersChannel, data: {station_id: station.id} %>
       <% if live %>
         <div class="player--radio">
           <span class="player--signal-icon">
             <%= render "icons/signal" %>
           </span>
           <%= link_to "Live!", live_station_path, class: "player--title ml-2" %>
+          <span class="player--listeners">
+            <span class="player--listeners--icon">
+              <%= render "icons/user_circle" %>
+            </span>
+            <span class="player--listeners--count" id="<%= dom_id(station, "listeners_counter") %>">
+              <%= StationTracker.current_listeners(station) %>
+            </span>
+          </span>
         </div>
       <% else %>
         <div class="player--radio">