openvibers/openvibe.live Commits

VOD and clip pages: the after-show report reads as one wrapping line on phones (its label wrapped onto three), and 1 view is '1 view' (#165)

OP OpenVibers committed 28 days ago · 6b9c9f4e29 · 2 files, +7 −3

Changes

ddiff --git a/public/css/context-cards.css b/public/css/context-cards.css
iindex 11e953b1..1c450509 100644
---- a/public/css/context-cards.css
++++ b/public/css/context-cards.css
@@@ -32,8 +32,12 @@
  .cc-stat i { color: var(--accent); font-size: 0.72rem; align-self: center; }
  .cc-stat b { font-weight: 800; color: var(--text-primary); }
  .cc-stat small { color: var(--text-muted); font-size: 0.72rem; }
--.cc-recap { display: inline-flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--text-secondary); text-decoration: none; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, #fbbf24 8%, var(--bg-tertiary)); border: 1px solid color-mix(in srgb, #fbbf24 30%, var(--border)); }
++/* One line of text that wraps (the grade badge sits at its start): as a flex row the badge, the bold label and the
++   headline were three columns, and on a phone "After-show report:" wrapped onto three lines. */
++.cc-recap { display: inline-block; line-height: 1.5; font-size: 0.84rem; color: var(--text-secondary); text-decoration: none; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, #fbbf24 8%, var(--bg-tertiary)); border: 1px solid color-mix(in srgb, #fbbf24 30%, var(--border)); }
  .cc-recap b { color: var(--text-primary); }
++.cc-recap .cc-grade { width: 24px; height: 24px; margin-right: 6px; vertical-align: middle; }
++.cc-recap > i { margin-right: 4px; }
  .cc-recap:hover { border-color: #fbbf24; }
  .cc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
  .cc-more { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
ddiff --git a/public/js/app-media.js b/public/js/app-media.js
iindex 0b46dcd2..aba78340 100644
---- a/public/js/app-media.js
++++ b/public/js/app-media.js
@@@ -318,7 +318,7 @@ async function loadVodPlayer(vodId, seekTo) {
          { const _a = document.getElementById('vp-avatar'); if (_a) _a.innerHTML = _avatarInner(v.avatar_url, v.username); }
          document.getElementById('vp-date').textContent = formatDateTime(v.created_at);
          document.getElementById('vp-duration').textContent = formatDuration(v.duration_seconds || v.duration);
--        document.getElementById('vp-views').textContent = `${v.view_count || 0} views${v.unique_views != null ? ` · ${v.unique_views} unique` : ''}`;
++        document.getElementById('vp-views').textContent = `${v.view_count || 0} view${(v.view_count || 0) === 1 ? '' : 's'}${v.unique_views != null ? ` · ${v.unique_views} unique` : ''}`;
          _showVideoLink('vp-video-link', 'vod', v);
          document.getElementById('vp-description').textContent = v.description || '';
          _renderMediaAiOverview('vp-description', v.ai_overview);
@@@ -1068,7 +1068,7 @@ async function loadClipPlayer(clipId) {
  
          // View count
          const clpViews = document.getElementById('clp-views');
--        if (clpViews) clpViews.textContent = `${cl.view_count || 0} views${cl.unique_views != null ? ` · ${cl.unique_views} unique` : ''}`;
++        if (clpViews) clpViews.textContent = `${cl.view_count || 0} view${(cl.view_count || 0) === 1 ? '' : 's'}${cl.unique_views != null ? ` · ${cl.unique_views} unique` : ''}`;
          _showVideoLink('clp-video-link', 'clip', cl);
  
          // Protocol badge