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>
Florent Malouda, former Chelsea and France national team footballer attends the opening
Dubai, UAE – 5 August 2025: Dubai Sports World (DSW), the region's largest indoor sports and fitness destination, has officially launched its August edition, marking the beginning of a month-long celebration of sports, fitness, and community engagement. DSW was inaugurated by HE Saeed Hareb, Secretary General of Dubai Sports Council; Mahir Julfar, EVP of Dubai World Trade Centre; Florent Malouda, former Chelsea and France national team footballer; Eisa Sharif, Director of the Sports Events Department, Dubai Sports Council; Nasser Nasser, Chief Marketing Officer, Al Fardan Exchange.
The inauguration featured a friendly five-a-side football match with a team of senior citizens from the Thukher Club led by HE Saeed Hareb and Mahir Julfar facing off against a squad led by former France international Florent Malouda, in collaboration with the International Sports and Entertainment Zone (ISEZA).
Organised by Dubai World Trade Centre (DWTC), in association with Dubai Sports Council (DSC), the DSW August edition runs until 2 September. The edition launched with DSW Run IN, Dubai’s first ever indoor half marathon, with a participation of more than 500 runners.
His Excellency Saeed Hareb, Secretary General of the Dubai Sports Council, said: “Dubai Sports World has become one of the most significant sporting events and community activities held in the city, attracting thousands of participants each year. It plays a vital role in enhancing the health, happiness, and overall quality of life of individuals across Dubai. This pioneering event has transformed into a vibrant hub for all segments of society—bringing together people of all ages from over 200 nationalities living in Dubai. It has established itself as the preferred summer destination for sports enthusiasts of all kinds, including children and adults, men and women, senior citizens, academy players, and even workers from various sectors.”
He added: “We are pleased to continue our collaboration with the Dubai World Trade Centre to deliver another exceptional edition this year, offering outstanding sports experiences for all age groups. Each edition introduces new and exciting opportunities for participants, further enriching their sense of joy and deepening their connection to physical activity and sports.”
Spanning over 25,000 square metres with over 40 courts and pitches Dubai Sports World features nine core sports - football, basketball, padel, table tennis, volleyball, badminton, cricket, tennis, and pickleball, complemented by state-of-the-art facilities. This season, DSW brings back its free, open-access gym featuring advanced cardio machines, functional training rigs, and strength zones. The venue is open every day from 6:00 am to 8:00 am exclusively for runners and from 8:00 am to 12:00 midnight for all sports.
Mahir Abdulkarim Julfar, Executive Vice President, Dubai World Trade Centre, said: "Dubai Sports World reflects our ongoing commitment to Dubai's sporting community. This year's edition presents our most dynamic and engaging programme to date, perfectly timed for residents and families staying in the city during the summer break. Together with Dubai Sports Council and our strategic partners, we continue to champion inclusive, accessible and high-impact sporting experiences that bring our community together through the power of sport and fitness.”
Florent Malouda, former Chelsea and France national team footballer, said: "I'm truly impressed by the exceptional facilities and the vibrant sporting culture of Dubai Sports World. Having played at the highest levels of international football, I can appreciate the quality of the infrastructure and the passion for sport that this event represents. Such initiatives play a crucial role in nurturing young talent, providing a platform where aspiring athletes can develop their skills and pursue their passions. Moreover, sports have an unparalleled ability to unite people from diverse backgrounds, fostering camaraderie and mutual respect. Events like Dubai Sports World are vital as they not only promote a healthy lifestyle but also bring communities together through the universal language of sport."
Dubai Kids World features inflatable slides and soft play obstacle courses as well as dedicated fun zones with retro arcade games, enabling parents to take part in their favourite sports and fitness activities while their kids have supervised fun and stay active.
The DSW Summer League returns on Saturday 23 August, uniting the UAE’s top workplace teams for inter-company competitions featuring high-energy games and corporate team building.
DSW also offers young sports fans the opportunity to hone their skills with nine sports academies providing world-class coaching. The venue is fully accessible for people of all ages and abilities, with seamless booking available through the enhanced Dubai Sports World app featuring real-time slot tracking, QR code check-in, and instant confirmation for all sporting facilities.
For more information and updates, follow Dubai Sports World on social media channels: Instagram, Facebook, and YouTube. Court reservations can be made on www.dubaisportsworld.ae and the Dubai Sports World app.