Veue 486 audience view show VOD badges when broadcast finishes

app/helpers/videos_helper.rb

@@ -72,4 +72,8 @@ def seconds_to_time(seconds)
 
     [seconds / 3600, seconds / 60 % 60, seconds % 60].map { |t| t.to_s.rjust(2, "0") }.join(":")
   end
+
+  def video_views
+    current_video.video_views.count
+  end
 end

app/javascript/controllers/audience/header_bar_controller.ts

@@ -1,6 +1,8 @@
 import { Controller } from "stimulus";
 import { NavigationUpdate } from "controllers/broadcast/browser_controller";
 import { VideoEventProcessor } from "helpers/event/event_processor";
+import { showHideWhenLive } from "helpers/video_helpers";
+import { StreamTypeChangedEvent } from "../audience_view_controller";
 
 export default class HeaderBarController extends Controller {
   static targets = ["addressInput"];
@@ -10,6 +12,11 @@ export default class HeaderBarController extends Controller {
     VideoEventProcessor.subscribeTo("BrowserNavigation", (event) => {
       this.processNavigationEvent(event.detail.data);
     });
+
+    showHideWhenLive();
+    document.addEventListener(StreamTypeChangedEvent, () => {
+      showHideWhenLive();
+    });
   }
 
   private processNavigationEvent(navigationUpdate: NavigationUpdate) {

app/javascript/controllers/audience_view_controller.ts

@@ -15,6 +15,9 @@ import { startMuxData } from "controllers/audience/mux_integration";
 import { isProduction } from "util/environment";
 import { postForm } from "util/fetch";
 import { BroadcastVideoLayout } from "types/video_layout";
+import { VideoState } from "types/video_state";
+
+export const StreamTypeChangedEvent = "StreamTypeChanged";
 
 type StreamType = "upcoming" | "live" | "vod";
 export default class extends BaseController {
@@ -97,6 +100,10 @@ export default class extends BaseController {
     }, 60 * 1000);
 
     this.subscribeToAuthChange();
+
+    VideoEventProcessor.subscribeTo("StateChange", (event: CustomEvent) => {
+      this.processVideoStateChange(event.detail);
+    });
   }
 
   authChanged(): void {
@@ -161,6 +168,14 @@ export default class extends BaseController {
     this.element.className = "content-area";
   }
 
+  private processVideoStateChange(videoState: VideoState): void {
+    this.streamType = videoState.state === "finished" ? "vod" : "live";
+    this.data.set("stream-type", this.streamType);
+    if (videoState.state === "finished") {
+      document.dispatchEvent(new CustomEvent(StreamTypeChangedEvent));
+    }
+  }
+
   set state(state: string) {
     this.data.set("state", state);
 

app/javascript/controllers/authentication_controller.ts

@@ -3,6 +3,7 @@ import IntlTelInput from "intl-tel-input";
 import "intl-tel-input/build/css/intlTelInput.min.css";
 import { secureFormFetch } from "util/fetch";
 import { showHideByLogin } from "helpers/authentication_helpers";
+import { showHideWhenLive } from "helpers/video_helpers";
 
 export default class extends BaseController {
   static targets = [
@@ -97,6 +98,7 @@ export default class extends BaseController {
       }
       this.emitAuthChange();
       showHideByLogin();
+      showHideWhenLive();
       this.modalTarget.style.display = "none";
     } else if (response.status == 200) {
       // Need to show the modal again

app/javascript/controllers/chat/send_message_controller.ts

@@ -3,16 +3,20 @@ import { Controller } from "stimulus";
 import { getChannelId } from "helpers/channel_helpers";
 import { currentUserId } from "helpers/authentication_helpers";
 import { displayChatMessage } from "helpers/chat_helpers";
+import { showHideWhenLive } from "helpers/video_helpers";
+import { StreamTypeChangedEvent } from "../audience_view_controller";
 
 export default class extends Controller {
   static targets = ["messageInput"];
+
   element: HTMLElement;
   private messageInputTarget!: HTMLElement;
   private lastMessageFromUserId: string;
   private userId: string;
 
   connect(): void {
     const bodyDataset = document.body.dataset;
+
     this.messageInputTarget.addEventListener("focus", () => {
       bodyDataset["keyboard"] = "visible";
       setTimeout(function () {
@@ -26,13 +30,19 @@ export default class extends Controller {
     );
 
     this.userId = currentUserId();
+
+    showHideWhenLive();
+    document.addEventListener(StreamTypeChangedEvent, () => {
+      showHideWhenLive();
+    });
   }
 
   fallBackContentEditable(): void {
     if (!this.messageInputTarget.isContentEditable) {
       this.messageInputTarget.contentEditable = "true";
     }
   }
+
   chatBoxKeyDown(event: KeyboardEvent): void {
     if (!event.shiftKey && event.key === "Enter") {
       event.preventDefault();

app/javascript/helpers/authentication_helpers.ts

@@ -34,12 +34,13 @@ function hideLoginElements(): void {
     });
 }
 
-function visibilityOfDataElement(
+export function visibilityOfDataElement(
   dataElementName: HTMLElement,
-  hidden: boolean
+  hidden: boolean,
+  visibility: string = "block"
 ): void {
   dataElementName.setAttribute(
     "style",
-    hidden ? "display: none;" : "display: block;"
+    hidden ? "display: none;" : `display: ${visibility};`
   );
 }

app/javascript/helpers/event/live_event_manager.ts

@@ -40,6 +40,7 @@ export default class LiveEventManager implements EventManagerInterface {
       await this.reload();
     }
     VideoEventProcessor.addEvent(data);
+
     if (data.viewers) {
       document.dispatchEvent(
         new CustomEvent(ViewerCountUpdateEvent, { detail: data.viewers })

app/javascript/helpers/video_helpers.ts

@@ -1,3 +1,8 @@
+import {
+  visibilityOfDataElement,
+  currentUserId,
+} from "./authentication_helpers";
+
 export function getVideoId(): string {
   return document
     .querySelector("*[data-video-id]")
@@ -30,3 +35,38 @@ export function getVideoVisibility(): Visibility {
 function getVideoVisibilityElement(): HTMLElement {
   return document.querySelector("*[data-video-visibility]");
 }
+
+export function showHideWhenLive() {
+  showStreamElements();
+  hideStreamElements();
+}
+
+export function currentStreamType(): string | undefined {
+  const element = document.querySelector("*[data-audience-view-stream-type]");
+  return element?.getAttribute("data-audience-view-stream-type");
+}
+
+function showStreamElements() {
+  let vodStream = currentStreamType() !== "vod";
+  document
+    .querySelectorAll("*[data-show-when-live]")
+    .forEach((element: HTMLElement) => {
+      const showOnAudience = element.dataset.hasOwnProperty("showOnAudience");
+      vodStream = showOnAudience ? vodStream : vodStream && !!currentUserId();
+
+      visibilityOfDataElement(element, !vodStream, "flex");
+    });
+}
+
+function hideStreamElements() {
+  let vodStream = currentStreamType() === "vod";
+
+  document
+    .querySelectorAll("*[data-show-when-vod]")
+    .forEach((element: HTMLElement) => {
+      const showOnAudience = element.dataset.hasOwnProperty("showOnAudience");
+      vodStream = showOnAudience ? vodStream : vodStream && !!currentUserId();
+
+      visibilityOfDataElement(element, !vodStream, "flex");
+    });
+}

app/javascript/style/chat.scss

@@ -100,15 +100,13 @@
   }
 
   .stream-end {
-    border-top: 1px solid color.$neutral-accents;
-    padding: 10px;
-
     &--content {
       // layouts
       display: flex;
       justify-content: center;
       align-items: center;
-      padding: 7px 0;
+      padding: 7px;
+      width: 100%;
 
       // styles
       border-radius: 10px;

app/javascript/types/video_state.ts

@@ -0,0 +1,5 @@
+export type VideoState = {
+  state: string;
+  type: string;
+  timecodeMs: number;
+};

app/models/concerns/video_states.rb

@@ -58,7 +58,7 @@ module VideoStates
 
       event :finish do
         after do
-          send_ifttt! "#{user.display_name} stopped streaming" if visibility.eql?("public")
+          after_broadcast_finished
         end
 
         transitions from: %i[live paused pending ended starting], to: :finished

app/models/video.rb

@@ -56,7 +56,7 @@ def change_playback_id(new_playback_id)
     self.hls_url = "https://stream.mux.com/#{new_playback_id}.m3u8"
   end
 
-  def transition_audience_to_live
+  def transition_state_for_audience
     SseBroadcaster.broadcast(channel.id, {state: state, type: "StateChange", timecodeMs: 0})
   end
 
@@ -150,14 +150,20 @@ def last_user_join_time
   private
 
   def after_go_live
-    transition_audience_to_live
+    transition_state_for_audience
 
     return unless visibility.eql?("public")
 
     send_ifttt!("#{user.display_name} went live!")
     send_broadcast_start_text!
   end
 
+  def after_broadcast_finished
+    transition_state_for_audience
+
+    send_ifttt!("#{user.display_name} stopped streaming") if visibility.eql?("public")
+  end
+
   def send_ifttt!(message)
     url = Router.channel_video_url(channel, self)
     IfThisThenThatJob.perform_later(message: message, url: url)

app/views/channels/videos/partials/_header.html.haml

@@ -7,33 +7,51 @@
         "target": "audience--header-bar.addressInput"
       }
     }
-  - if current_video.live?
-    .widget
-      .icon
-        = svg_tag "view"
-      #active-viewers{
-        "data": {
-          "controller": "live-viewer-count",
-          "target": "live-viewer-count.counter"
-        }
-      }= current_video.active_viewers_count
-    .widget.live
-      .widget-live__desktop
-        LIVE
-      .widget-live__mobile
-        = svg_tag "live"
-  - if current_video.finished?
-    - video_views = current_video.video_views.count
-    .widget{"data-views": video_views}
-      .icon
-        = svg_tag "view"
-      #active-viewers
-        = video_views
-    .replay-badge
-      .replay-badge__text
-        REPLAY
-      = svg_tag "no-stream", class: "replay-badge__image"
-      .badge-message
-        .badge-message__body
-          This stream happened on
-          = current_video.created_at.strftime("%B %d, %Y")
+  .widget{
+    data: {
+      "show-when-live": true,
+      "show-on-audience": true,
+    }
+  }
+    .icon
+      = svg_tag "view"
+    #active-viewers{
+      "data": {
+        "controller": "live-viewer-count",
+        "target": "live-viewer-count.counter"
+      }
+    }= current_video.active_viewers_count
+  .widget.live{
+    data: {
+      "show-when-live": true,
+      "show-on-audience": true
+    }
+  }
+    .widget-live__desktop
+      LIVE
+    .widget-live__mobile
+      = svg_tag "live"
+  .widget{
+    data: {
+      views: video_views,
+      "show-when-vod": true,
+      "show-on-audience": "true"
+    }
+  }
+    .icon
+      = svg_tag "view"
+    #active-viewers
+      = video_views
+  .replay-badge{
+    data: {
+      "show-when-vod": true,
+      "show-on-audience": true
+    }
+  }
+    .replay-badge__text
+      REPLAY
+    = svg_tag "no-stream", class: "replay-badge__image"
+    .badge-message
+      .badge-message__body
+        This stream happened on
+        = current_video.created_at.strftime("%B %d, %Y")

app/views/channels/videos/partials/_streamer_profile.html.haml

@@ -17,7 +17,6 @@
             = svg_tag 'user-icon-dark'
             %span
               = current_channel.followers.size
-
           - if user_signed_in?
             - if current_user.follows?(current_channel)
               %button.unfollow-btn{data: { action: "click->streamer-profile#unfollow" }} Following