Stabilizza regia, live web e sync punteggi app nativa.
Corregge scadenza token regia oltre le 8h, tabellone HTML sulla pagina live, pulsanti pausa/ripresa in regia, link admin e broadcast ActionCable diretto. App Android: overlay branding, sync score da regia via WebSocket con reconnect e poll. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
47
backend/app/views/public/live/_scorebug.html.erb
Normal file
47
backend/app/views/public/live/_scorebug.html.erb
Normal file
@@ -0,0 +1,47 @@
|
||||
<% score = @session.score_state %>
|
||||
<% team = @match.team %>
|
||||
<% cols = live_scorebug_columns(score) %>
|
||||
<% home_color = team.effective_primary_color %>
|
||||
<% away_color = live_scorebug_away_color(team) %>
|
||||
<div class="live-player-overlays" id="live-overlays">
|
||||
<div
|
||||
id="live-scorebug"
|
||||
class="live-scorebug"
|
||||
style="--sb-home-primary: <%= home_color %>; --sb-away-primary: <%= away_color %>;"
|
||||
data-home-name="<%= j live_scorebug_team_label(team.name) %>"
|
||||
data-away-name="<%= j live_scorebug_team_label(@match.opponent_name) %>"
|
||||
>
|
||||
<table class="live-scorebug__table" aria-label="Tabellone">
|
||||
<caption class="visually-hidden">Punteggio live</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="live-scorebug__corner" scope="col">Squadra</th>
|
||||
<% cols[:labels].each do |label| %>
|
||||
<th class="live-scorebug__col-set live-scorebug__col-h" scope="col"><%= label %></th>
|
||||
<% end %>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="live-scorebug__row--home">
|
||||
<th class="live-scorebug__team" scope="row"><%= live_scorebug_team_label(team.name) %></th>
|
||||
<% cols[:home].each_with_index do |val, i| %>
|
||||
<td class="live-scorebug__pts<%= " live-scorebug__pts--live-home" if i == cols[:live_index] %>"><%= val %></td>
|
||||
<% end %>
|
||||
</tr>
|
||||
<tr class="live-scorebug__row--away">
|
||||
<th class="live-scorebug__team" scope="row"><%= live_scorebug_team_label(@match.opponent_name) %></th>
|
||||
<% cols[:away].each_with_index do |val, i| %>
|
||||
<td class="live-scorebug__pts<%= " live-scorebug__pts--live-away" if i == cols[:live_index] %>"><%= val %></td>
|
||||
<% end %>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="live-scorebug__brand" aria-hidden="true">
|
||||
<span class="live-scorebug__brand-text">MATCH <span class="live-scorebug__brand-accent">LIVE TV</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
id="live-stream-badge"
|
||||
class="live-ovl-badge live-ovl-badge--right <%= @stream_closed ? "badge-ended" : (@session.paused? ? "badge-wait" : (@on_air ? "badge-live" : "badge-wait")) %>"
|
||||
><%= @stream_closed ? "Terminata" : (@session.paused? ? "In pausa" : (@on_air ? "LIVE" : "In attesa")) %></span>
|
||||
</div>
|
||||
@@ -1,7 +1,7 @@
|
||||
<% club_name = @match.team.club&.name %>
|
||||
<% content_for :title do %><%= club_name %> · <%= @match.team.name %> vs <%= @match.opponent_name %> — Diretta live<% end %>
|
||||
<% content_for :meta_description do %>Segui in diretta live <%= club_name %> — <%= @match.team.name %> vs <%= @match.opponent_name %><% if @match.location.present? %> — <%= @match.location %><% end %>. Guarda dal browser senza installare app.<% end %>
|
||||
<% content_for :robots, "noindex, follow" %>
|
||||
<% content_for :robots, @session.publicly_listed? ? "index, follow" : "noindex, nofollow" %>
|
||||
|
||||
<% content_for :head do %>
|
||||
<% unless @stream_closed || @session.platform == "youtube" %>
|
||||
@@ -41,7 +41,7 @@
|
||||
<% else %>
|
||||
<div class="live-player-wrap">
|
||||
<video id="player" controls playsinline muted autoplay poster="/images/copertina-canale.png"></video>
|
||||
<%# Tabellone e watermark sono bruciati nel video dall'app mobile (overlay client-side). %>
|
||||
<%= render "public/live/scorebug", match: @match, session: @session %>
|
||||
<button type="button" id="play-hint" class="live-play-hint" hidden>
|
||||
▶ Avvia la diretta
|
||||
</button>
|
||||
@@ -58,6 +58,88 @@
|
||||
const pausedMsg = document.getElementById("paused-msg");
|
||||
const awaitingMsg = document.getElementById("awaiting-msg");
|
||||
const playHint = document.getElementById("play-hint");
|
||||
const scorebug = document.getElementById("live-scorebug");
|
||||
const streamBadge = document.getElementById("live-stream-badge");
|
||||
const homeName = "<%= j @match.team.name %>";
|
||||
const awayName = "<%= j @match.opponent_name %>";
|
||||
|
||||
function abbrevName(name, max = 16) {
|
||||
const n = String(name || "");
|
||||
return n.length <= max ? n : `${n.slice(0, max - 1)}…`;
|
||||
}
|
||||
|
||||
function scoreColumnsFromPayload(score) {
|
||||
if (!score) return { labels: ["1"], home: ["0"], away: ["0"], liveIndex: 0 };
|
||||
const partials = score.set_partials || score.setPartials || [];
|
||||
const labels = partials.map((p) => String(p.set ?? p["set"] ?? ""));
|
||||
const home = partials.map((p) => String(p.home ?? p["home"] ?? "0"));
|
||||
const away = partials.map((p) => String(p.away ?? p["away"] ?? "0"));
|
||||
const currentSet = score.current_set ?? score.currentSet ?? 1;
|
||||
labels.push(String(currentSet));
|
||||
home.push(String(score.home_points ?? score.homePoints ?? 0));
|
||||
away.push(String(score.away_points ?? score.awayPoints ?? 0));
|
||||
return { labels, home, away, liveIndex: labels.length - 1 };
|
||||
}
|
||||
|
||||
function renderLiveScorebug(score) {
|
||||
if (!scorebug) return;
|
||||
const cols = scoreColumnsFromPayload(score);
|
||||
const homeLabel = abbrevName(scorebug.dataset.homeName || homeName);
|
||||
const awayLabel = abbrevName(scorebug.dataset.awayName || awayName);
|
||||
const headCells = cols.labels
|
||||
.map((label) => `<th class="live-scorebug__col-set live-scorebug__col-h" scope="col">${label}</th>`)
|
||||
.join("");
|
||||
const homeCells = cols.home
|
||||
.map((val, i) => {
|
||||
const live = i === cols.liveIndex ? " live-scorebug__pts--live-home" : "";
|
||||
return `<td class="live-scorebug__pts${live}">${val}</td>`;
|
||||
})
|
||||
.join("");
|
||||
const awayCells = cols.away
|
||||
.map((val, i) => {
|
||||
const live = i === cols.liveIndex ? " live-scorebug__pts--live-away" : "";
|
||||
return `<td class="live-scorebug__pts${live}">${val}</td>`;
|
||||
})
|
||||
.join("");
|
||||
scorebug.innerHTML = `
|
||||
<table class="live-scorebug__table" aria-label="Tabellone">
|
||||
<caption class="visually-hidden">Punteggio live</caption>
|
||||
<thead><tr>
|
||||
<th class="live-scorebug__corner" scope="col">Squadra</th>${headCells}
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr class="live-scorebug__row--home">
|
||||
<th class="live-scorebug__team" scope="row">${homeLabel}</th>${homeCells}
|
||||
</tr>
|
||||
<tr class="live-scorebug__row--away">
|
||||
<th class="live-scorebug__team" scope="row">${awayLabel}</th>${awayCells}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="live-scorebug__brand" aria-hidden="true">
|
||||
<span class="live-scorebug__brand-text">MATCH <span class="live-scorebug__brand-accent">LIVE TV</span></span>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function syncStreamBadge(data) {
|
||||
if (!streamBadge) return;
|
||||
if (data.stream_closed) {
|
||||
streamBadge.textContent = "Terminata";
|
||||
streamBadge.className = "live-ovl-badge live-ovl-badge--right badge-ended";
|
||||
return;
|
||||
}
|
||||
const paused = !!(data.paused || data.status === "paused");
|
||||
if (paused) {
|
||||
streamBadge.textContent = "In pausa";
|
||||
streamBadge.className = "live-ovl-badge live-ovl-badge--right badge-wait";
|
||||
} else if (data.on_air) {
|
||||
streamBadge.textContent = "LIVE";
|
||||
streamBadge.className = "live-ovl-badge live-ovl-badge--right badge-live";
|
||||
} else {
|
||||
streamBadge.textContent = "In attesa";
|
||||
streamBadge.className = "live-ovl-badge live-ovl-badge--right badge-wait";
|
||||
}
|
||||
}
|
||||
|
||||
let hls = null;
|
||||
let playerStarted = false;
|
||||
@@ -247,6 +329,9 @@
|
||||
return;
|
||||
}
|
||||
|
||||
renderLiveScorebug(data.score);
|
||||
syncStreamBadge(data);
|
||||
|
||||
const onAir = !!data.on_air;
|
||||
const sessionLive = !!data.live;
|
||||
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
data-status-url="<%= j public_regia_status_path(params[:token]) %>"
|
||||
data-score-url="<%= j public_regia_score_path(params[:token]) %>"
|
||||
data-pause-url="<%= j public_regia_pause_path(params[:token]) %>"
|
||||
data-resume-url="<%= j public_regia_resume_path(params[:token]) %>"
|
||||
data-stop-url="<%= j public_regia_stop_path(params[:token]) %>"
|
||||
data-cable-url="<%= j "/cable?regia_token=#{params[:token]}" %>"
|
||||
data-hls-url="<%= j @session.hls_playback_url %>"
|
||||
@@ -20,13 +21,14 @@
|
||||
data-share-url="<%= j @share_url %>"
|
||||
data-share-title="<%= j @share_title %>"
|
||||
data-points-target="<%= Scoring::Rules.from_match(@match).points_target(@score.current_set) %>"
|
||||
data-stream-closed="<%= @stream_closed %>">
|
||||
data-stream-closed="<%= @stream_closed %>"
|
||||
data-initial-paused="<%= @session.paused? %>">
|
||||
|
||||
<header class="regia-header">
|
||||
<h1><%= @team.name %> vs <%= @match.opponent_name %></h1>
|
||||
<p>Regia · Set <%= @score.current_set %></p>
|
||||
<span id="regia-badge" class="regia-badge <%= @on_air ? 'regia-badge--live' : (@stream_closed ? 'regia-badge--ended' : 'regia-badge--wait') %>">
|
||||
<%= @stream_closed ? "Terminata" : (@on_air ? "In onda" : "In attesa") %>
|
||||
<span id="regia-badge" class="regia-badge <%= @stream_closed ? 'regia-badge--ended' : (@session.paused? ? 'regia-badge--wait' : (@on_air ? 'regia-badge--live' : 'regia-badge--wait')) %>">
|
||||
<%= @stream_closed ? "Terminata" : (@session.paused? ? "In pausa" : (@on_air ? "In onda" : "In attesa")) %>
|
||||
</span>
|
||||
</header>
|
||||
|
||||
@@ -76,7 +78,7 @@
|
||||
</section>
|
||||
|
||||
<% unless @stream_closed %>
|
||||
<button type="button" class="regia-btn regia-btn--outline" id="btn-pause">Metti in pausa</button>
|
||||
<button type="button" class="regia-btn regia-btn--outline" id="btn-pause"><%= @session.paused? ? "Riprendi diretta" : "Metti in pausa" %></button>
|
||||
<button type="button" class="regia-btn regia-btn--danger" id="btn-stop">Chiudi diretta</button>
|
||||
<% end %>
|
||||
</div>
|
||||
@@ -94,4 +96,4 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/regia.js?v=2"></script>
|
||||
<script src="/regia.js?v=4"></script>
|
||||
|
||||
Reference in New Issue
Block a user