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>
DWTC hosted 378 exhibitions and events in 2024, up 26% year-on-year
Dubai, United Arab Emirates, 20 March 2025: Dubai World Trade Centre (DWTC), the region's leading business enabler and global events powerhouse, has unveiled its 2024 results, showcasing record-breaking performance that underscores Dubai’s continued economic growth and its position as a powerful international platform for business and trade enablement. DWTC welcomed 2.65 million event participants in 2024, marking a 7% increase compared to the previous year. The results were driven by a robust calendar of 378 Meetings, Incentives, Conferences and Exhibitions (MICE), business and consumer events reflecting a notable 26% year-on-year growth.
DWTC’s Expanding Calendar Drives Record MICE Growth
DWTC's flagship Meetings, Incentives, Conferences, and Exhibitions (MICE) segment experienced significant growth, increasing from 107 events in 2023 to 135 MICE events in 2024. These events collectively attracted 2.03 million attendees, reflecting an impressive 30% year-on-year growth. International participation at MICE events soared to over 942,000 attendees, representing 46% of the total MICE attendees, reinforcing Dubai’s global appeal as a top global business destination.
These sector-leading exhibitions and events saw participation of 58,665 exhibiting companies, representing a 9% increase over last year. A significant 77% of these exhibiting companies were international, further reinforcing Dubai’s ability to consistently draw international companies and businesses. The surge in foreign business participation to MICE events in Dubai furthers the aspirations of the Dubai Economic Agenda “D33”, to cement Dubai’s position as one of the top three cities for business and tourism, globally.
Commenting on the outstanding results, H.E. Helal Saeed Almarri, Director General of Dubai World Trade Centre Authority, said: "Our 2024 achievements reflect growth – not just in numbers, but in strengthening Dubai's global market position. The remarkable increase in international participation underscores growing confidence in Dubai’s dynamic business ecosystem and DWTC’s role in fostering meaningful commercial connections. Our continued success in attracting new-to-market events across diverse sectors reaffirms Dubai's unique appeal as a global hub where innovation meets opportunity. This momentum fuels our confidence as we drive forward with our ambitious venue expansion strategy to meet increasing global demand."
Strong performance across DWTC-organised exhibitions and events
In 2024, DWTC organised 20 flagship exhibitions and events, attracting an impressive 590,000 attendees, a 14% year-on-year increase. Of these, 242,000 were international attendees, representing a remarkable 41% of total participation. The number of exhibiting companies at DWTC’s exhibitions increased by 9% to 19,062, with over 15,000 international exhibitors, accounting for an impressive 79% of the total number of exhibitors.
Internationally, KAOUN International strengthened DWTC's global footprint by expanding flagship events beyond Dubai, with standout performances of GITEX AFRICA in Morocco and the successful launch of GITEX DIGI_HEALTH 5.0 Asia in Singapore.
Top-performing MICE sectors
The Healthcare, Medical, and Scientific sector remained the top performing industry sector at DWTC, with 25 events that attracted over 465,000 attendees, accounting for 23% of total MICE participation. This marks a remarkable 69% increase in attendance compared to 2023. Key events included WHX Expo Dubai (formerly Arab Health), AEEDC, DUPHAT, WHX Labs Dubai (formerly Medlab) and Dubai Derma.
The Food, Hotel, and Catering sector secured second position, attracting over 283,000 attendees, a 14% share of the total MICE participation. Led by Gulfood and Gulfood Manufacturing, this sector experienced a substantial 25% increase in participation compared to 2023.
The Information Technology sector followed closely in third position, attracting over 281,000 attendees, also a 14% share of the total MICE participation. This sector, primarily driven by GITEX Global and its associated events, saw participation increase by 8% year-on-year.
The top five sectors are rounded out by the Consumer Goods sector, which attracted over 112,000 attendees, driven by events like The Baby Expo, Middle East Organic and Natural Products Expo, World Vape Show and China Home Life, and the Leisure, Sport and Travel sector, with nearly 110,000 attendees, led by Arabian Travel Market, Dubai International Boat Show and Dubai Muscle Show.
Additional high-performing exhibitions included The Big 5, Beauty World, WETEX, Automechanika and Intersec.
Growing Conferences & Association Events Calendar
DWTC made significant strides in its conferences and associations events calendar, hosting 25 conferences – double the number from the previous year – which collectively attracted nearly 90,000 participants, a threefold increase from 2023. Of these, 17 were new additions, further diversifying the event lineup. Key events included AYUSH Conference, Arab Media Forum, Global Freight Summit, and MEIDAM.
Additionally, 14 International association meetings welcomed over 104,000 participants, three times more than the previous year. Notable events included the MDRT Global Conference, WCA World, World Congress on Intelligent Transport Systems, IFCC WorldLab, and International Congress of Endocrinology.
Dubai Exhibition Centre demonstrates growing importance
The Dubai Exhibition Centre (DEC) played an increasingly pivotal role in 2024, hosting 24 events that attracted 128,000 participants. Of these, the nine largest exhibitions and conferences attracted 75,000 attendees and featured 1,300 exhibiting companies. Notable events included Custom Show Emirates, Dubai Muscle Show and National Service Career Fair, FESPA Middle East, Jewellery Gem and Technology, Global Freight Summit and Dentsply Sirona World.
As DWTC progresses with its strategic AED 10 billion expansion of DEC, the venue is set to play an increasingly important role in Dubai's MICE ecosystem. DEC’s Phase 1 completion in 2026 will add 64,000 sqm of permanent exhibition space, increasing total capacity to 140,000 sqm. By 2031, DEC will span 180,000 sqm, accommodating up to 65,000 daily visitors and hosting multiple large-scale events simultaneously.
DWTC's Contribution to Dubai’s Economic Vision
H.E. Helal Saeed Almarri added: "Our 2024 results underscore the strategic focus on scaling Dubai’s global events sector. Our DEC expansion represents the next critical phase of increasing our capacity to meet growing global demand, allowing us to significantly multiply both our event hosting capabilities and economic contribution over the coming decade. This infrastructure investment, combined with our sector diversification strategy and growing international appeal, positions DWTC to not only advance Dubai's Economic Agenda ‘D33” but to fundamentally reshape the emirate's role in global commerce and solidify its status as a world-leading business destination."
Ecosystem Growth Strengthens DWTC's Comprehensive Business Portfolio
Beyond its core events business, DWTC achieved significant milestones across its diverse operations in 2024. DWTC’s Real Estate division forged a strategic partnership with Emaar Properties to create Expo Living, an innovative residential development within Expo City Dubai. Its Asset Management business reached new heights in occupancy levels, with commercial properties across One Central, Sheikh Rashid Tower and Convention Tower achieving 99% occupancy, while Expo Village residential units exceeded 90% occupancy.
The DWTC Authority Free Zone enhanced its value proposition by adding One Za'abeel to its jurisdiction, offering companies access to premium business environments with specialised free zone benefits. Throughout 2024, the Free Zone licensed 389 new business entities, reflecting its growing appeal.