OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

Add 'Never Goes Dark' feature with animations for player and TV connection status

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 12:35:28 -05:00
parent 201e4e4606
commit e5c3be6ec5
3 changed files with 510 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/devices.php
View File

@@ -11,7 +11,7 @@
<!-- wp:oribi/platform-section {"label":"Our Devices","heading":"Commercial-Grade Hardware, Consumer-Level Simplicity","lead":"No IT degree required. Our players are designed to be set up in minutes and forgotten about for years."} -->
<!-- wp:oribi/platform-row {"heading":"Works With Your Existing Screens","description":"Our player devices connect to any screen with an HDMI port — no proprietary hardware required. Already have displays? Plug in and go. Need a full setup? We offer bundled player-and-display packages too.","btnText":"Get a Quote","btnUrl":"/contact","tvStick":true} /-->
<!-- wp:oribi/platform-row {"heading":"Never Goes Dark","description":"Every player caches content locally. If your internet connection drops, your displays continue running seamlessly with the latest synced content. When connectivity returns, new content pulls down automatically — no manual steps, no reboots.","btnText":"See Features","btnUrl":"/features","reversed":true} /-->
<!-- wp:oribi/platform-row {"heading":"Never Goes Dark","description":"Every player caches content locally. If your internet connection drops, your displays continue running seamlessly with the latest synced content. When connectivity returns, new content pulls down automatically — no manual steps, no reboots.","btnText":"See Features","btnUrl":"/features","reversed":true,"neverGoesDark":true} /-->
<!-- wp:oribi/platform-row {"heading":"Locked Down by Default","description":"Secure boot, encrypted storage, and encrypted communications come standard on every device. Remote management lets you monitor, update, and troubleshoot from anywhere. Firmware updates roll out over the air with zero downtime.","btnText":"Learn More","btnUrl":"/about"} /-->
<!-- /wp:oribi/platform-section -->

425
theme/assets/css/main.css
View File

