/* Copyright Ayers Electronics Inc. All rights reserved. */
/* guide preview art and lower bar. */

/* ---- the guide preview's artwork layer (js/guide-detail.js paintPreviewArt) ----
   The focused programme's poster fills the frame behind the mounted #video, so an unmounted or
   off-air frame is never a black gap. It shimmers while the poster loads and shows the No-artwork
   placeholder when there is none or the fetch fails - a shimmer that never resolves reads as a hung
   app on a television, so a failed load lands on the placeholder rather than turning forever. The
   frame's 16:9 size (css/layout.css) holds in every one of these states. */
.preview-poster {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--elevated);
}
.preview-poster[data-missing="1"] {
  display: none;
}
.preview-poster[data-missing="1"] + .art-missing {
  display: flex;
}
#guidePreview .art-missing,
#odPreview .art-missing {
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
}
/* Nothing can play for the profile (js/preview-idle.js): the title face's dark field and accent wash
   (css/components/tiles.css) with one short line, over the picture, a shell's slot and the channel's
   mark alike. */
.preview-idle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 16px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
/* An admin's own slate for the page (js/preview-idle.js): its picture fills the face behind the line. */
.preview-idle.slate-art {
  background-position: center;
  background-size: cover;
}
.preview-idle .preview-idle-line {
  position: relative;
  font-size: var(--type-body);
  line-height: 1.2;
  text-align: center;
  color: var(--accent-text);
}
/* Music playing: its picture is empty, so On Demand's frame shows the sleeve over it, whole on the
   page ground, above a shell's own slot too (js/mini-player.js paintPreviewSleeve). */
body.playing-item #odPreview.sleeve .preview-poster,
body.playing-item #odPreview.sleeve[data-native-slot] .preview-poster {
  display: block;
  z-index: 3;
  object-fit: contain;
  background: var(--bg);
}
/* The mounted picture rides above the artwork; when nothing is mounted the artwork is what shows. It
   fills the frame from the frame's own corners, so the frame's height is the padding's and never the
   picture's. */
#guidePreview video,
#odPreview video {
  position: absolute;
  z-index: 2;
}
#guidePreview[data-loading="1"]::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: preview-shimmer 1.1s linear infinite;
}
@keyframes preview-shimmer {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -120% 0;
  }
}
/* A rail's placeholder cards (js/on-demand-rails.js placeholderCard): the card's own box, the poster and
   two text bars in the same shimmer the preview frame uses while its art loads; still under reduced
   motion. The title and sub bars stand the real card's own line height (on-demand-cards.css .card
   .title, .card .sub, both calc(24 * --od-tv-px)) so a placeholder never draws shorter than the card
   that replaces it; the poster fills the same .card-art box a real card's picture does, shaped by
   the card's orientation class (.card.wide, .card.square). */
.card.placeholder .poster,
.card.placeholder .title,
.card.placeholder .sub {
  background: linear-gradient(100deg, var(--panel) 30%, var(--elevated) 50%, var(--panel) 70%);
  background-size: 220% 100%;
  animation: preview-shimmer 1.1s linear infinite;
}
.card.placeholder .title {
  height: calc(24 * var(--od-tv-px));
  width: 70%;
  border-radius: var(--radius-small);
}
.card.placeholder .sub {
  height: calc(24 * var(--od-tv-px));
  width: 45%;
  border-radius: var(--radius-small);
}
@media (prefers-reduced-motion: reduce) {
  .card.placeholder .poster,
  .card.placeholder .title,
  .card.placeholder .sub {
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  #guidePreview[data-loading="1"]::before {
    animation: none;
  }
}

/* ---- the preview's lower bar (js/guide-detail.js paintNowBar) ----
   A thin scrub of the current playing thing over one line that names it, laid over the picture's
   own bottom edge: the wrap around the frame (css/layout/guide-detail.css, css/layout/on-demand.css)
   is a positioning context and nothing else, so its height is the frame's own 16:9 height and the
   content below has that much more room. The bar is inset by the wrap's own padding, so it sits flush
   inside the frame, and its own padding gives that inset back, so the words and the scrub keep their
   place over the picture. A dark gradient sits under the words so they read over any picture. Held
   off (.hidden) until the parity strings land, so it never paints "undefined". */
.nowbar {
  position: absolute;
  left: var(--frame-inset-left, 0px);
  right: var(--frame-inset, 0px);
  bottom: var(--frame-inset, 0px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  padding: 18px calc(10px - var(--frame-inset, 0px)) calc(8px - var(--frame-inset, 0px))
    calc(10px - var(--frame-inset-left, 0px));
  border-radius: 0 0 var(--radius) var(--radius);
  background: linear-gradient(to top, rgba(6, 6, 8, 0.94) 0%, rgba(6, 6, 8, 0.8) 55%, var(--band-clear) 100%);
}
.nowbar > * + * {
  margin-top: 4px;
}
.nowbar-scrub {
  height: 3px;
  background: var(--track);
  border-radius: var(--radius-small);
  overflow: hidden;
}
.nowbar-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
}
.nowbar-label {
  font-size: var(--type-label);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- the preview's corner, both frames on every page that shows one ----
   Top left, the channel's number and name (js/guide-detail.js paintPreviewChan) in the channel line's
   type (css/components/on-demand-tv.css .now-chan) on the page's 70 percent ground, as far short of
   the right edge as it stands in from the left. A preview draws no channel watermark. The chip is a
   page element over the frame, so a shell's picture under the frame's hole shows it too. */
.preview-chan {
  position: absolute;
  left: 3px;
  top: 3px;
  z-index: 5;
  box-sizing: border-box;
  max-width: calc(100% - 6px);
  padding: 1px 6px;
  border-radius: var(--radius-small);
  background: var(--upper-fade-mid);
}