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

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">';