@@ -4535,3 +4535,428 @@ p:last-child { margin-bottom: 0; }
.uc-db-bar--3 { transform: scaleY(.40) !important; }
.uc-db-bar--4 { transform: scaleY(.62) !important; }
}
/* ═══════════════════════════════════════════════════════════
NEVER GOES DARK ANIMATION (.platform-visual.has-ngd)
Sequence (10 s loop):
0 – 30 % : Connected – dots travel player → cloud, cloud green
30 – 45 % : Breaking – line turns red, × icon fades in
45 – 72 % : Offline – × visible, ✓ on player, TV still plays
72 – 85 % : Reconnect – × fades, dots resume, cloud back to green
85 – 100% : Connected – steady state before next loop
═══════════════════════════════════════════════════════════ */
/* ── Wrapper overrides ─────────────────────────────────────── */
.platform-visual.has-ngd {
background: none !important;
border: none !important;
border-radius: 0;
aspect-ratio: unset;
padding: 0;
overflow: visible;
position: relative;
font-size: inherit;
}
/* ── Stage ─────────────────────────────────────────────────── */
.ngd-stage {
position: relative;
width: 100%;
max-width: 400px;
aspect-ratio: 4/3;
margin: 0 auto;
}
/* ── TV ─────────────────────────────────────────────────────── */
.ngd-tv {
position: absolute;
left: 8px;
top: 18px;
display: flex;
flex-direction: column;
align-items: center;
}
.ngd-tv__body {
width: 160px;
height: 120px;
background: #111;
border: 4px solid #111;
border-radius: 6px 6px 4px 4px;
outline: 1px solid #000;
padding: 3px;
display: flex;
align-items: stretch;
position: relative;
box-shadow: 0 10px 36px rgba(0,0,0,.55);
}
/* HDMI port stub on right side */
.ngd-tv__port {
position: absolute;
right: -5px;
top: 50px;
width: 8px;
height: 14px;
background: #1a1a1a;
border: 1px solid #000;
border-radius: 2px;
}
.ngd-tv__screen {
width: 100%;
height: 100%;
border-radius: 2px;
position: relative;
overflow: hidden;
background:
repeating-linear-gradient(
180deg,
transparent, transparent 3px,
rgba(0,0,0,.10) 3px, rgba(0,0,0,.10) 4px
),
linear-gradient(135deg, #0c1016 0%, #151c28 60%, #0c1016 100%);
}
/* Scanline sweep */
.ngd-tv__screen::after {
content: '';
position: absolute;
left: 0; width: 100%; height: 3px;
background: linear-gradient(90deg, transparent, rgba(74,222,128,.22), transparent);
animation: da-scan 4s linear infinite;
pointer-events: none;
}
/* TV feet */
.ngd-tv__feet {
display: flex;
gap: 50px;
margin-top: 3px;
}
.ngd-tv__foot {
width: 22px;
height: 6px;
background: #181818;
border-radius: 0 0 3px 3px;
}
/* ── Menu board content (always playing) ───────────────────── */
.ngd-menu {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
padding: 7px 6px 4px;
gap: 3px;
}
.ngd-menu__hd {
display: flex;
align-items: center;
gap: 5px;
padding-bottom: 4px;
border-bottom: 1px solid rgba(255,200,80,.18);
flex-shrink: 0;
}
.ngd-menu__logo {
width: 9px; height: 9px;
background: #4CAF50;
border-radius: 50%;
flex-shrink: 0;
}
.ngd-menu__ttl {
flex: 1; height: 5px;
background: rgba(255,200,80,.45);
border-radius: 2px;
max-width: 55px;
}
.ngd-menu__cols {
display: flex;
gap: 6px;
flex: 1;
}
.ngd-menu__col {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.ngd-menu__cat {
height: 4px;
background: rgba(76,175,80,.5);
border-radius: 1px;
margin-bottom: 1px;
}
.ngd-menu__row {
display: flex;
align-items: center;
gap: 3px;
padding: 2px 3px;
border-radius: 2px;
transition: background .3s;
}
.ngd-menu__row--hl {
background: rgba(76,175,80,.14);
animation: ngd-hl-pulse 3.5s ease-in-out infinite;
}
.ngd-menu__name {
flex: 1; height: 4px;
background: rgba(255,255,255,.25);
border-radius: 1px;
}
.ngd-menu__row--hl .ngd-menu__name {
background: rgba(76,175,80,.55);
}
.ngd-menu__price {
width: 16px; height: 4px;
background: rgba(255,200,80,.4);
border-radius: 1px;
}
.ngd-menu__row--hl .ngd-menu__price {
background: rgba(255,200,80,.7);
}
/* Scrolling ticker at bottom */
.ngd-menu__ticker {
height: 6px;
background: rgba(76,175,80,.12);
border-radius: 1px;
overflow: hidden;
flex-shrink: 0;
}
.ngd-menu__ticker-inner {
width: 250%;
height: 100%;
background: repeating-linear-gradient(
90deg,
rgba(76,175,80,.5) 0px, rgba(76,175,80,.5) 30px,
transparent 30px, transparent 50px
);
animation: ngd-ticker 4s linear infinite;
}
/* ── HDMI bridge ────────────────────────────────────────────── */
.ngd-hdmi {
position: absolute;
left: 168px;
top: 112px;
width: 14px;
height: 3px;
background: #252525;
border-radius: 1px;
}
/* ── Player device ──────────────────────────────────────────── */
.ngd-player {
position: absolute;
left: 182px;
top: 102px;
}
.ngd-player__body {
display: flex;
align-items: center;
gap: 5px;
width: 96px;
height: 28px;
background: #1a1a1a;
border: 1.5px solid #2d2d2d;
border-radius: 4px;
padding: 4px 6px;
box-shadow: 0 4px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
position: relative;
}
.ngd-player__led {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
background: #4CAF50;
box-shadow: 0 0 6px rgba(76,175,80,.8);
animation: ngd-led 10s ease-in-out infinite;
}
.ngd-player__brand {
flex: 1;
height: 5px;
background: rgba(255,255,255,.07);
border-radius: 2px;
}
.ngd-player__port {
width: 8px; height: 11px;
background: #0d0d0d;
border: 1px solid #222;
border-radius: 1px;
flex-shrink: 0;
}
/* Checkmark badge — visible only during offline phase */
.ngd-player__check {
position: absolute;
top: -14px;
right: -11px;
width: 24px; height: 24px;
opacity: 0;
transform: scale(0.4);
transform-origin: center;
animation: ngd-check-show 10s ease-in-out infinite;
filter: drop-shadow(0 0 4px rgba(76,175,80,.6));
}
/* ── Signal wrap (cloud + vertical line to player) ─────────── */
.ngd-signal-wrap {
position: absolute;
/* horizontally centred on player: player left=182px, width=96px → centre=230px */
left: 193px; /* 230 – cloud_half(37px) = 193 */
top: 8px;
width: 74px;
display: flex;
flex-direction: column;
align-items: center;
}
.ngd-cloud {
width: 74px;
flex-shrink: 0;
}
.ngd-cloud__svg {
width: 100%;
height: auto;
display: block;
}
.ngd-cloud__path {
stroke: #4CAF50;
opacity: .85;
animation: ngd-cloud-color 10s ease-in-out infinite;
}
/* Vertical signal line */
.ngd-signal-line {
width: 3px;
height: 44px; /* gap from cloud bottom to player top */
background: rgba(76,175,80,.35);
border-radius: 2px;
position: relative;
overflow: visible;
animation: ngd-line-col 10s ease-in-out infinite;
}
/* Dots container — hidden during break phase */
.ngd-signal__dots {
position: absolute;
inset: 0;
overflow: hidden;
animation: ngd-dots-vis 10s linear infinite;
}
.ngd-signal__dot {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 5px; height: 5px;
border-radius: 50%;
background: #4CAF50;
box-shadow: 0 0 5px rgba(76,175,80,.8);
animation: ngd-dot-up 1.8s ease-in-out infinite;
}
.ngd-signal__dot--2 { animation-delay: -0.6s; }
.ngd-signal__dot--3 { animation-delay: -1.2s; }
/* Break × badge — centered on line */
.ngd-signal__break {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0);
width: 18px; height: 18px;
opacity: 0;
animation: ngd-break-show 10s ease-in-out infinite;
filter: drop-shadow(0 0 4px rgba(239,68,68,.5));
}
/* ═══════════════════════════════════════════════════════════
KEYFRAMES (10 s cycle)
═══════════════════════════════════════════════════════════ */
/* Ticker scroll */
@keyframes ngd-ticker {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Highlighted menu row pulsing */
@keyframes ngd-hl-pulse {
0%, 100% { background: rgba(76,175,80,.14); }
50% { background: rgba(76,175,80,.28); }
}
/* Player LED: green → amber → red during disconnect → back to green */
@keyframes ngd-led {
0%, 29% { background: #4CAF50; box-shadow: 0 0 6px rgba(76,175,80,.8); }
33% { background: #f59e0b; box-shadow: 0 0 5px rgba(245,158,11,.6); }
38%, 71% { background: #ef4444; box-shadow: 0 0 4px rgba(239,68,68,.4); }
75% { background: #4CAF50; box-shadow: 0 0 6px rgba(76,175,80,.8); }
100% { background: #4CAF50; box-shadow: 0 0 6px rgba(76,175,80,.8); }
}
/* Cloud stroke: green → red → green */
@keyframes ngd-cloud-color {
0%, 29% { stroke: #4CAF50; opacity: .85; }
36%, 71% { stroke: #ef4444; opacity: 1; }
76%, 100% { stroke: #4CAF50; opacity: .85; }
}
/* Signal line colour */
@keyframes ngd-line-col {
0%, 29% { background: rgba(76,175,80,.35); }
36%, 71% { background: rgba(239,68,68,.45); }
76%, 100% { background: rgba(76,175,80,.35); }
}
/* Dots container: visible during connected phases only */
@keyframes ngd-dots-vis {
0%, 29% { opacity: 1; }
33% { opacity: 0; }
71% { opacity: 0; }
75%, 100% { opacity: 1; }
}
/* Single dot travelling bottom → top */
@keyframes ngd-dot-up {
0% { bottom: 1px; opacity: 0; }
8% { opacity: 1; }
85% { opacity: 1; }
100% { bottom: calc(100% - 5px); opacity: 0; }
}
/* Break × badge: appears when disconnected */
@keyframes ngd-break-show {
0%, 29% { opacity: 0; transform: translate(-50%,-50%) scale(0); }
38%, 71% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
76%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(0); }
}
/* Checkmark: appears when offline, confirming local playback */
@keyframes ngd-check-show {
0%, 44% { opacity: 0; transform: scale(0.4); }
52%, 71% { opacity: 1; transform: scale(1); }
77%, 100% { opacity: 0; transform: scale(0.4); }
}
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
.ngd-stage { max-width: 320px; }
/* Scale the fixed-px elements down proportionally */
.ngd-tv__body { width: 128px; height: 96px; }
.ngd-tv__port { top: 40px; }
.ngd-tv__foot { width: 18px; }
.ngd-hdmi { left: 134px; top: 90px; }
.ngd-player { left: 146px; top: 82px; }
.ngd-player__body { width: 76px; height: 24px; }
.ngd-signal-wrap { left: 154px; width: 60px; }
.ngd-signal-line { height: 36px; }
}
/* ── Reduced-motion overrides ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.ngd-tv__screen::after,
.ngd-menu__ticker-inner,
.ngd-menu__row--hl,
.ngd-player__led,
.ngd-signal__dot,
.ngd-signal__dots,
.ngd-signal__break,
.ngd-cloud__path,
.ngd-signal-line,
.ngd-player__check { animation: none !important; }
/* Static fallback states */
.ngd-player__led { background: #4CAF50; box-shadow: 0 0 5px rgba(76,175,80,.6); }
.ngd-cloud__path { stroke: #4CAF50; opacity: .8; }
.ngd-signal__dots { opacity: 1; }
}

87
theme/blocks/index.php
View File

@@ -553,9 +553,10 @@ add_action( 'init', function () {
'imgUrl' => [ 'type' => 'string', 'default' => '' ],
'imgAlt' => [ 'type' => 'string', 'default' => '' ],
'imgWidth' => [ 'type' => 'number', 'default' => 300 ],
'deviceAnim' => [ 'type' => 'boolean', 'default' => false ],
'tvStick' => [ 'type' => 'boolean', 'default' => false ],
'cameraAnim' => [ 'type' => 'boolean', 'default' => false ],
'deviceAnim' => [ 'type' => 'boolean', 'default' => false ],
'tvStick' => [ 'type' => 'boolean', 'default' => false ],
'cameraAnim' => [ 'type' => 'boolean', 'default' => false ],
'neverGoesDark'=> [ 'type' => 'boolean', 'default' => false ],
],
'supports' => $block_supports,
'render_callback' => 'oribi_render_platform_row',
@@ -1570,6 +1571,86 @@ function oribi_render_platform_row( $a ) {
$ts .= '</div>';
$visual_html = $ts;
$visual_cls = 'platform-visual has-tv-stick';
} elseif ( ! empty( $a['neverGoesDark'] ) ) {
/* ── Never Goes Dark: player + TV + cloud connection/break animation ── */
$ngd = '<div class="ngd-stage" aria-hidden="true">';
/* TV */
$ngd .= '<div class="ngd-tv">';
$ngd .= '<div class="ngd-tv__body">';
$ngd .= '<div class="ngd-tv__screen">';
$ngd .= '<div class="ngd-menu">';
$ngd .= '<div class="ngd-menu__hd">';
$ngd .= '<div class="ngd-menu__logo"></div>';
$ngd .= '<div class="ngd-menu__ttl"></div>';
$ngd .= '</div>';
$ngd .= '<div class="ngd-menu__cols">';
$ngd .= '<div class="ngd-menu__col">';
$ngd .= '<div class="ngd-menu__cat"></div>';
$ngd .= '<div class="ngd-menu__row"><span class="ngd-menu__name"></span><span class="ngd-menu__price"></span></div>';
$ngd .= '<div class="ngd-menu__row ngd-menu__row--hl"><span class="ngd-menu__name"></span><span class="ngd-menu__price"></span></div>';
$ngd .= '<div class="ngd-menu__row"><span class="ngd-menu__name"></span><span class="ngd-menu__price"></span></div>';
$ngd .= '</div>';
$ngd .= '<div class="ngd-menu__col">';
$ngd .= '<div class="ngd-menu__cat"></div>';
$ngd .= '<div class="ngd-menu__row"><span class="ngd-menu__name"></span><span class="ngd-menu__price"></span></div>';
$ngd .= '<div class="ngd-menu__row"><span class="ngd-menu__name"></span><span class="ngd-menu__price"></span></div>';
$ngd .= '<div class="ngd-menu__row ngd-menu__row--hl"><span class="ngd-menu__name"></span><span class="ngd-menu__price"></span></div>';
$ngd .= '</div>';
$ngd .= '</div>'; /* cols */
$ngd .= '<div class="ngd-menu__ticker"><div class="ngd-menu__ticker-inner"></div></div>';
$ngd .= '</div>'; /* ngd-menu */
$ngd .= '</div>'; /* ngd-tv__screen */
$ngd .= '<div class="ngd-tv__port"></div>';
$ngd .= '</div>'; /* ngd-tv__body */
$ngd .= '<div class="ngd-tv__feet"><div class="ngd-tv__foot"></div><div class="ngd-tv__foot"></div></div>';
$ngd .= '</div>'; /* ngd-tv */
/* HDMI bridge from TV port to player */
$ngd .= '<div class="ngd-hdmi"></div>';
/* Player device */
$ngd .= '<div class="ngd-player">';
$ngd .= '<div class="ngd-player__body">';
$ngd .= '<div class="ngd-player__led"></div>';
$ngd .= '<div class="ngd-player__brand"></div>';
$ngd .= '<div class="ngd-player__port"></div>';
$ngd .= '</div>';
$ngd .= '<div class="ngd-player__check">';
$ngd .= '<svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">';
$ngd .= '<circle cx="11" cy="11" r="10" stroke="#4CAF50" stroke-width="1.5"/>';
$ngd .= '<polyline points="6,11 9.5,14.5 16,7.5" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>';
$ngd .= '</svg>';
$ngd .= '</div>';
$ngd .= '</div>'; /* ngd-player */
/* Signal wrap: vertical line connecting player to cloud above */
$ngd .= '<div class="ngd-signal-wrap">';
$ngd .= '<div class="ngd-cloud">';
$ngd .= '<svg class="ngd-cloud__svg" viewBox="0 0 64 46" fill="none" xmlns="http://www.w3.org/2000/svg">';
$ngd .= '<path class="ngd-cloud__path" d="M50 38H12C6.5 38 2 33.5 2 28s4.5-10 10-10c.35 0 .68.02 1 .05C15.3 12.4 20.8 8 27.5 8 35.2 8 41.5 14.3 41.5 22c0 .73-.06 1.45-.16 2.15C45.2 24.95 48 28.1 48 32v6z" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>';
$ngd .= '</svg>';
$ngd .= '</div>';
$ngd .= '<div class="ngd-signal-line">';
$ngd .= '<div class="ngd-signal__dots">';
$ngd .= '<div class="ngd-signal__dot ngd-signal__dot--1"></div>';
$ngd .= '<div class="ngd-signal__dot ngd-signal__dot--2"></div>';
$ngd .= '<div class="ngd-signal__dot ngd-signal__dot--3"></div>';
$ngd .= '</div>';
$ngd .= '<div class="ngd-signal__break">';
$ngd .= '<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">';
$ngd .= '<circle cx="9" cy="9" r="8" fill="rgba(239,68,68,0.12)" stroke="#ef4444" stroke-width="1.2"/>';
$ngd .= '<line x1="5.5" y1="5.5" x2="12.5" y2="12.5" stroke="#ef4444" stroke-width="2" stroke-linecap="round"/>';
$ngd .= '<line x1="12.5" y1="5.5" x2="5.5" y2="12.5" stroke="#ef4444" stroke-width="2" stroke-linecap="round"/>';
$ngd .= '</svg>';
$ngd .= '</div>';
$ngd .= '</div>'; /* ngd-signal-line */
$ngd .= '</div>'; /* ngd-signal-wrap */
$ngd .= '</div>'; /* ngd-stage */
$visual_html = $ngd;
$visual_cls = 'platform-visual has-ngd';
} elseif ( ! empty( $a['cameraAnim'] ) ) {
$ca = '<div class="cam-stage" aria-hidden="true">';