dwtc.hub.welcome.message,
dwtc.greeting.message
Welcome, Ahmed.
dwtc.greeting.message
Welcome, .
dwtc.greeting.message
حصل خطأ عند معالجة القالب.
The string doesn't match the expected date/time/date-time format. The string to parse was: "٠٤/١٢/٢٥ ٠٧:٠٠ ص". The expected format was: "M/d/yy h:mm a".
The nested reason given follows:
Unparseable date: "٠٤/١٢/٢٥ ٠٧:٠٠ ص"
----
FTL stack trace ("~" means nesting-related):
- Failed at: ${ObjectEntry_createDate.getData()?da... [in template "68068712855087#53307#null" at line 878, column 193]
----
1<style>
2 .hero-top .video-overlay {
3 position: absolute;
4 top: 0; left: 0; right: 0; bottom: 0;
5 background: linear-gradient(
6 to top,
7 rgba(0,0,0,0.3) 0%, /* lighter near bottom */
8 rgba(0,0,0,0.75) 100% /* darker toward top */
9 );
10 z-index: 2;
11 /* pointer-events: none; */
12}
13 .hero-top .hero-image {
14 position: absolute;
15 top: 0; left: 0; right: 0; bottom: 0;
16 width: 100%;
17 height: 100%;
18 object-fit: cover;
19 z-index: 1; /* video below header */
20 pointer-events: auto; /* allow clicks */
21 cursor: pointer;
22}
23
24.header-content {
25 position: relative;
26 z-index: 2; /* above video */
27 /* pointer-events: none; */
28}
29 /* banner gradient hidding content
30 .header-content{
31
32 z-index: 1;
33
34 }*/
35 .header-content .content-container .article-header .heading-container .heading-wrapper{
36 gap: 32px !important;
37 }
38 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .provider-container:hover .provider-name {
39 text-decoration: underline;
40 }
41
42 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration {
43 align-items: center;
44 display: flex;
45 gap: 6px;
46 }
47
48 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration i {
49 color: #fff;
50 font-size: 18px;
51 }
52
53 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration .text {
54 color: #fff;
55 font-family: "URW DIN-Regular", Helvetica;
56 font-weight: 400;
57 font-size: 14px;
58 letter-spacing: 0.56px;
59 line-height: 100%;
60 text-box-cap: cap alphabetic;
61 text-box-trim: trim-both;
62 text-transform: uppercase;
63 }
64
65 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .date .text {
66 color: #fff;
67 font-family: "URW DIN-Regular", Helvetica;
68 font-weight: 400;
69 font-size: 14px;
70 letter-spacing: 0.56px;
71 line-height: 100%;
72 text-box-cap: cap alphabetic;
73 text-box-trim: trim-both;
74 text-transform: uppercase;
75 }
76
77 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity {
78 align-items: center;
79 display: flex;
80 flex-direction: row;
81 gap: 16px;
82 }
83
84 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments,
85 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes {
86 align-items: center;
87 display: flex;
88 gap: 8px;
89 }
90
91 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i,
92 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i {
93 color: #fff;
94 cursor: pointer;
95 font-size: 18px;
96 }
97
98
99 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration {
100 align-items: center;
101 display: flex;
102 gap: 6px;
103 }
104
105 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration i {
106 color: #fff;
107 font-size: 18px;
108 }
109
110 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration .text {
111 color: #fff;
112 font-family: "URW DIN-Regular", Helvetica;
113 font-weight: 400;
114 font-size: 14px;
115 letter-spacing: 0.56px;
116 line-height: 100%;
117 text-box-cap: cap alphabetic;
118 text-box-trim: trim-both;
119 text-transform: uppercase;
120 }
121
122 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .date .text {
123 color: #fff;
124 font-family: "URW DIN-Regular", Helvetica;
125 font-weight: 400;
126 font-size: 14px;
127 letter-spacing: 0.56px;
128 line-height: 100%;
129 text-box-cap: cap alphabetic;
130 text-box-trim: trim-both;
131 text-transform: uppercase;
132 }
133
134 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity {
135 align-items: center;
136 display: flex;
137 flex-direction: row;
138 gap: 16px;
139 }
140
141 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments,
142 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes {
143 align-items: center;
144 display: flex;
145 gap: 8px;
146 }
147
148 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i,
149 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i {
150 color: #fff;
151 cursor: pointer;
152 font-size: 18px;
153 }
154
155 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i:hover::before {
156 content: "\e91c";
157 }
158
159 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i:hover::before {
160 content: "\e91d";
161 }
162
163 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments .text,
164 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes .text {
165 color: #fff;
166 font-family: "URW DIN-Regular", Helvetica;
167 font-weight: 400;
168 font-size: 14px;
169 letter-spacing: 0.56px;
170 line-height: 100%;
171 text-box-cap: cap alphabetic;
172 text-box-trim: trim-both;
173 text-transform: uppercase;
174 }
175
176 /* Featured */
177 .header-content .featured {
178 display: flex;
179 width: 100%;
180 }
181
182 .header-content .featured .mobile-episode-description {
183 display: none;
184 }
185
186 .header-content .featured .episode-description {
187 align-items: flex-start;
188 display: flex;
189 flex-direction: column;
190 gap: 24px;
191 justify-content: flex-end;
192 max-width: 597px;
193 padding-left: 24px;
194 padding-bottom: 83px;
195 width: 100%;
196 }
197
198 .header-content .featured .episode-description .episode-intro {
199 color: #ffffff;
200 font-family: "DIN Pro-Medium", Helvetica;
201 font-size: 24px;
202 font-weight: 500;
203 letter-spacing: -0.96px;
204 line-height: 100%;
205 }
206
207 .header-content .featured .episode-description .description {
208 color: #fff;
209 font-family: "DIN Pro-Regular", Helvetica;
210 font-size: 16px;
211 font-weight: 400;
212 letter-spacing: -0.32px;
213 line-height: 120%;
214 }
215
216 .header-content .featured .episode-description .content-details {
217 align-items: center;
218 display: flex;
219 flex-direction: row;
220 gap: 20px;
221 }
222
223 .header-content .featured .episode-description .content-details .duration {
224 align-items: center;
225 display: flex;
226 gap: 6px;
227 }
228
229 .header-content .featured .episode-description .content-details .duration i {
230 color: #fff;
231 font-size: 18px;
232 }
233
234 .header-content .featured .episode-description .content-details .duration .text {
235 color: #fff;
236 font-family: "URW DIN-Regular", Helvetica;
237 font-weight: 400;
238 font-size: 14px;
239 letter-spacing: 0.56px;
240 line-height: 100%;
241 text-box-cap: cap alphabetic;
242 text-box-trim: trim-both;
243 text-transform: uppercase;
244 }
245
246 .header-content .featured .episode-description .content-details .date .text {
247 color: #fff;
248 font-family: "URW DIN-Regular", Helvetica;
249 font-weight: 400;
250 font-size: 14px;
251 letter-spacing: 0.56px;
252 line-height: 100%;
253 text-box-cap: cap alphabetic;
254 text-box-trim: trim-both;
255 text-transform: uppercase;
256 }
257
258
259 .header-content .featured .episode-description .content-details .activity {
260 align-items: center;
261 display: flex;
262 flex-direction: row;
263 gap: 16px;
264 }
265
266 .header-content .featured .episode-description .content-details .activity .comments,
267 .header-content .featured .episode-description .content-details .activity .likes {
268 align-items: center;
269 display: flex;
270 gap: 8px;
271 }
272
273 .header-content .featured .episode-description .content-details .activity .comments i,
274 .header-content .featured .episode-description .content-details .activity .likes i {
275 color: #fff;
276 cursor: pointer;
277 font-size: 18px;
278 }
279
280 .header-content .featured .episode-description .content-details .activity .comments i:hover::before {
281 content: "\e91c";
282 }
283
284 .header-content .featured .episode-description .content-details .activity .likes i:hover::before {
285 content: "\e91d";
286 }
287
288 .DWTC-hub-d {
289 display: flex;
290 flex-direction: column;
291 align-items: flex-start;
292 position: relative;
293 }
294
295 .DWTC-hub-d .hero-top {
296 display: flex;
297 flex-direction: column;
298 height: 100%;
299 align-items: flex-start;
300 gap: 132px;
301 padding: 42px 32px;
302 position: relative;
303 align-self: stretch;
304 width: 100%;
305 overflow: hidden;
306 }
307
308 .DWTC-hub-d .hero-top .hero-image {
309 position: absolute;
310 top: 0;
311 left: 0;
312 right: 0;
313 bottom: 0;
314 object-fit: cover;
315 width: 100%;
316 height: 100%;
317
318 }
319
320 .hero-top .cta-container {
321 align-items: flex-end;
322 display: flex;
323 flex-grow: 1;
324 justify-content: flex-end;
325 width: fit-content;
326 z-index: 3;
327 position: absolute;
328 left: 50%;
329 top: 50%;
330 transform: translate(-50%, -50%);
331 }
332
333 .hero-top .cta-container .view-button {
334 align-items: center;
335 background: radial-gradient(107.32% 141.42% at 0% 0%, rgba(244, 244, 244, 0.28) 0%, rgba(233, 233, 233, 0.34) 100%);
336 border: 1px solid rgba(244, 244, 244, 0.56);
337 border-radius: 40px;
338 display: flex;
339 gap: 16px;
340 height: 54px;
341 padding: 20px 0px;
342 transition: background-color 0.3s ease;
343 width: 186px;
344 }
345
346 .hero-top .cta-container .view-button .arrow-wrapper {
347 align-items: center;
348 background-color: #000;
349 border-radius: 50%;
350 display: flex;
351 height: 46px;
352 justify-content: center;
353 margin-left: 4px;
354 width: 46px;
355 }
356
357 .hero-top .cta-container .view-button .arrow-wrapper i {
358 color: #ffffff;
359 font-size: 16px;
360 }
361
362 .hero-top .cta-container .view-button:hover {
363 background: none;
364 background-color: #000;
365 border-color: #000;
366 }
367
368 .hero-top .cta-container .view-button .label {
369 color: #fff;
370 font-family: "DIN Pro-Medium", Helvetica;
371 font-weight: 500;
372 font-size: 18px;
373 letter-spacing: -0.72px;
374 line-height: 100%;
375 text-box-cap: both alphabetic;
376 text-box-trim: trim-both;
377 transition: color 0.3s ease;
378 }
379
380 .hero-top .cta-container .view-button:hover .label {
381 color: #ffffff;
382 }
383
384 .hero-top .cta-container .view-button .arrow-wrapper .arrow-right {
385 background-color: #fff;
386 -webkit-mask-image: url("assets/images/svg/btn-arrow-right.svg");
387 mask-image: url("assets/images/svg/btn-arrow-right.svg");
388 -webkit-mask-repeat: no-repeat;
389 mask-repeat: no-repeat;
390 background-position: 50% 50%;
391 width: 14px;
392 height: 10px;
393 transition: background-color 0.3s ease;
394 }
395
396 .hero-top .cta-container .view-button:hover .arrow-wrapper .arrow-right {
397 background-color: #fff;
398 }
399.watch-video-row {
400 position: absolute;
401 top: 82%;
402 right: 125px;
403 z-index: 10;
404}
405
406.watch-video-btn {
407 display: inline-block;
408 width: fit-content;
409}
410
411.watch-video-link {
412 display: inline-flex;
413 align-items: center;
414 justify-content: center;
415 gap: 8px;
416 padding: 20px 30px;
417 border: 1px solid #ffffff;
418 border-radius: 999px;
419 text-decoration: none;
420 font-weight: 600;
421 font-size: 18px;
422 transition: all 0.3s ease;
423 white-space: nowrap;
424 cursor: pointer;
425 backdrop-filter: blur(40px) brightness(100%);
426 border: 1px solid rgba(243, 243, 243, 0.5490196078);
427 color: #fff;
428}
429
430 .watch-video-link .text{
431 line-height: normal;
432}
433
434.watch-video-link:hover {
435 background-color: var(--white);
436 border-color: var(--white);
437 color: var(--brand-color-5);
438}
439
440.watch-video-link .dwtc-hub-arrow-small {
441 font-size: 16px;
442 transition: transform 0.3s ease;
443}
444
445 .header-content .content-container .article-header .heading-container .heading-wrapper .dwtc-hub-youtube:before {
446 color: var(--white);
447}
448
449.watch-video-link:hover .dwtc-hub-arrow-small {
450 transform: translateX(4px);
451}
452.content-title a{
453 color: var(--white);
454}
455
456.content-title a:hover{
457 color: rgb(174, 153, 98);
458}
459 .content-title a[href=""],
460.content-title a[href="#"] {
461 pointer-events: none;
462 cursor: default;
463
464}
465
466 .dwtc-way-ihero .header-content .title-wrapper h1.detail-title {
467 display: none;
468 }
469
470 .dwtc-way-ihero .header-content .title-wrapper h1.dwtc-way-title {
471 display: block !important;
472 }
473
474 .dwtc-way-ihero .header-content .heading-container {
475 border: none;
476 padding: 0 0 35px 18px;
477 }
478
479 .dwtc-way-ihero .header-content .content-date {
480 display: none;
481 }
482
483 .dwtc-way-ihero .header-content .content-details {
484 display: none !important;
485 }
486
487 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .short-description {
488 display: block !important;
489 color: #ffffff;
490 font-family: "DIN Pro-Light", Helvetica;
491 font-size: 24px;
492 font-weight: 300;
493 letter-spacing: -0.96px;
494 line-height: 120%;
495 }
496
497 @media (min-width: 1025px) {
498 .hero-top {
499 min-height: 748px;
500 justify-content: end;
501 }
502}
503
504 @media (max-width: 991.98px) {
505 .DWTC-hub-d .hero-top {
506 padding: 32px 28px;
507 }
508
509 }
510
511
512
513 @media (max-width: 575px) {
514 .dwtc-hub-play-button {
515 font-size: 10px;
516 }
517 .header-content .content-container .heading-container {
518 margin-top: 20px;
519 }
520 .header-content .content-container .article-header .heading-container .heading-wrapper{
521 width: 100%;
522 }
523 }
524 @media (max-width: 421px) {
525
526 .header-content .content-container .heading-container {
527 margin-top: 100px;
528 }
529 }
530 @media (max-width: 768px) {
531 .dwtc-hub-play-button {
532 font-size: 10px;
533 }
534 .watch-video-row {
535 position: absolute;
536 top: 96%;
537 right: 0px;
538 z-index: 10;
539 }
540 .heading-wrapper {
541 flex-direction: column-reverse; /* Moves last element to top */
542 }
543
544 .via-youtube {
545 order: -1;
546 display: flex !important; /* override d-none on mobile */
547 }
548 .spotify-player-wrapper .player-time {
549 width: unset;
550
551 }
552 }
553 @media (max-width: 1160px) {
554 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .short-description {
555 font-size: 16px;
556 letter-spacing: -0.64px;
557 line-height: 100%;
558 }
559 .spotify-player-wrapper {
560 width: 100% !important;
561 }
562 }
563 @media (max-width: 1750px) {
564 .header-content .content-container .featured .mobile-episode-description .content-details .duration i {
565 color: #fff;
566 font-size: 18px;
567 }
568
569 .header-content .content-container .featured .mobile-episode-description .content-details .activity .comments,
570 .header-content .content-container .featured .mobile-episode-description .content-details .activity .likes i {
571 color: #fff;
572 font-size: 18px;
573 cursor: pointer;
574 }
575.header-content .content-container .article-header .heading-container .heading-wrapper {
576 margin-top: 15%;
577}
578 .header-content .content-container .featured .mobile-episode-description .description {
579 color: var(--white);
580 }
581 .header-content .content-container .featured .mobile-episode-description .content-details .date .text,
582 .header-content .content-container .featured .mobile-episode-description .content-details .duration .text,
583 .header-content .content-container .featured .mobile-episode-description .content-details .activity .comments .text,
584 .header-content .content-container .featured .mobile-episode-description .content-details .activity .likes .text{
585 color: var(--white) !important;
586 }
587 }
588
589 .body-content p img{ height: auto;}
590</style>
591
592
593<#macro formatTimeAgo inputDate>
594 <#assign cleanedDate=inputDate?replace("[ ,]", " " , "r" )?trim>
595 <#attempt>
596 <#assign parsedDate=cleanedDate?datetime("M/dd/yy hh:mm a")>
597 <#recover>
598 <#assign parsedDate=cleanedDate?datetime("M/dd/yyyy hh:mm a")>
599 </#attempt>
600
601 <#assign now=.now>
602 <#assign diffInMillis=now?long - parsedDate?long>
603 <#assign diffInSeconds=diffInMillis / 1000>
604 <#assign diffInMinutes=diffInSeconds / 60>
605 <#assign diffInHours=diffInMinutes / 60>
606 <#assign diffInDays=diffInHours / 24>
607
608 <#if diffInSeconds < 60>
609 ${diffInSeconds?int} seconds
610 <#elseif diffInMinutes < 60>
611 ${diffInMinutes?int} minutes
612 <#elseif diffInHours < 24>
613 ${diffInHours?int} hours
614 <#else>
615 ${diffInDays?int} days
616 </#if>
617</#macro>
618
619<#assign vocabLocalService=serviceLocator.findService("com.liferay.asset.kernel.service.AssetVocabularyLocalService") />
620<#assign hubContentDataResponse=restClient.get("/c/dwtchubcontents/${ObjectEntry_objectEntryId.getData()}?fields=taxonomyCategoryBriefs") />
621
622<#if hubContentDataResponse?has_content && hubContentDataResponse.taxonomyCategoryBriefs??>
623 <#assign categories=hubContentDataResponse.taxonomyCategoryBriefs />
624 <#if categories?has_content && categories??>
625 <div class="d-none" id="object-selected-categories">
626 <#list categories as category>
627 <div class="taxonomy-category">
628 <div class="id">
629 ${category.taxonomyCategoryId}
630 </div>
631 <div class="name">
632 ${category.taxonomyCategoryName}
633 </div>
634 </div>
635 </#list>
636 </div>
637 </#if>
638</#if>
639
640<#assign scopeGroupId=themeDisplay.getScopeGroupId()>
641<#assign contentCommentData = restClient.get("/c/usercomments/scopes/${scopeGroupId}?filter=r_hubContentUserComments_c_dwtcHubContentId eq '${ObjectEntry_objectEntryId.getData()}'")>
642<#assign videoPreviewURL="" />
643<#assign previewURL="" />
644
645<#if (.data_model["ObjectField_65541#previewURL"].getData())?? &&
646 .data_model["ObjectField_65541#previewURL"].getData() !="">
647 <#assign videoPreviewURL=.data_model["ObjectField_65541#previewURL"].getData()!"">
648</#if>
649
650<#if (.data_model["ObjectField_65537#previewURL"].getData())?? &&
651.data_model["ObjectField_65537#previewURL"].getData() !="">
652 <#assign previewURL=.data_model["ObjectField_65537#previewURL"].getData()!"">
653</#if>
654
655<div class="d-none" id="hub-content-id">
656 ${ObjectEntry_objectEntryId.getData()}
657</div>
658
659<#assign hasSpotify = false />
660
661<#list categories as cat>
662 <#if cat.taxonomyCategoryName?lower_case == "spotify">
663 <#assign hasSpotify = true />
664 </#if>
665</#list>
666
667<#if categories?has_content && categories??>
668 <#list categories as category>
669 <#if category.taxonomyCategoryName?lower_case=="spotify" || category.taxonomyCategoryName?lower_case=="podcast">
670 <#-- Code for Podcast Section --></#-->
671 <div class="hero-top position-relative gradientbg">
672 <#if videoPreviewURL==''>
673 <div>
674 <img class="hero-image" src="${previewURL}" alt="Media Image" />
675 </div>
676 <#else>
677 <div>
678 <video class="hero-image" src="${videoPreviewURL}" poster="${previewURL}" muted playsinline preload="auto"
679 id="hero-video" controls></video>
680 </div>
681 <div class="cta-container">
682 <button class="view-button">
683 <div class="arrow-wrapper">
684 <i class="dwtc-hub-arrow-small"></i>
685 </div>
686
687 <div class="label" data-lfr-editable-id="play-button-text" data-lfr-editable-type="text">
688 ${languageUtil.get(locale, "see-video")}
689 </div>
690 </button>
691 </div>
692 </#if>
693 <div class="container-fluid">
694 <div class="header-content">
695 <div class="title-wrapper ">
696 <h1 class="detail-title mb-3"><span class='strong'>DWTC</span> Hub ${category.taxonomyCategoryName}</h1>
697 <h1 class="dwtc-way-title d-none"><span class='strong'>DWTC</span> Way</h1>
698 </div>
699 <div class="content-container">
700 <div class="featured">
701 <div class="heading-container border-bottom-0 border-left-0 p-0">
702 <div class="heading-wrapper" id="player-wrapper">
703 <div class="spotify-player-wrapper">
704 <div class="player">
705
706 <#if hasSpotify>
707 <div class="spotify-icon dwtc-hub-spotify"></div>
708 </#if>
709
710 <#if (.data_model["ObjectField_65533#previewURL"].getData())?? &&
711 .data_model["ObjectField_65533#previewURL"].getData() !="">
712 <audio id="audio" src="${.data_model["ObjectField_65533#previewURL"].getData()}"></audio>
713 </#if>
714 <div class="player-content">
715 <div class="cover-art d-flex align-items-center justify-content-center">
716 <img src="/documents/d/guest/dwtc-logo-blue-outline" alt="Logo" />
717 </div>
718 <div class="control-section">
719
720 <div class="video-heading">
721 <div id="mediaTitle">${ObjectField_title.getData()}</div>
722
723 </div>
724 <div class="bottom-section">
725 <div class="seek-controls">
726 <button id="backward" class="player-rewind-backward"></button>
727 <input type="range" id="seekBar" class="seek-bar" min="0" value="0" max="372.715083">
728 <button id="forward" class="player-rewind-forward"></button>
729 <div class="player-time">
730 <span id="duration">0:00</span>
731
732 </div>
733 <div class="player-dots">...</div>
734 <button id="playPause">
735 <i class="dwtc-hub-play-button"></i>
736 <svg class="lexicon-icon lexicon-icon-pause d-none" role="presentation">
737 <use href="/o/classic-theme/images/clay/icons.svg#pause"></use>
738 </svg>
739 </button>
740 </div>
741 </div>
742 </div>
743 </div>
744 </div>
745 </div>
746
747 <div class="mobile-episode-description">
748 <div class="episode-intro">${languageUtil.get(locale, "about-the-episode")}</div>
749
750 <p class="description">
751 ${ObjectField_shortDescription.getData()}
752 </p>
753
754 <div class="content-details">
755 <div class="duration">
756 <i class="dwtc-hub-clock"></i>
757 <div class="text">
758 0 Sec
759 </div>
760 </div>
761
762 <div class="date">
763 <div class="text">
764 <#if (ObjectField_displayDate.getData())??>
765 ${ObjectField_displayDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
766 </#if>
767 <!-- <#if (ObjectEntry_createDate.getData())??>
768 ${ObjectEntry_createDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
769 </#if>
770 <#if (ObjectEntry_modifiedDate.getData())??>
771 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
772 </#if>-->
773 </div>
774 </div>
775
776 <div class="activity">
777 <div class="comments">
778 <i class="dwtc-hub-chat-bubble"></i>
779 <div class="text">${contentCommentData.totalCount}</div>
780 </div>
781
782 <div class="likes">
783 <i class="dwtc-hub-like like-btn" id="dwtc-hub-like-mobile-btn"></i>
784 <div class="text like-count" id="dwtc-hub-like--mobile-count">0</div>
785 </div>
786 </div>
787 </div>
788 </div>
789 </div>
790 </div>
791 <div class="episode-description">
792 <div class="episode-intro">${languageUtil.get(locale, "about-the-episode")}</div>
793 <p class="description">
794 ${ObjectField_shortDescription.getData()}
795 </p>
796 <div class="content-details">
797 <div class="duration">
798 <i class="dwtc-hub-clock"></i>
799 <div class="text">
800 0 Sec
801 </div>
802 </div>
803 <div class="date">
804 <div class="text">
805 <#if (ObjectField_displayDate.getData())??>
806 ${ObjectField_displayDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
807 </#if>
808 <!-- <#if (ObjectEntry_createDate.getData())??>
809 ${ObjectEntry_createDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
810 </#if>
811 <#if (ObjectEntry_modifiedDate.getData())??>
812 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
813 </#if> -->
814 </div>
815 </div>
816 <div class="activity">
817 <div class="comments">
818 <i class="dwtc-hub-chat-bubble"></i>
819 <div class="text">${contentCommentData.totalCount}</div>
820 </div>
821 <div class="likes">
822 <i class="dwtc-hub-like like-btn" id="dwtc-hub-like-btn"></i>
823 <div class="text like-count" id="dwtc-hub-like-count">0</div>
824 </div>
825 </div>
826 </div>
827 </div>
828 </div>
829 </div>
830
831 </div>
832 </div>
833 </div>
834
835 <#break>
836 <#else>
837 <#-- Code for Events Section --></#-->
838 <div class="hero-top position-relative gradientbg">
839 <#if videoPreviewURL==''>
840 <div>
841 <img class="hero-image" src="${previewURL}" alt="Media Image" />
842 </div>
843 <#else>
844 <div>
845 <video class="hero-image" src="${videoPreviewURL}" poster="${previewURL}" muted loop playsinline
846 preload="auto" id="hero-video" controls></video>
847 </div>
848 <!-- <div class="cta-container">
849 <button class="view-button">
850 <div class="arrow-wrapper">
851 <i class="dwtc-hub-arrow-small"></i>
852 </div>
853
854 <div class="label" data-lfr-editable-id="play-button-text" data-lfr-editable-type="text">
855 ${languageUtil.get(locale, "see-video")}</div>
856 </button>
857 </div> -->
858 </#if>
859 <!-- overlay layer -->
860 <div class="video-overlay"></div>
861 <div class="container-fluid">
862 <div class="header-content">
863 <div class="title-wrapper ">
864 <#assign constVocabOfContentType="DWTC Social Content" />
865
866 <h1 class="detail-title"><span class='strong'>DWTC</span> Hub
867 ${category.taxonomyCategoryName}</h1>
868 <h1 class="dwtc-way-title d-none"><span class='strong'>DWTC</span> Way</h1>
869 </div>
870
871 <div class="content-container">
872 <div class="article-header">
873 <div class="heading-container border-bottom-0 border-left-0 p-0">
874 <div class="heading-wrapper">
875 <!-- <div class="content-date">
876
877 <#if ObjectEntry_createDate.getData()??>
878 ${ObjectEntry_createDate.getData()?date("M/d/yy h:mm a")?string("dd MMM yyyy")}
879
880 </#if>
881
882 </div> -->
883
884 <#if category.taxonomyCategoryName?lower_case=="youtube" ||
885 category.taxonomyCategoryName?lower_case=="instagram" ||
886 category.taxonomyCategoryName?lower_case=="linkedin">
887 <a class="provider-container d-none" href="${ObjectField_postUrl.getData()}" target="_blank">
888 <i class="dwtc-hub-${category.taxonomyCategoryName?lower_case}"></i>
889 <div class="provider-name">VIA ${category.taxonomyCategoryName?upper_case}
890 </div>
891 </a>
892 </#if>
893
894 <h2 class="content-title">
895 <a href="/l/${ObjectEntry_objectEntryId.getData()}">
896 ${ObjectField_title.getData()}
897 </a>
898 </h2>
899 <p class="short-description d-none">
900 ${ObjectField_shortDescription.getData()}
901 </p>
902
903 <div class="content-details">
904 <div class="duration">
905 <i class="dwtc-hub-clock"></i>
906 <div class="text">
907 0 Sec
908 </div>
909 </div>
910
911 <div class="date">
912 <div class="text">
913 <#if (ObjectField_displayDate.getData())??>
914 ${ObjectField_displayDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
915 </#if>
916 <!-- <#if (ObjectEntry_createDate.getData())??>
917 ${ObjectEntry_createDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
918 </#if>
919 <#if (ObjectEntry_modifiedDate.getData())??>
920
921 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d,yyyy")}
922 </#if> -->
923 </div>
924 </div>
925
926 <div class="activity">
927 <div class="comments">
928 <i class="dwtc-hub-chat-bubble"></i>
929 <div class="text">${contentCommentData.totalCount}</div>
930 </div>
931
932 <div class="likes">
933 <i class="dwtc-hub-like" id="dwtc-hub-like-btn"></i>
934 <div class="text" id="dwtc-hub-like-count">0</div>
935 </div>
936 </div>
937 </div>
938
939 <#if videoPreviewURL!=''>
940 <div class="watch-video-btn mt-4 mb-2 view-button" id="">
941 <div class="watch-video-link d-flex align-items-center">
942 <div class="text">Watch Video</div>
943 <i class="ml-3 dwtc-hub-arrow-small"></i>
944 </div>
945 </div>
946 </#if>
947
948 </div>
949 </div>
950 </div>
951 </div>
952
953 </div>
954 </div>
955 </div>
956 <#break>
957 </#if>
958 </#list>
959
960 <#else>
961 <div class="hero-top position-relative gradientbg">
962 <#if videoPreviewURL==''>
963 <div>
964 <img class="hero-image" src="${previewURL}" alt="Media Image" />
965 </div>
966 <#else>
967 <div>
968 <video class="hero-image" src="${videoPreviewURL}" poster="${previewURL}" muted loop playsinline
969 preload="auto" id="hero-video" controls></video>
970 </div>
971 <!-- <div class="cta-container">
972 <button class="view-button">
973 <div class="arrow-wrapper">
974 <i class="dwtc-hub-arrow-small"></i>
975 </div>
976
977 <div class="label" data-lfr-editable-id="play-button-text" data-lfr-editable-type="text">
978 ${languageUtil.get(locale, "see-video")}</div>
979 </button>
980 </div> -->
981 </#if>
982 <!-- overlay layer -->
983 <div class="video-overlay"></div>
984 <div class="container-fluid">
985 <div class="header-content">
986 <div class="title-wrapper ">
987 <#assign constVocabOfContentType="DWTC Social Content" />
988
989 <h1 class="detail-title"><span class='strong'>DWTC</span> Hub</h1>
990 <h1 class="dwtc-way-title d-none"><span class='strong'>DWTC</span> Way</h1>
991 </div>
992
993 <div class="content-container">
994 <div class="article-header">
995 <div class="heading-container border-bottom-0 border-left-0 p-0">
996 <div class="heading-wrapper">
997 <!-- <div class="content-date">
998
999 <#if ObjectEntry_createDate.getData()??>
1000 ${ObjectEntry_createDate.getData()?date("M/d/yy h:mm a")?string("dd MMM yyyy")}
1001
1002 </#if>
1003
1004 </div> -->
1005
1006 <h2 class="content-title">
1007 <a href="/l/${ObjectEntry_objectEntryId.getData()}">
1008 ${ObjectField_title.getData()}
1009 </a>
1010 </h2>
1011 <p class="short-description d-none">
1012 ${ObjectField_shortDescription.getData()}
1013 </p>
1014
1015 <div class="content-details">
1016 <div class="duration">
1017 <i class="dwtc-hub-clock"></i>
1018 <div class="text">
1019 0 Sec
1020 </div>
1021 </div>
1022
1023 <div class="date">
1024 <div class="text">
1025 <#if (ObjectField_displayDate.getData())??>
1026 ${ObjectField_displayDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
1027 </#if>
1028 <!-- <#if (ObjectEntry_createDate.getData())??>
1029 ${ObjectEntry_createDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
1030 </#if>
1031 <#if (ObjectEntry_modifiedDate.getData())??>
1032
1033 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d,yyyy")}
1034 </#if> -->
1035 </div>
1036 </div>
1037
1038 <div class="activity">
1039 <div class="comments">
1040 <i class="dwtc-hub-chat-bubble"></i>
1041 <div class="text">${contentCommentData.totalCount}</div>
1042 </div>
1043
1044 <div class="likes">
1045 <i class="dwtc-hub-like" id="dwtc-hub-like-btn"></i>
1046 <div class="text" id="dwtc-hub-like-count">0</div>
1047 </div>
1048 </div>
1049 </div>
1050
1051 <#if videoPreviewURL!=''>
1052 <div class="watch-video-btn mt-4 mb-2 view-button" id="">
1053 <div class="watch-video-link d-flex align-items-center">
1054 <div class="text">Watch Video</div>
1055 <i class="ml-3 dwtc-hub-arrow-small"></i>
1056 </div>
1057 </div>
1058 </#if>
1059
1060 </div>
1061 </div>
1062 </div>
1063 </div>
1064
1065 </div>
1066 </div>
1067 </div>
1068</#if>
1069
1070<script>
1071 $(document).ready(function () {
1072 // Video play/pause toggle (your original logic)
1073 const $button = $(".view-button");
1074 const $video = $(".hero-image");
1075
1076 if ($video.length && $video.prop("tagName").toLowerCase() === "video") {
1077 $button.on("click", function () {
1078 const videoEl = $video.get(0);
1079 if (videoEl.paused) {
1080 videoEl.play();
1081 } else {
1082 videoEl.pause();
1083 }
1084 });
1085 }
1086
1087 // Audio play/pause toggle
1088 const $audio = $("#audio");
1089 const $playPauseBtn = $("#playPause");
1090 const $playIcon = $playPauseBtn.find(".dwtc-hub-play-button");
1091 const $pauseIcon = $playPauseBtn.find(".lexicon-icon-pause");
1092
1093 if ($audio.length) {
1094 console.log('$audio',$audio);
1095
1096 $playPauseBtn.on("click", function () {
1097 console.log('btn clicked');
1098
1099 const audioEl = $audio.get(0);
1100 console.log('audioEl',audioEl,audioEl.paused);
1101 console.log('$playIcon',$playIcon,'pauseIcon',pauseIcon);
1102
1103 if (audioEl.paused) {
1104 audioEl.play();
1105 $playIcon.addClass("d-none");
1106 $pauseIcon.removeClass("d-none");
1107 } else {
1108 audioEl.pause();
1109 $playIcon.removeClass("d-none");
1110 $pauseIcon.addClass("d-none");
1111 }
1112 });
1113 }
1114 });
1115
1116 document.querySelectorAll('.content-title a').forEach(link => {
1117 if (link.href === window.location.href) {
1118 link.style.pointerEvents = 'none';
1119 link.style.cursor = 'default';
1120 }
1121});
1122</script>
The string doesn't match the expected date/time/date-time format. The string to parse was: "٠٤/١٢/٢٥ ٠٧:٠٠ ص". The expected format was: "M/d/yy h:mm a".
The nested reason given follows:
Unparseable date: "٠٤/١٢/٢٥ ٠٧:٠٠ ص"
----
FTL stack trace ("~" means nesting-related):
- Failed at: ${ObjectEntry_createDate.getData()?da... [in template "68068712855087#53307#null" at line 878, column 193]
----
1<style>
2 .hero-top .video-overlay {
3 position: absolute;
4 top: 0; left: 0; right: 0; bottom: 0;
5 background: linear-gradient(
6 to top,
7 rgba(0,0,0,0.3) 0%, /* lighter near bottom */
8 rgba(0,0,0,0.75) 100% /* darker toward top */
9 );
10 z-index: 2;
11 /* pointer-events: none; */
12}
13 .hero-top .hero-image {
14 position: absolute;
15 top: 0; left: 0; right: 0; bottom: 0;
16 width: 100%;
17 height: 100%;
18 object-fit: cover;
19 z-index: 1; /* video below header */
20 pointer-events: auto; /* allow clicks */
21 cursor: pointer;
22}
23
24.header-content {
25 position: relative;
26 z-index: 2; /* above video */
27 /* pointer-events: none; */
28}
29 /* banner gradient hidding content
30 .header-content{
31
32 z-index: 1;
33
34 }*/
35 .header-content .content-container .article-header .heading-container .heading-wrapper{
36 gap: 32px !important;
37 }
38 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .provider-container:hover .provider-name {
39 text-decoration: underline;
40 }
41
42 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration {
43 align-items: center;
44 display: flex;
45 gap: 6px;
46 }
47
48 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration i {
49 color: #fff;
50 font-size: 18px;
51 }
52
53 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration .text {
54 color: #fff;
55 font-family: "URW DIN-Regular", Helvetica;
56 font-weight: 400;
57 font-size: 14px;
58 letter-spacing: 0.56px;
59 line-height: 100%;
60 text-box-cap: cap alphabetic;
61 text-box-trim: trim-both;
62 text-transform: uppercase;
63 }
64
65 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .date .text {
66 color: #fff;
67 font-family: "URW DIN-Regular", Helvetica;
68 font-weight: 400;
69 font-size: 14px;
70 letter-spacing: 0.56px;
71 line-height: 100%;
72 text-box-cap: cap alphabetic;
73 text-box-trim: trim-both;
74 text-transform: uppercase;
75 }
76
77 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity {
78 align-items: center;
79 display: flex;
80 flex-direction: row;
81 gap: 16px;
82 }
83
84 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments,
85 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes {
86 align-items: center;
87 display: flex;
88 gap: 8px;
89 }
90
91 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i,
92 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i {
93 color: #fff;
94 cursor: pointer;
95 font-size: 18px;
96 }
97
98
99 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration {
100 align-items: center;
101 display: flex;
102 gap: 6px;
103 }
104
105 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration i {
106 color: #fff;
107 font-size: 18px;
108 }
109
110 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration .text {
111 color: #fff;
112 font-family: "URW DIN-Regular", Helvetica;
113 font-weight: 400;
114 font-size: 14px;
115 letter-spacing: 0.56px;
116 line-height: 100%;
117 text-box-cap: cap alphabetic;
118 text-box-trim: trim-both;
119 text-transform: uppercase;
120 }
121
122 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .date .text {
123 color: #fff;
124 font-family: "URW DIN-Regular", Helvetica;
125 font-weight: 400;
126 font-size: 14px;
127 letter-spacing: 0.56px;
128 line-height: 100%;
129 text-box-cap: cap alphabetic;
130 text-box-trim: trim-both;
131 text-transform: uppercase;
132 }
133
134 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity {
135 align-items: center;
136 display: flex;
137 flex-direction: row;
138 gap: 16px;
139 }
140
141 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments,
142 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes {
143 align-items: center;
144 display: flex;
145 gap: 8px;
146 }
147
148 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i,
149 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i {
150 color: #fff;
151 cursor: pointer;
152 font-size: 18px;
153 }
154
155 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i:hover::before {
156 content: "\e91c";
157 }
158
159 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i:hover::before {
160 content: "\e91d";
161 }
162
163 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments .text,
164 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes .text {
165 color: #fff;
166 font-family: "URW DIN-Regular", Helvetica;
167 font-weight: 400;
168 font-size: 14px;
169 letter-spacing: 0.56px;
170 line-height: 100%;
171 text-box-cap: cap alphabetic;
172 text-box-trim: trim-both;
173 text-transform: uppercase;
174 }
175
176 /* Featured */
177 .header-content .featured {
178 display: flex;
179 width: 100%;
180 }
181
182 .header-content .featured .mobile-episode-description {
183 display: none;
184 }
185
186 .header-content .featured .episode-description {
187 align-items: flex-start;
188 display: flex;
189 flex-direction: column;
190 gap: 24px;
191 justify-content: flex-end;
192 max-width: 597px;
193 padding-left: 24px;
194 padding-bottom: 83px;
195 width: 100%;
196 }
197
198 .header-content .featured .episode-description .episode-intro {
199 color: #ffffff;
200 font-family: "DIN Pro-Medium", Helvetica;
201 font-size: 24px;
202 font-weight: 500;
203 letter-spacing: -0.96px;
204 line-height: 100%;
205 }
206
207 .header-content .featured .episode-description .description {
208 color: #fff;
209 font-family: "DIN Pro-Regular", Helvetica;
210 font-size: 16px;
211 font-weight: 400;
212 letter-spacing: -0.32px;
213 line-height: 120%;
214 }
215
216 .header-content .featured .episode-description .content-details {
217 align-items: center;
218 display: flex;
219 flex-direction: row;
220 gap: 20px;
221 }
222
223 .header-content .featured .episode-description .content-details .duration {
224 align-items: center;
225 display: flex;
226 gap: 6px;
227 }
228
229 .header-content .featured .episode-description .content-details .duration i {
230 color: #fff;
231 font-size: 18px;
232 }
233
234 .header-content .featured .episode-description .content-details .duration .text {
235 color: #fff;
236 font-family: "URW DIN-Regular", Helvetica;
237 font-weight: 400;
238 font-size: 14px;
239 letter-spacing: 0.56px;
240 line-height: 100%;
241 text-box-cap: cap alphabetic;
242 text-box-trim: trim-both;
243 text-transform: uppercase;
244 }
245
246 .header-content .featured .episode-description .content-details .date .text {
247 color: #fff;
248 font-family: "URW DIN-Regular", Helvetica;
249 font-weight: 400;
250 font-size: 14px;
251 letter-spacing: 0.56px;
252 line-height: 100%;
253 text-box-cap: cap alphabetic;
254 text-box-trim: trim-both;
255 text-transform: uppercase;
256 }
257
258
259 .header-content .featured .episode-description .content-details .activity {
260 align-items: center;
261 display: flex;
262 flex-direction: row;
263 gap: 16px;
264 }
265
266 .header-content .featured .episode-description .content-details .activity .comments,
267 .header-content .featured .episode-description .content-details .activity .likes {
268 align-items: center;
269 display: flex;
270 gap: 8px;
271 }
272
273 .header-content .featured .episode-description .content-details .activity .comments i,
274 .header-content .featured .episode-description .content-details .activity .likes i {
275 color: #fff;
276 cursor: pointer;
277 font-size: 18px;
278 }
279
280 .header-content .featured .episode-description .content-details .activity .comments i:hover::before {
281 content: "\e91c";
282 }
283
284 .header-content .featured .episode-description .content-details .activity .likes i:hover::before {
285 content: "\e91d";
286 }
287
288 .DWTC-hub-d {
289 display: flex;
290 flex-direction: column;
291 align-items: flex-start;
292 position: relative;
293 }
294
295 .DWTC-hub-d .hero-top {
296 display: flex;
297 flex-direction: column;
298 height: 100%;
299 align-items: flex-start;
300 gap: 132px;
301 padding: 42px 32px;
302 position: relative;
303 align-self: stretch;
304 width: 100%;
305 overflow: hidden;
306 }
307
308 .DWTC-hub-d .hero-top .hero-image {
309 position: absolute;
310 top: 0;
311 left: 0;
312 right: 0;
313 bottom: 0;
314 object-fit: cover;
315 width: 100%;
316 height: 100%;
317
318 }
319
320 .hero-top .cta-container {
321 align-items: flex-end;
322 display: flex;
323 flex-grow: 1;
324 justify-content: flex-end;
325 width: fit-content;
326 z-index: 3;
327 position: absolute;
328 left: 50%;
329 top: 50%;
330 transform: translate(-50%, -50%);
331 }
332
333 .hero-top .cta-container .view-button {
334 align-items: center;
335 background: radial-gradient(107.32% 141.42% at 0% 0%, rgba(244, 244, 244, 0.28) 0%, rgba(233, 233, 233, 0.34) 100%);
336 border: 1px solid rgba(244, 244, 244, 0.56);
337 border-radius: 40px;
338 display: flex;
339 gap: 16px;
340 height: 54px;
341 padding: 20px 0px;
342 transition: background-color 0.3s ease;
343 width: 186px;
344 }
345
346 .hero-top .cta-container .view-button .arrow-wrapper {
347 align-items: center;
348 background-color: #000;
349 border-radius: 50%;
350 display: flex;
351 height: 46px;
352 justify-content: center;
353 margin-left: 4px;
354 width: 46px;
355 }
356
357 .hero-top .cta-container .view-button .arrow-wrapper i {
358 color: #ffffff;
359 font-size: 16px;
360 }
361
362 .hero-top .cta-container .view-button:hover {
363 background: none;
364 background-color: #000;
365 border-color: #000;
366 }
367
368 .hero-top .cta-container .view-button .label {
369 color: #fff;
370 font-family: "DIN Pro-Medium", Helvetica;
371 font-weight: 500;
372 font-size: 18px;
373 letter-spacing: -0.72px;
374 line-height: 100%;
375 text-box-cap: both alphabetic;
376 text-box-trim: trim-both;
377 transition: color 0.3s ease;
378 }
379
380 .hero-top .cta-container .view-button:hover .label {
381 color: #ffffff;
382 }
383
384 .hero-top .cta-container .view-button .arrow-wrapper .arrow-right {
385 background-color: #fff;
386 -webkit-mask-image: url("assets/images/svg/btn-arrow-right.svg");
387 mask-image: url("assets/images/svg/btn-arrow-right.svg");
388 -webkit-mask-repeat: no-repeat;
389 mask-repeat: no-repeat;
390 background-position: 50% 50%;
391 width: 14px;
392 height: 10px;
393 transition: background-color 0.3s ease;
394 }
395
396 .hero-top .cta-container .view-button:hover .arrow-wrapper .arrow-right {
397 background-color: #fff;
398 }
399.watch-video-row {
400 position: absolute;
401 top: 82%;
402 right: 125px;
403 z-index: 10;
404}
405
406.watch-video-btn {
407 display: inline-block;
408 width: fit-content;
409}
410
411.watch-video-link {
412 display: inline-flex;
413 align-items: center;
414 justify-content: center;
415 gap: 8px;
416 padding: 20px 30px;
417 border: 1px solid #ffffff;
418 border-radius: 999px;
419 text-decoration: none;
420 font-weight: 600;
421 font-size: 18px;
422 transition: all 0.3s ease;
423 white-space: nowrap;
424 cursor: pointer;
425 backdrop-filter: blur(40px) brightness(100%);
426 border: 1px solid rgba(243, 243, 243, 0.5490196078);
427 color: #fff;
428}
429
430 .watch-video-link .text{
431 line-height: normal;
432}
433
434.watch-video-link:hover {
435 background-color: var(--white);
436 border-color: var(--white);
437 color: var(--brand-color-5);
438}
439
440.watch-video-link .dwtc-hub-arrow-small {
441 font-size: 16px;
442 transition: transform 0.3s ease;
443}
444
445 .header-content .content-container .article-header .heading-container .heading-wrapper .dwtc-hub-youtube:before {
446 color: var(--white);
447}
448
449.watch-video-link:hover .dwtc-hub-arrow-small {
450 transform: translateX(4px);
451}
452.content-title a{
453 color: var(--white);
454}
455
456.content-title a:hover{
457 color: rgb(174, 153, 98);
458}
459 .content-title a[href=""],
460.content-title a[href="#"] {
461 pointer-events: none;
462 cursor: default;
463
464}
465
466 .dwtc-way-ihero .header-content .title-wrapper h1.detail-title {
467 display: none;
468 }
469
470 .dwtc-way-ihero .header-content .title-wrapper h1.dwtc-way-title {
471 display: block !important;
472 }
473
474 .dwtc-way-ihero .header-content .heading-container {
475 border: none;
476 padding: 0 0 35px 18px;
477 }
478
479 .dwtc-way-ihero .header-content .content-date {
480 display: none;
481 }
482
483 .dwtc-way-ihero .header-content .content-details {
484 display: none !important;
485 }
486
487 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .short-description {
488 display: block !important;
489 color: #ffffff;
490 font-family: "DIN Pro-Light", Helvetica;
491 font-size: 24px;
492 font-weight: 300;
493 letter-spacing: -0.96px;
494 line-height: 120%;
495 }
496
497 @media (min-width: 1025px) {
498 .hero-top {
499 min-height: 748px;
500 justify-content: end;
501 }
502}
503
504 @media (max-width: 991.98px) {
505 .DWTC-hub-d .hero-top {
506 padding: 32px 28px;
507 }
508
509 }
510
511
512
513 @media (max-width: 575px) {
514 .dwtc-hub-play-button {
515 font-size: 10px;
516 }
517 .header-content .content-container .heading-container {
518 margin-top: 20px;
519 }
520 .header-content .content-container .article-header .heading-container .heading-wrapper{
521 width: 100%;
522 }
523 }
524 @media (max-width: 421px) {
525
526 .header-content .content-container .heading-container {
527 margin-top: 100px;
528 }
529 }
530 @media (max-width: 768px) {
531 .dwtc-hub-play-button {
532 font-size: 10px;
533 }
534 .watch-video-row {
535 position: absolute;
536 top: 96%;
537 right: 0px;
538 z-index: 10;
539 }
540 .heading-wrapper {
541 flex-direction: column-reverse; /* Moves last element to top */
542 }
543
544 .via-youtube {
545 order: -1;
546 display: flex !important; /* override d-none on mobile */
547 }
548 .spotify-player-wrapper .player-time {
549 width: unset;
550
551 }
552 }
553 @media (max-width: 1160px) {
554 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .short-description {
555 font-size: 16px;
556 letter-spacing: -0.64px;
557 line-height: 100%;
558 }
559 .spotify-player-wrapper {
560 width: 100% !important;
561 }
562 }
563 @media (max-width: 1750px) {
564 .header-content .content-container .featured .mobile-episode-description .content-details .duration i {
565 color: #fff;
566 font-size: 18px;
567 }
568
569 .header-content .content-container .featured .mobile-episode-description .content-details .activity .comments,
570 .header-content .content-container .featured .mobile-episode-description .content-details .activity .likes i {
571 color: #fff;
572 font-size: 18px;
573 cursor: pointer;
574 }
575.header-content .content-container .article-header .heading-container .heading-wrapper {
576 margin-top: 15%;
577}
578 .header-content .content-container .featured .mobile-episode-description .description {
579 color: var(--white);
580 }
581 .header-content .content-container .featured .mobile-episode-description .content-details .date .text,
582 .header-content .content-container .featured .mobile-episode-description .content-details .duration .text,
583 .header-content .content-container .featured .mobile-episode-description .content-details .activity .comments .text,
584 .header-content .content-container .featured .mobile-episode-description .content-details .activity .likes .text{
585 color: var(--white) !important;
586 }
587 }
588
589 .body-content p img{ height: auto;}
590</style>
591
592
593<#macro formatTimeAgo inputDate>
594 <#assign cleanedDate=inputDate?replace("[ ,]", " " , "r" )?trim>
595 <#attempt>
596 <#assign parsedDate=cleanedDate?datetime("M/dd/yy hh:mm a")>
597 <#recover>
598 <#assign parsedDate=cleanedDate?datetime("M/dd/yyyy hh:mm a")>
599 </#attempt>
600
601 <#assign now=.now>
602 <#assign diffInMillis=now?long - parsedDate?long>
603 <#assign diffInSeconds=diffInMillis / 1000>
604 <#assign diffInMinutes=diffInSeconds / 60>
605 <#assign diffInHours=diffInMinutes / 60>
606 <#assign diffInDays=diffInHours / 24>
607
608 <#if diffInSeconds < 60>
609 ${diffInSeconds?int} seconds
610 <#elseif diffInMinutes < 60>
611 ${diffInMinutes?int} minutes
612 <#elseif diffInHours < 24>
613 ${diffInHours?int} hours
614 <#else>
615 ${diffInDays?int} days
616 </#if>
617</#macro>
618
619<#assign vocabLocalService=serviceLocator.findService("com.liferay.asset.kernel.service.AssetVocabularyLocalService") />
620<#assign hubContentDataResponse=restClient.get("/c/dwtchubcontents/${ObjectEntry_objectEntryId.getData()}?fields=taxonomyCategoryBriefs") />
621
622<#if hubContentDataResponse?has_content && hubContentDataResponse.taxonomyCategoryBriefs??>
623 <#assign categories=hubContentDataResponse.taxonomyCategoryBriefs />
624 <#if categories?has_content && categories??>
625 <div class="d-none" id="object-selected-categories">
626 <#list categories as category>
627 <div class="taxonomy-category">
628 <div class="id">
629 ${category.taxonomyCategoryId}
630 </div>
631 <div class="name">
632 ${category.taxonomyCategoryName}
633 </div>
634 </div>
635 </#list>
636 </div>
637 </#if>
638</#if>
639
640<#assign scopeGroupId=themeDisplay.getScopeGroupId()>
641<#assign contentCommentData = restClient.get("/c/usercomments/scopes/${scopeGroupId}?filter=r_hubContentUserComments_c_dwtcHubContentId eq '${ObjectEntry_objectEntryId.getData()}'")>
642<#assign videoPreviewURL="" />
643<#assign previewURL="" />
644
645<#if (.data_model["ObjectField_65541#previewURL"].getData())?? &&
646 .data_model["ObjectField_65541#previewURL"].getData() !="">
647 <#assign videoPreviewURL=.data_model["ObjectField_65541#previewURL"].getData()!"">
648</#if>
649
650<#if (.data_model["ObjectField_65537#previewURL"].getData())?? &&
651.data_model["ObjectField_65537#previewURL"].getData() !="">
652 <#assign previewURL=.data_model["ObjectField_65537#previewURL"].getData()!"">
653</#if>
654
655<div class="d-none" id="hub-content-id">
656 ${ObjectEntry_objectEntryId.getData()}
657</div>
658
659<#assign hasSpotify = false />
660
661<#list categories as cat>
662 <#if cat.taxonomyCategoryName?lower_case == "spotify">
663 <#assign hasSpotify = true />
664 </#if>
665</#list>
666
667<#if categories?has_content && categories??>
668 <#list categories as category>
669 <#if category.taxonomyCategoryName?lower_case=="spotify" || category.taxonomyCategoryName?lower_case=="podcast">
670 <#-- Code for Podcast Section --></#-->
671 <div class="hero-top position-relative gradientbg">
672 <#if videoPreviewURL==''>
673 <div>
674 <img class="hero-image" src="${previewURL}" alt="Media Image" />
675 </div>
676 <#else>
677 <div>
678 <video class="hero-image" src="${videoPreviewURL}" poster="${previewURL}" muted playsinline preload="auto"
679 id="hero-video" controls></video>
680 </div>
681 <div class="cta-container">
682 <button class="view-button">
683 <div class="arrow-wrapper">
684 <i class="dwtc-hub-arrow-small"></i>
685 </div>
686
687 <div class="label" data-lfr-editable-id="play-button-text" data-lfr-editable-type="text">
688 ${languageUtil.get(locale, "see-video")}
689 </div>
690 </button>
691 </div>
692 </#if>
693 <div class="container-fluid">
694 <div class="header-content">
695 <div class="title-wrapper ">
696 <h1 class="detail-title mb-3"><span class='strong'>DWTC</span> Hub ${category.taxonomyCategoryName}</h1>
697 <h1 class="dwtc-way-title d-none"><span class='strong'>DWTC</span> Way</h1>
698 </div>
699 <div class="content-container">
700 <div class="featured">
701 <div class="heading-container border-bottom-0 border-left-0 p-0">
702 <div class="heading-wrapper" id="player-wrapper">
703 <div class="spotify-player-wrapper">
704 <div class="player">
705
706 <#if hasSpotify>
707 <div class="spotify-icon dwtc-hub-spotify"></div>
708 </#if>
709
710 <#if (.data_model["ObjectField_65533#previewURL"].getData())?? &&
711 .data_model["ObjectField_65533#previewURL"].getData() !="">
712 <audio id="audio" src="${.data_model["ObjectField_65533#previewURL"].getData()}"></audio>
713 </#if>
714 <div class="player-content">
715 <div class="cover-art d-flex align-items-center justify-content-center">
716 <img src="/documents/d/guest/dwtc-logo-blue-outline" alt="Logo" />
717 </div>
718 <div class="control-section">
719
720 <div class="video-heading">
721 <div id="mediaTitle">${ObjectField_title.getData()}</div>
722
723 </div>
724 <div class="bottom-section">
725 <div class="seek-controls">
726 <button id="backward" class="player-rewind-backward"></button>
727 <input type="range" id="seekBar" class="seek-bar" min="0" value="0" max="372.715083">
728 <button id="forward" class="player-rewind-forward"></button>
729 <div class="player-time">
730 <span id="duration">0:00</span>
731
732 </div>
733 <div class="player-dots">...</div>
734 <button id="playPause">
735 <i class="dwtc-hub-play-button"></i>
736 <svg class="lexicon-icon lexicon-icon-pause d-none" role="presentation">
737 <use href="/o/classic-theme/images/clay/icons.svg#pause"></use>
738 </svg>
739 </button>
740 </div>
741 </div>
742 </div>
743 </div>
744 </div>
745 </div>
746
747 <div class="mobile-episode-description">
748 <div class="episode-intro">${languageUtil.get(locale, "about-the-episode")}</div>
749
750 <p class="description">
751 ${ObjectField_shortDescription.getData()}
752 </p>
753
754 <div class="content-details">
755 <div class="duration">
756 <i class="dwtc-hub-clock"></i>
757 <div class="text">
758 0 Sec
759 </div>
760 </div>
761
762 <div class="date">
763 <div class="text">
764 <#if (ObjectField_displayDate.getData())??>
765 ${ObjectField_displayDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
766 </#if>
767 <!-- <#if (ObjectEntry_createDate.getData())??>
768 ${ObjectEntry_createDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
769 </#if>
770 <#if (ObjectEntry_modifiedDate.getData())??>
771 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
772 </#if>-->
773 </div>
774 </div>
775
776 <div class="activity">
777 <div class="comments">
778 <i class="dwtc-hub-chat-bubble"></i>
779 <div class="text">${contentCommentData.totalCount}</div>
780 </div>
781
782 <div class="likes">
783 <i class="dwtc-hub-like like-btn" id="dwtc-hub-like-mobile-btn"></i>
784 <div class="text like-count" id="dwtc-hub-like--mobile-count">0</div>
785 </div>
786 </div>
787 </div>
788 </div>
789 </div>
790 </div>
791 <div class="episode-description">
792 <div class="episode-intro">${languageUtil.get(locale, "about-the-episode")}</div>
793 <p class="description">
794 ${ObjectField_shortDescription.getData()}
795 </p>
796 <div class="content-details">
797 <div class="duration">
798 <i class="dwtc-hub-clock"></i>
799 <div class="text">
800 0 Sec
801 </div>
802 </div>
803 <div class="date">
804 <div class="text">
805 <#if (ObjectField_displayDate.getData())??>
806 ${ObjectField_displayDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
807 </#if>
808 <!-- <#if (ObjectEntry_createDate.getData())??>
809 ${ObjectEntry_createDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
810 </#if>
811 <#if (ObjectEntry_modifiedDate.getData())??>
812 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
813 </#if> -->
814 </div>
815 </div>
816 <div class="activity">
817 <div class="comments">
818 <i class="dwtc-hub-chat-bubble"></i>
819 <div class="text">${contentCommentData.totalCount}</div>
820 </div>
821 <div class="likes">
822 <i class="dwtc-hub-like like-btn" id="dwtc-hub-like-btn"></i>
823 <div class="text like-count" id="dwtc-hub-like-count">0</div>
824 </div>
825 </div>
826 </div>
827 </div>
828 </div>
829 </div>
830
831 </div>
832 </div>
833 </div>
834
835 <#break>
836 <#else>
837 <#-- Code for Events Section --></#-->
838 <div class="hero-top position-relative gradientbg">
839 <#if videoPreviewURL==''>
840 <div>
841 <img class="hero-image" src="${previewURL}" alt="Media Image" />
842 </div>
843 <#else>
844 <div>
845 <video class="hero-image" src="${videoPreviewURL}" poster="${previewURL}" muted loop playsinline
846 preload="auto" id="hero-video" controls></video>
847 </div>
848 <!-- <div class="cta-container">
849 <button class="view-button">
850 <div class="arrow-wrapper">
851 <i class="dwtc-hub-arrow-small"></i>
852 </div>
853
854 <div class="label" data-lfr-editable-id="play-button-text" data-lfr-editable-type="text">
855 ${languageUtil.get(locale, "see-video")}</div>
856 </button>
857 </div> -->
858 </#if>
859 <!-- overlay layer -->
860 <div class="video-overlay"></div>
861 <div class="container-fluid">
862 <div class="header-content">
863 <div class="title-wrapper ">
864 <#assign constVocabOfContentType="DWTC Social Content" />
865
866 <h1 class="detail-title"><span class='strong'>DWTC</span> Hub
867 ${category.taxonomyCategoryName}</h1>
868 <h1 class="dwtc-way-title d-none"><span class='strong'>DWTC</span> Way</h1>
869 </div>
870
871 <div class="content-container">
872 <div class="article-header">
873 <div class="heading-container border-bottom-0 border-left-0 p-0">
874 <div class="heading-wrapper">
875 <!-- <div class="content-date">
876
877 <#if ObjectEntry_createDate.getData()??>
878 ${ObjectEntry_createDate.getData()?date("M/d/yy h:mm a")?string("dd MMM yyyy")}
879
880 </#if>
881
882 </div> -->
883
884 <#if category.taxonomyCategoryName?lower_case=="youtube" ||
885 category.taxonomyCategoryName?lower_case=="instagram" ||
886 category.taxonomyCategoryName?lower_case=="linkedin">
887 <a class="provider-container d-none" href="${ObjectField_postUrl.getData()}" target="_blank">
888 <i class="dwtc-hub-${category.taxonomyCategoryName?lower_case}"></i>
889 <div class="provider-name">VIA ${category.taxonomyCategoryName?upper_case}
890 </div>
891 </a>
892 </#if>
893
894 <h2 class="content-title">
895 <a href="/l/${ObjectEntry_objectEntryId.getData()}">
896 ${ObjectField_title.getData()}
897 </a>
898 </h2>
899 <p class="short-description d-none">
900 ${ObjectField_shortDescription.getData()}
901 </p>
902
903 <div class="content-details">
904 <div class="duration">
905 <i class="dwtc-hub-clock"></i>
906 <div class="text">
907 0 Sec
908 </div>
909 </div>
910
911 <div class="date">
912 <div class="text">
913 <#if (ObjectField_displayDate.getData())??>
914 ${ObjectField_displayDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
915 </#if>
916 <!-- <#if (ObjectEntry_createDate.getData())??>
917 ${ObjectEntry_createDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
918 </#if>
919 <#if (ObjectEntry_modifiedDate.getData())??>
920
921 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d,yyyy")}
922 </#if> -->
923 </div>
924 </div>
925
926 <div class="activity">
927 <div class="comments">
928 <i class="dwtc-hub-chat-bubble"></i>
929 <div class="text">${contentCommentData.totalCount}</div>
930 </div>
931
932 <div class="likes">
933 <i class="dwtc-hub-like" id="dwtc-hub-like-btn"></i>
934 <div class="text" id="dwtc-hub-like-count">0</div>
935 </div>
936 </div>
937 </div>
938
939 <#if videoPreviewURL!=''>
940 <div class="watch-video-btn mt-4 mb-2 view-button" id="">
941 <div class="watch-video-link d-flex align-items-center">
942 <div class="text">Watch Video</div>
943 <i class="ml-3 dwtc-hub-arrow-small"></i>
944 </div>
945 </div>
946 </#if>
947
948 </div>
949 </div>
950 </div>
951 </div>
952
953 </div>
954 </div>
955 </div>
956 <#break>
957 </#if>
958 </#list>
959
960 <#else>
961 <div class="hero-top position-relative gradientbg">
962 <#if videoPreviewURL==''>
963 <div>
964 <img class="hero-image" src="${previewURL}" alt="Media Image" />
965 </div>
966 <#else>
967 <div>
968 <video class="hero-image" src="${videoPreviewURL}" poster="${previewURL}" muted loop playsinline
969 preload="auto" id="hero-video" controls></video>
970 </div>
971 <!-- <div class="cta-container">
972 <button class="view-button">
973 <div class="arrow-wrapper">
974 <i class="dwtc-hub-arrow-small"></i>
975 </div>
976
977 <div class="label" data-lfr-editable-id="play-button-text" data-lfr-editable-type="text">
978 ${languageUtil.get(locale, "see-video")}</div>
979 </button>
980 </div> -->
981 </#if>
982 <!-- overlay layer -->
983 <div class="video-overlay"></div>
984 <div class="container-fluid">
985 <div class="header-content">
986 <div class="title-wrapper ">
987 <#assign constVocabOfContentType="DWTC Social Content" />
988
989 <h1 class="detail-title"><span class='strong'>DWTC</span> Hub</h1>
990 <h1 class="dwtc-way-title d-none"><span class='strong'>DWTC</span> Way</h1>
991 </div>
992
993 <div class="content-container">
994 <div class="article-header">
995 <div class="heading-container border-bottom-0 border-left-0 p-0">
996 <div class="heading-wrapper">
997 <!-- <div class="content-date">
998
999 <#if ObjectEntry_createDate.getData()??>
1000 ${ObjectEntry_createDate.getData()?date("M/d/yy h:mm a")?string("dd MMM yyyy")}
1001
1002 </#if>
1003
1004 </div> -->
1005
1006 <h2 class="content-title">
1007 <a href="/l/${ObjectEntry_objectEntryId.getData()}">
1008 ${ObjectField_title.getData()}
1009 </a>
1010 </h2>
1011 <p class="short-description d-none">
1012 ${ObjectField_shortDescription.getData()}
1013 </p>
1014
1015 <div class="content-details">
1016 <div class="duration">
1017 <i class="dwtc-hub-clock"></i>
1018 <div class="text">
1019 0 Sec
1020 </div>
1021 </div>
1022
1023 <div class="date">
1024 <div class="text">
1025 <#if (ObjectField_displayDate.getData())??>
1026 ${ObjectField_displayDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
1027 </#if>
1028 <!-- <#if (ObjectEntry_createDate.getData())??>
1029 ${ObjectEntry_createDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
1030 </#if>
1031 <#if (ObjectEntry_modifiedDate.getData())??>
1032
1033 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d,yyyy")}
1034 </#if> -->
1035 </div>
1036 </div>
1037
1038 <div class="activity">
1039 <div class="comments">
1040 <i class="dwtc-hub-chat-bubble"></i>
1041 <div class="text">${contentCommentData.totalCount}</div>
1042 </div>
1043
1044 <div class="likes">
1045 <i class="dwtc-hub-like" id="dwtc-hub-like-btn"></i>
1046 <div class="text" id="dwtc-hub-like-count">0</div>
1047 </div>
1048 </div>
1049 </div>
1050
1051 <#if videoPreviewURL!=''>
1052 <div class="watch-video-btn mt-4 mb-2 view-button" id="">
1053 <div class="watch-video-link d-flex align-items-center">
1054 <div class="text">Watch Video</div>
1055 <i class="ml-3 dwtc-hub-arrow-small"></i>
1056 </div>
1057 </div>
1058 </#if>
1059
1060 </div>
1061 </div>
1062 </div>
1063 </div>
1064
1065 </div>
1066 </div>
1067 </div>
1068</#if>
1069
1070<script>
1071 $(document).ready(function () {
1072 // Video play/pause toggle (your original logic)
1073 const $button = $(".view-button");
1074 const $video = $(".hero-image");
1075
1076 if ($video.length && $video.prop("tagName").toLowerCase() === "video") {
1077 $button.on("click", function () {
1078 const videoEl = $video.get(0);
1079 if (videoEl.paused) {
1080 videoEl.play();
1081 } else {
1082 videoEl.pause();
1083 }
1084 });
1085 }
1086
1087 // Audio play/pause toggle
1088 const $audio = $("#audio");
1089 const $playPauseBtn = $("#playPause");
1090 const $playIcon = $playPauseBtn.find(".dwtc-hub-play-button");
1091 const $pauseIcon = $playPauseBtn.find(".lexicon-icon-pause");
1092
1093 if ($audio.length) {
1094 console.log('$audio',$audio);
1095
1096 $playPauseBtn.on("click", function () {
1097 console.log('btn clicked');
1098
1099 const audioEl = $audio.get(0);
1100 console.log('audioEl',audioEl,audioEl.paused);
1101 console.log('$playIcon',$playIcon,'pauseIcon',pauseIcon);
1102
1103 if (audioEl.paused) {
1104 audioEl.play();
1105 $playIcon.addClass("d-none");
1106 $pauseIcon.removeClass("d-none");
1107 } else {
1108 audioEl.pause();
1109 $playIcon.removeClass("d-none");
1110 $pauseIcon.addClass("d-none");
1111 }
1112 });
1113 }
1114 });
1115
1116 document.querySelectorAll('.content-title a').forEach(link => {
1117 if (link.href === window.location.href) {
1118 link.style.pointerEvents = 'none';
1119 link.style.cursor = 'default';
1120 }
1121});
1122</script>
First edition to kick off in March 2026
Dubai, UAE — 26 November, 2025: DXB LIVE, the integrated event management and experiential agency of Dubai World Trade Centre, has signed a landmark Memorandum of Understanding with Arabian Warrior to launch “The Urbanator,” a groundbreaking urban obstacle racing series that transforms Dubai’s skyline, districts, and public spaces into a high-energy sporting arena.
Debuting during the Holy Month of Ramadan, The Urbanator will introduce a reimagined obstacle racing (OCR) format that shifts the sport from rugged outdoor terrains into the vibrant heart of the city, combining sport, culture, and urban exploration.
A New Era of Urban OCR in Dubai
Participants will take on adrenaline-driven challenges across architectural landmarks, rooftop climbs, street-level runs, and giant elevated obstacles designed to highlight Dubai’s dynamic urban identity.
The series will feature both daytime and nighttime races, including races aligned with Iftar timings, ensuring wide community participation from elite athletes to families, students, corporate teams, and first-time runners.
Race routes will stretch approximately 5 km across key districts, plazas, and iconic structures, delivering an immersive blend of fitness, entertainment, and cultural engagement.
Leadership Support from the UAE Obstacle Sports Federation
Abdulrahman Abu Al Shawareb, President of the UAE Obstacle Sports Federation, said: “We congratulate this strategic partnership between DXB LIVE and Arabian Warrior, which represents a significant step forward in the development of obstacle racing in the UAE. ‘The Urbanator’ series introduces an innovative concept that redefines the sport by bringing it into the heart of the city, reflecting the UAE’s spirit of challenge, innovation, and creating new community experiences.” He added: “The Federation is committed to building a comprehensive ecosystem that elevates this sport to world-class standards. We will continue to support initiatives that empower local talent, expand participation across the community, and strengthen the UAE’s position as a regional and global leader in urban obstacle racing.”
Community-Centric Sporting Innovation
Khalid Al Hammadi, Executive Vice President, DXB LIVE, said: “We are pleased to enter this partnership with Arabian Warrior, which marks an important milestone in expanding our portfolio of innovative sports events and strengthening Dubai’s position as a global hub for urban obstacle racing. Bringing this new race format into the heart of the city aligns with our vision to develop inclusive sports experiences that blend entertainment, fitness, and the spirit of challenge, while contributing to Dubai’s leadership in hosting world-class sporting events.”
A Bold Step Forward for OCR in the UAE
Nick Cartwright, CEO, Arabian Warrior, said: “We are proud to collaborate with DXB LIVE to launch this pioneering concept in Dubai, a city that represents creativity, innovation, and boundless energy. Through this partnership, we aim to deliver an unprecedented sports experience that combines physical challenge with urban exploration. We are confident that this initiative will contribute to strengthening the UAE’s position as a leader in modern challenge-based sports.”
Supporting National Initiatives to Promote Fitness
The MoU comes at a pivotal time following the establishment of the UAE Obstacle Sports Federation, a key milestone in supporting the growth of OCR and elevating its standards nationwide.
The Urbanator series aligns with the UAE’s broader efforts to promote community fitness, active lifestyles, and inclusive sporting opportunities for all residents.
DXB LIVE and Arabian Warrior aim to launch the first race in March 2026, followed by a wider expansion of events across the UAE and beyond, solidifying Dubai’s reputation as a global centre for innovative, world-class sports experiences.