Welcome, .
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 "60755508628980#20120#null" at line 791, column 193]
----
1<style>
2 /* banner gradient hidding content*/
3 .header-content{
4 z-index: 1;
5 }
6 .header-content .content-container .article-header .heading-container .heading-wrapper{
7 gap: 32px !important;
8 }
9 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .provider-container:hover .provider-name {
10 text-decoration: underline;
11 }
12
13 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration {
14 align-items: center;
15 display: flex;
16 gap: 6px;
17 }
18
19 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration i {
20 color: #fff;
21 font-size: 18px;
22 }
23
24 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration .text {
25 color: #fff;
26 font-family: "URW DIN-Regular", Helvetica;
27 font-weight: 400;
28 font-size: 14px;
29 letter-spacing: 0.56px;
30 line-height: 100%;
31 text-box-cap: cap alphabetic;
32 text-box-trim: trim-both;
33 text-transform: uppercase;
34 }
35
36 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .date .text {
37 color: #fff;
38 font-family: "URW DIN-Regular", Helvetica;
39 font-weight: 400;
40 font-size: 14px;
41 letter-spacing: 0.56px;
42 line-height: 100%;
43 text-box-cap: cap alphabetic;
44 text-box-trim: trim-both;
45 text-transform: uppercase;
46 }
47
48 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity {
49 align-items: center;
50 display: flex;
51 flex-direction: row;
52 gap: 16px;
53 }
54
55 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments,
56 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes {
57 align-items: center;
58 display: flex;
59 gap: 8px;
60 }
61
62 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i,
63 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i {
64 color: #fff;
65 cursor: pointer;
66 font-size: 18px;
67 }
68
69
70 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration {
71 align-items: center;
72 display: flex;
73 gap: 6px;
74 }
75
76 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration i {
77 color: #fff;
78 font-size: 18px;
79 }
80
81 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration .text {
82 color: #fff;
83 font-family: "URW DIN-Regular", Helvetica;
84 font-weight: 400;
85 font-size: 14px;
86 letter-spacing: 0.56px;
87 line-height: 100%;
88 text-box-cap: cap alphabetic;
89 text-box-trim: trim-both;
90 text-transform: uppercase;
91 }
92
93 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .date .text {
94 color: #fff;
95 font-family: "URW DIN-Regular", Helvetica;
96 font-weight: 400;
97 font-size: 14px;
98 letter-spacing: 0.56px;
99 line-height: 100%;
100 text-box-cap: cap alphabetic;
101 text-box-trim: trim-both;
102 text-transform: uppercase;
103 }
104
105 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity {
106 align-items: center;
107 display: flex;
108 flex-direction: row;
109 gap: 16px;
110 }
111
112 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments,
113 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes {
114 align-items: center;
115 display: flex;
116 gap: 8px;
117 }
118
119 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i,
120 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i {
121 color: #fff;
122 cursor: pointer;
123 font-size: 18px;
124 }
125
126 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i:hover::before {
127 content: "\e91c";
128 }
129
130 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i:hover::before {
131 content: "\e91d";
132 }
133
134 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments .text,
135 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes .text {
136 color: #fff;
137 font-family: "URW DIN-Regular", Helvetica;
138 font-weight: 400;
139 font-size: 14px;
140 letter-spacing: 0.56px;
141 line-height: 100%;
142 text-box-cap: cap alphabetic;
143 text-box-trim: trim-both;
144 text-transform: uppercase;
145 }
146
147 /* Featured */
148 .header-content .featured {
149 display: flex;
150 width: 100%;
151 }
152
153 .header-content .featured .mobile-episode-description {
154 display: none;
155 }
156
157 .header-content .featured .episode-description {
158 align-items: flex-start;
159 display: flex;
160 flex-direction: column;
161 gap: 24px;
162 justify-content: flex-end;
163 max-width: 597px;
164 padding-left: 24px;
165 padding-bottom: 83px;
166 width: 100%;
167 }
168
169 .header-content .featured .episode-description .episode-intro {
170 color: #ffffff;
171 font-family: "DIN Pro-Medium", Helvetica;
172 font-size: 24px;
173 font-weight: 500;
174 letter-spacing: -0.96px;
175 line-height: 100%;
176 }
177
178 .header-content .featured .episode-description .description {
179 color: #fff;
180 font-family: "DIN Pro-Regular", Helvetica;
181 font-size: 16px;
182 font-weight: 400;
183 letter-spacing: -0.32px;
184 line-height: 120%;
185 }
186
187 .header-content .featured .episode-description .content-details {
188 align-items: center;
189 display: flex;
190 flex-direction: row;
191 gap: 20px;
192 }
193
194 .header-content .featured .episode-description .content-details .duration {
195 align-items: center;
196 display: flex;
197 gap: 6px;
198 }
199
200 .header-content .featured .episode-description .content-details .duration i {
201 color: #fff;
202 font-size: 18px;
203 }
204
205 .header-content .featured .episode-description .content-details .duration .text {
206 color: #fff;
207 font-family: "URW DIN-Regular", Helvetica;
208 font-weight: 400;
209 font-size: 14px;
210 letter-spacing: 0.56px;
211 line-height: 100%;
212 text-box-cap: cap alphabetic;
213 text-box-trim: trim-both;
214 text-transform: uppercase;
215 }
216
217 .header-content .featured .episode-description .content-details .date .text {
218 color: #fff;
219 font-family: "URW DIN-Regular", Helvetica;
220 font-weight: 400;
221 font-size: 14px;
222 letter-spacing: 0.56px;
223 line-height: 100%;
224 text-box-cap: cap alphabetic;
225 text-box-trim: trim-both;
226 text-transform: uppercase;
227 }
228
229
230 .header-content .featured .episode-description .content-details .activity {
231 align-items: center;
232 display: flex;
233 flex-direction: row;
234 gap: 16px;
235 }
236
237 .header-content .featured .episode-description .content-details .activity .comments,
238 .header-content .featured .episode-description .content-details .activity .likes {
239 align-items: center;
240 display: flex;
241 gap: 8px;
242 }
243
244 .header-content .featured .episode-description .content-details .activity .comments i,
245 .header-content .featured .episode-description .content-details .activity .likes i {
246 color: #fff;
247 cursor: pointer;
248 font-size: 18px;
249 }
250
251 .header-content .featured .episode-description .content-details .activity .comments i:hover::before {
252 content: "\e91c";
253 }
254
255 .header-content .featured .episode-description .content-details .activity .likes i:hover::before {
256 content: "\e91d";
257 }
258
259 .DWTC-hub-d {
260 display: flex;
261 flex-direction: column;
262 align-items: flex-start;
263 position: relative;
264 }
265
266 .DWTC-hub-d .hero-top {
267 display: flex;
268 flex-direction: column;
269 height: 100%;
270 align-items: flex-start;
271 gap: 132px;
272 padding: 42px 32px;
273 position: relative;
274 align-self: stretch;
275 width: 100%;
276 overflow: hidden;
277 }
278
279 .DWTC-hub-d .hero-top .hero-image {
280 position: absolute;
281 top: 0;
282 left: 0;
283 right: 0;
284 bottom: 0;
285 object-fit: cover;
286 width: 100%;
287 height: 100%;
288 }
289
290 .hero-top .cta-container {
291 align-items: flex-end;
292 display: flex;
293 flex-grow: 1;
294 justify-content: flex-end;
295 width: fit-content;
296 z-index: 1;
297 position: absolute;
298 left: 50%;
299 top: 50%;
300 transform: translate(-50%, -50%);
301 }
302
303 .hero-top .cta-container .view-button {
304 align-items: center;
305 background: radial-gradient(107.32% 141.42% at 0% 0%, rgba(244, 244, 244, 0.28) 0%, rgba(233, 233, 233, 0.34) 100%);
306 border: 1px solid rgba(244, 244, 244, 0.56);
307 border-radius: 40px;
308 display: flex;
309 gap: 16px;
310 height: 54px;
311 padding: 20px 0px;
312 transition: background-color 0.3s ease;
313 width: 186px;
314 }
315
316 .hero-top .cta-container .view-button .arrow-wrapper {
317 align-items: center;
318 background-color: #000;
319 border-radius: 50%;
320 display: flex;
321 height: 46px;
322 justify-content: center;
323 margin-left: 4px;
324 width: 46px;
325 }
326
327 .hero-top .cta-container .view-button .arrow-wrapper i {
328 color: #ffffff;
329 font-size: 16px;
330 }
331
332 .hero-top .cta-container .view-button:hover {
333 background: none;
334 background-color: #000;
335 border-color: #000;
336 }
337
338 .hero-top .cta-container .view-button .label {
339 color: #fff;
340 font-family: "DIN Pro-Medium", Helvetica;
341 font-weight: 500;
342 font-size: 18px;
343 letter-spacing: -0.72px;
344 line-height: 100%;
345 text-box-cap: both alphabetic;
346 text-box-trim: trim-both;
347 transition: color 0.3s ease;
348 }
349
350 .hero-top .cta-container .view-button:hover .label {
351 color: #ffffff;
352 }
353
354 .hero-top .cta-container .view-button .arrow-wrapper .arrow-right {
355 background-color: #fff;
356 -webkit-mask-image: url("assets/images/svg/btn-arrow-right.svg");
357 mask-image: url("assets/images/svg/btn-arrow-right.svg");
358 -webkit-mask-repeat: no-repeat;
359 mask-repeat: no-repeat;
360 background-position: 50% 50%;
361 width: 14px;
362 height: 10px;
363 transition: background-color 0.3s ease;
364 }
365
366 .hero-top .cta-container .view-button:hover .arrow-wrapper .arrow-right {
367 background-color: #fff;
368 }
369.watch-video-row {
370 position: absolute;
371 top: 82%;
372 right: 125px;
373 z-index: 10;
374}
375
376.watch-video-btn {
377 display: inline-block;
378 width: fit-content;
379}
380
381.watch-video-link {
382 display: inline-flex;
383 align-items: center;
384 justify-content: center;
385 gap: 8px;
386 padding: 20px 30px;
387 border: 1px solid #ffffff;
388 border-radius: 999px;
389 text-decoration: none;
390 font-weight: 600;
391 font-size: 18px;
392 transition: all 0.3s ease;
393 white-space: nowrap;
394 cursor: pointer;
395 background-color: var(--white);
396 border-color: var(--white);
397 color: var(--brand-color-5);
398}
399
400 .watch-video-link .text{
401 line-height: normal;
402}
403
404.watch-video-link:hover {
405 background-color: var(--brand-color-5);
406 border-color: var(--brand-color-5);
407 color: var(--white);
408}
409
410.watch-video-link .dwtc-hub-arrow-small {
411 font-size: 16px;
412 transition: transform 0.3s ease;
413}
414
415 .header-content .content-container .article-header .heading-container .heading-wrapper .dwtc-hub-youtube:before {
416 color: var(--white);
417}
418
419.watch-video-link:hover .dwtc-hub-arrow-small {
420 transform: translateX(4px);
421}
422.content-title a{
423 color: var(--white);
424}
425
426.content-title a:hover{
427 color: rgb(174, 153, 98);
428}
429
430
431 .dwtc-way-ihero .header-content .title-wrapper h1.detail-title {
432 display: none;
433 }
434
435 .dwtc-way-ihero .header-content .title-wrapper h1.dwtc-way-title {
436 display: block !important;
437 }
438
439 .dwtc-way-ihero .header-content .heading-container {
440 border: none;
441 padding: 0 0 35px 18px;
442 }
443
444 .dwtc-way-ihero .header-content .content-date {
445 display: none;
446 }
447
448 .dwtc-way-ihero .header-content .content-details {
449 display: none !important;
450 }
451
452 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .short-description {
453 display: block !important;
454 color: #ffffff;
455 font-family: "DIN Pro-Light", Helvetica;
456 font-size: 24px;
457 font-weight: 300;
458 letter-spacing: -0.96px;
459 line-height: 120%;
460 }
461 @media (max-width: 991.98px) {
462 .DWTC-hub-d .hero-top {
463 padding: 32px 28px;
464 }
465
466 }
467
468 @media (max-width: 768px) {
469 .dwtc-hub-play-button {
470 font-size: 10px;
471 }
472 .watch-video-row {
473 position: absolute;
474 top: 96%;
475 right: 0px;
476 z-index: 10;
477 }
478 .heading-wrapper {
479 flex-direction: column-reverse; /* Moves last element to top */
480 }
481
482 .via-youtube {
483 order: -1;
484 display: flex !important; /* override d-none on mobile */
485 }
486 }
487
488 @media (max-width: 575px) {
489 .dwtc-hub-play-button {
490 font-size: 10px;
491 }
492 .header-content .content-container .heading-container {
493 margin-top: 20px;
494 }
495 }
496 @media (max-width: 421px) {
497
498 .header-content .content-container .heading-container {
499 margin-top: 100px;
500 }
501 }
502
503 @media (max-width: 1160px) {
504 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .short-description {
505 font-size: 16px;
506 letter-spacing: -0.64px;
507 line-height: 100%;
508 }
509 }
510 @media (max-width: 1750px) {
511 .header-content .content-container .featured .mobile-episode-description .content-details .duration i {
512 color: #fff;
513 font-size: 18px;
514 }
515
516 .header-content .content-container .featured .mobile-episode-description .content-details .activity .comments,
517 .header-content .content-container .featured .mobile-episode-description .content-details .activity .likes i {
518 color: #fff;
519 font-size: 18px;
520 cursor: pointer;
521 }
522.header-content .content-container .article-header .heading-container .heading-wrapper {
523 margin-top: 15%;
524}
525 }
526</style>
527
528<#macro formatTimeAgo inputDate>
529 <#assign cleanedDate=inputDate?replace("[ ,]", " " , "r" )?trim>
530 <#attempt>
531 <#assign parsedDate=cleanedDate?datetime("M/dd/yy hh:mm a")>
532 <#recover>
533 <#assign parsedDate=cleanedDate?datetime("M/dd/yyyy hh:mm a")>
534 </#attempt>
535
536 <#assign now=.now>
537 <#assign diffInMillis=now?long - parsedDate?long>
538 <#assign diffInSeconds=diffInMillis / 1000>
539 <#assign diffInMinutes=diffInSeconds / 60>
540 <#assign diffInHours=diffInMinutes / 60>
541 <#assign diffInDays=diffInHours / 24>
542
543 <#if diffInSeconds < 60>
544 ${diffInSeconds?int} seconds
545 <#elseif diffInMinutes < 60>
546 ${diffInMinutes?int} minutes
547 <#elseif diffInHours < 24>
548 ${diffInHours?int} hours
549 <#else>
550 ${diffInDays?int} days
551 </#if>
552</#macro>
553
554<#assign hubContentDataResponse=restClient.get("/c/dwtchubcontents/${ObjectEntry_objectEntryId.getData()}?fields=taxonomyCategoryBriefs") />
555
556<#if hubContentDataResponse?has_content && hubContentDataResponse.taxonomyCategoryBriefs??>
557 <#assign categories=hubContentDataResponse.taxonomyCategoryBriefs />
558 <#if categories?has_content && categories??>
559 <div class="d-none" id="object-selected-categories">
560 <#list categories as category>
561 <div class="taxonomy-category">
562 <div class="id">
563 ${category.taxonomyCategoryId}
564 </div>
565 <div class="name">
566 ${category.taxonomyCategoryName}
567 </div>
568 </div>
569 </#list>
570 </div>
571 </#if>
572</#if>
573
574<#assign scopeGroupId=themeDisplay.getScopeGroupId()>
575<#assign contentCommentData = restClient.get("/c/usercomments/scopes/${scopeGroupId}?filter=r_hubContentUserComments_c_dwtcHubContentId eq '${ObjectEntry_objectEntryId.getData()}'")>
576<#assign videoPreviewURL="" />
577<#assign previewURL="" />
578
579<#if (.data_model["ObjectField_117605#previewURL"].getData())?? &&
580 .data_model["ObjectField_117605#previewURL"].getData() !="">
581 <#assign videoPreviewURL=.data_model["ObjectField_117605#previewURL"].getData()!"">
582</#if>
583
584<#if (.data_model["ObjectField_90598#previewURL"].getData())?? &&
585.data_model["ObjectField_90598#previewURL"].getData() !="">
586 <#assign previewURL=.data_model["ObjectField_90598#previewURL"].getData()!"">
587</#if>
588
589<div class="d-none" id="hub-content-id">
590 ${ObjectEntry_objectEntryId.getData()}
591</div>
592
593<#if categories?has_content && categories??>
594 <#list categories as category>
595 <#switch category.taxonomyCategoryName?lower_case>
596 <#case "spotify">
597 <#-- Code for Podcast Section --></#-->
598 <div class="hero-top position-relative gradientbg">
599 <#if videoPreviewURL==''>
600 <div>
601 <img class="hero-image" src="${previewURL}" alt="Media Image" />
602 </div>
603 <#else>
604 <div>
605 <video class="hero-image" src="${videoPreviewURL}" poster="${previewURL}" muted loop playsinline preload="auto"
606 id="hero-video"></video>
607 </div>
608 <div class="cta-container">
609 <button class="view-button">
610 <div class="arrow-wrapper">
611 <i class="dwtc-hub-arrow-small"></i>
612 </div>
613
614 <div class="label" data-lfr-editable-id="play-button-text" data-lfr-editable-type="text">
615 ${languageUtil.get(locale, "see-video")}
616 </div>
617 </button>
618 </div>
619 </#if>
620 <div class="container-fluid">
621 <div class="header-content">
622 <div class="title-wrapper ">
623 <h1 class="detail-title mb-3"><span class='strong'>DWTC</span> Hub ${category.taxonomyCategoryName}</h1>
624 <h1 class="dwtc-way-title d-none"><span class='strong'>DWTC</span> Way</h1>
625 </div>
626 <div class="content-container">
627 <div class="featured">
628 <div class="heading-container border-bottom-0 border-left-0 p-0">
629 <div class="heading-wrapper" id="player-wrapper">
630 <div class="spotify-player-wrapper">
631 <div class="player">
632 <div class="spotify-icon dwtc-hub-spotify"></div>
633
634 <#if (.data_model["ObjectField_75707#previewURL"].getData())?? &&
635 .data_model["ObjectField_75707#previewURL"].getData() !="">
636 <audio id="audio" src="${.data_model["ObjectField_75707#previewURL"].getData()}"></audio>
637 </#if>
638 <div class="player-content">
639 <div class="cover-art d-flex align-items-center justify-content-center">
640 <img src="/documents/d/the-hub/dwtc-logo-blue-outline" alt="Logo" />
641 </div>
642 <div class="control-section">
643
644 <div class="video-heading">
645 <div id="mediaTitle">${ObjectField_title.getData()}</div>
646
647 </div>
648 <div class="bottom-section">
649 <div class="seek-controls">
650 <button id="backward" class="player-rewind-backward"></button>
651 <input type="range" id="seekBar" class="seek-bar" min="0" value="0" max="372.715083">
652 <button id="forward" class="player-rewind-forward"></button>
653 <div class="player-time">
654 <span id="duration">0:00</span>
655
656 </div>
657 <div class="player-dots">...</div>
658 <button id="playPause">
659 <i class="dwtc-hub-play-button"></i>
660 <svg class="lexicon-icon lexicon-icon-pause d-none" role="presentation">
661 <use href="/o/classic-theme/images/clay/icons.svg#pause"></use>
662 </svg>
663 </button>
664 </div>
665 </div>
666 </div>
667 </div>
668 </div>
669 </div>
670
671 <div class="mobile-episode-description">
672 <div class="episode-intro">${languageUtil.get(locale, "about-the-episode")}</div>
673
674 <p class="description">
675 ${ObjectField_shortDescription.getData()}
676 </p>
677
678 <div class="content-details">
679 <div class="duration">
680 <i class="dwtc-hub-clock"></i>
681 <div class="text">
682 0 Sec
683 </div>
684 </div>
685
686 <div class="date">
687 <div class="text">
688 <#if (ObjectEntry_modifiedDate.getData())??>
689 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
690 </#if>
691 </div>
692 </div>
693
694 <div class="activity">
695 <div class="comments">
696 <i class="dwtc-hub-chat-bubble"></i>
697 <div class="text">${contentCommentData.totalCount}</div>
698 </div>
699
700 <div class="likes">
701 <i class="dwtc-hub-like like-btn" id="dwtc-hub-like-mobile-btn"></i>
702 <div class="text like-count" id="dwtc-hub-like--mobile-count">0</div>
703 </div>
704 </div>
705 </div>
706 </div>
707 </div>
708 </div>
709 <div class="episode-description">
710 <div class="episode-intro">${languageUtil.get(locale, "about-the-episode")}</div>
711 <p class="description">
712 ${ObjectField_shortDescription.getData()}
713 </p>
714 <div class="content-details">
715 <div class="duration">
716 <i class="dwtc-hub-clock"></i>
717 <div class="text">
718 0 Sec
719 </div>
720 </div>
721 <div class="date">
722 <div class="text">
723 <#if (ObjectEntry_modifiedDate.getData())??>
724 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
725 </#if>
726 </div>
727 </div>
728 <div class="activity">
729 <div class="comments">
730 <i class="dwtc-hub-chat-bubble"></i>
731 <div class="text">${contentCommentData.totalCount}</div>
732 </div>
733 <div class="likes">
734 <i class="dwtc-hub-like like-btn" id="dwtc-hub-like-btn"></i>
735 <div class="text like-count" id="dwtc-hub-like-count">0</div>
736 </div>
737 </div>
738 </div>
739 </div>
740 </div>
741 </div>
742
743 </div>
744 </div>
745 </div>
746
747 <#break>
748 <#case "article">
749 <#case "youtube">
750 <#case "instagram">
751 <#case "linkedin">
752 <#case "announcements">
753 <#case "news">
754 <#-- Code for Events Section --></#-->
755 <div class="hero-top position-relative gradientbg">
756 <#if videoPreviewURL==''>
757 <div>
758 <img class="hero-image" src="${previewURL}" alt="Media Image" />
759 </div>
760 <#else>
761 <div>
762 <video class="hero-image" src="${videoPreviewURL}" poster="${previewURL}" muted loop playsinline preload="auto"
763 id="hero-video"></video>
764 </div>
765 <!-- <div class="cta-container">
766 <button class="view-button">
767 <div class="arrow-wrapper">
768 <i class="dwtc-hub-arrow-small"></i>
769 </div>
770
771 <div class="label" data-lfr-editable-id="play-button-text" data-lfr-editable-type="text">
772 ${languageUtil.get(locale, "see-video")}</div>
773 </button>
774 </div> -->
775 </#if>
776 <div class="container-fluid">
777 <div class="header-content">
778 <div class="title-wrapper ">
779 <h1 class="detail-title"><span class='strong'>DWTC</span> Hub
780 ${category.taxonomyCategoryName}</h1>
781 <h1 class="dwtc-way-title d-none"><span class='strong'>DWTC</span> Way</h1>
782 </div>
783
784 <div class="content-container">
785 <div class="article-header">
786 <div class="heading-container border-bottom-0 border-left-0 p-0">
787 <div class="heading-wrapper">
788 <!-- <div class="content-date">
789
790 <#if ObjectEntry_createDate.getData()??>
791 ${ObjectEntry_createDate.getData()?date("M/d/yy h:mm a")?string("dd MMM yyyy")}
792
793 </#if>
794
795 </div> -->
796 <#if category.taxonomyCategoryName?lower_case=="youtube" ||
797 category.taxonomyCategoryName?lower_case=="instagram" ||
798 category.taxonomyCategoryName?lower_case=="linkedin">
799 <a class="provider-container d-none via-youtube" href="${ObjectField_postUrl.getData()}" target="_blank">
800 <i class="dwtc-hub-${category.taxonomyCategoryName?lower_case}"></i>
801 <div class="provider-name">VIA ${category.taxonomyCategoryName?upper_case}
802 </div>
803 </a>
804 </#if>
805 <h2 class="content-title">
806 <a href="/web/the-hub/l/${ObjectEntry_objectEntryId.getData()}"> ${ObjectField_title.getData()}</a></h2>
807 <p class="short-description d-none">
808 ${ObjectField_shortDescription.getData()}
809 </p>
810
811 <div class="content-details">
812 <div class="duration">
813 <i class="dwtc-hub-clock"></i>
814 <div class="text">
815 0 Sec
816 </div>
817 </div>
818
819 <div class="date">
820 <div class="text">
821 <#if (ObjectEntry_modifiedDate.getData())??>
822
823 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d,
824 yyyy")}
825 </#if>
826 </div>
827 </div>
828
829 <div class="activity">
830 <div class="comments">
831 <i class="dwtc-hub-chat-bubble"></i>
832 <div class="text">${contentCommentData.totalCount}</div>
833 </div>
834
835 <div class="likes">
836 <i class="dwtc-hub-like" id="dwtc-hub-like-btn"></i>
837 <div class="text" id="dwtc-hub-like-count">0</div>
838 </div>
839 </div>
840 </div>
841 <#if category.taxonomyCategoryName?lower_case=="youtube">
842 <div class="watch-video-btn mt-4 mb-2 view-button" id="">
843 <div class="watch-video-link d-flex">
844 <div class="text">Watch Video</div> <i class="ml-3 dwtc-hub-arrow-small"></i>
845 </div>
846 </div>
847 </#if>
848 </div>
849 </div>
850 </div>
851 </div>
852
853 </div>
854 </div>
855 </div>
856 <#break>
857 </#switch>
858 </#list>
859</#if>
860
861<script>
862 $(document).ready(function () {
863 const $button = $(".view-button");
864 const $video = $(".hero-image");
865
866
867 if ($video.length && $video.prop("tagName").toLowerCase() === "video") {
868 $button.on("click", function () {
869 const videoEl = $video.get(0);
870 if (videoEl.paused) {
871 videoEl.play();
872 } else {
873 videoEl.pause();
874 }
875 });
876 };
877
878 });
879</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 "60755508628980#20120#null" at line 791, column 193]
----
1<style>
2 /* banner gradient hidding content*/
3 .header-content{
4 z-index: 1;
5 }
6 .header-content .content-container .article-header .heading-container .heading-wrapper{
7 gap: 32px !important;
8 }
9 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .provider-container:hover .provider-name {
10 text-decoration: underline;
11 }
12
13 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration {
14 align-items: center;
15 display: flex;
16 gap: 6px;
17 }
18
19 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration i {
20 color: #fff;
21 font-size: 18px;
22 }
23
24 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration .text {
25 color: #fff;
26 font-family: "URW DIN-Regular", Helvetica;
27 font-weight: 400;
28 font-size: 14px;
29 letter-spacing: 0.56px;
30 line-height: 100%;
31 text-box-cap: cap alphabetic;
32 text-box-trim: trim-both;
33 text-transform: uppercase;
34 }
35
36 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .date .text {
37 color: #fff;
38 font-family: "URW DIN-Regular", Helvetica;
39 font-weight: 400;
40 font-size: 14px;
41 letter-spacing: 0.56px;
42 line-height: 100%;
43 text-box-cap: cap alphabetic;
44 text-box-trim: trim-both;
45 text-transform: uppercase;
46 }
47
48 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity {
49 align-items: center;
50 display: flex;
51 flex-direction: row;
52 gap: 16px;
53 }
54
55 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments,
56 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes {
57 align-items: center;
58 display: flex;
59 gap: 8px;
60 }
61
62 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i,
63 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i {
64 color: #fff;
65 cursor: pointer;
66 font-size: 18px;
67 }
68
69
70 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration {
71 align-items: center;
72 display: flex;
73 gap: 6px;
74 }
75
76 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration i {
77 color: #fff;
78 font-size: 18px;
79 }
80
81 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration .text {
82 color: #fff;
83 font-family: "URW DIN-Regular", Helvetica;
84 font-weight: 400;
85 font-size: 14px;
86 letter-spacing: 0.56px;
87 line-height: 100%;
88 text-box-cap: cap alphabetic;
89 text-box-trim: trim-both;
90 text-transform: uppercase;
91 }
92
93 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .date .text {
94 color: #fff;
95 font-family: "URW DIN-Regular", Helvetica;
96 font-weight: 400;
97 font-size: 14px;
98 letter-spacing: 0.56px;
99 line-height: 100%;
100 text-box-cap: cap alphabetic;
101 text-box-trim: trim-both;
102 text-transform: uppercase;
103 }
104
105 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity {
106 align-items: center;
107 display: flex;
108 flex-direction: row;
109 gap: 16px;
110 }
111
112 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments,
113 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes {
114 align-items: center;
115 display: flex;
116 gap: 8px;
117 }
118
119 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i,
120 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i {
121 color: #fff;
122 cursor: pointer;
123 font-size: 18px;
124 }
125
126 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i:hover::before {
127 content: "\e91c";
128 }
129
130 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i:hover::before {
131 content: "\e91d";
132 }
133
134 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments .text,
135 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes .text {
136 color: #fff;
137 font-family: "URW DIN-Regular", Helvetica;
138 font-weight: 400;
139 font-size: 14px;
140 letter-spacing: 0.56px;
141 line-height: 100%;
142 text-box-cap: cap alphabetic;
143 text-box-trim: trim-both;
144 text-transform: uppercase;
145 }
146
147 /* Featured */
148 .header-content .featured {
149 display: flex;
150 width: 100%;
151 }
152
153 .header-content .featured .mobile-episode-description {
154 display: none;
155 }
156
157 .header-content .featured .episode-description {
158 align-items: flex-start;
159 display: flex;
160 flex-direction: column;
161 gap: 24px;
162 justify-content: flex-end;
163 max-width: 597px;
164 padding-left: 24px;
165 padding-bottom: 83px;
166 width: 100%;
167 }
168
169 .header-content .featured .episode-description .episode-intro {
170 color: #ffffff;
171 font-family: "DIN Pro-Medium", Helvetica;
172 font-size: 24px;
173 font-weight: 500;
174 letter-spacing: -0.96px;
175 line-height: 100%;
176 }
177
178 .header-content .featured .episode-description .description {
179 color: #fff;
180 font-family: "DIN Pro-Regular", Helvetica;
181 font-size: 16px;
182 font-weight: 400;
183 letter-spacing: -0.32px;
184 line-height: 120%;
185 }
186
187 .header-content .featured .episode-description .content-details {
188 align-items: center;
189 display: flex;
190 flex-direction: row;
191 gap: 20px;
192 }
193
194 .header-content .featured .episode-description .content-details .duration {
195 align-items: center;
196 display: flex;
197 gap: 6px;
198 }
199
200 .header-content .featured .episode-description .content-details .duration i {
201 color: #fff;
202 font-size: 18px;
203 }
204
205 .header-content .featured .episode-description .content-details .duration .text {
206 color: #fff;
207 font-family: "URW DIN-Regular", Helvetica;
208 font-weight: 400;
209 font-size: 14px;
210 letter-spacing: 0.56px;
211 line-height: 100%;
212 text-box-cap: cap alphabetic;
213 text-box-trim: trim-both;
214 text-transform: uppercase;
215 }
216
217 .header-content .featured .episode-description .content-details .date .text {
218 color: #fff;
219 font-family: "URW DIN-Regular", Helvetica;
220 font-weight: 400;
221 font-size: 14px;
222 letter-spacing: 0.56px;
223 line-height: 100%;
224 text-box-cap: cap alphabetic;
225 text-box-trim: trim-both;
226 text-transform: uppercase;
227 }
228
229
230 .header-content .featured .episode-description .content-details .activity {
231 align-items: center;
232 display: flex;
233 flex-direction: row;
234 gap: 16px;
235 }
236
237 .header-content .featured .episode-description .content-details .activity .comments,
238 .header-content .featured .episode-description .content-details .activity .likes {
239 align-items: center;
240 display: flex;
241 gap: 8px;
242 }
243
244 .header-content .featured .episode-description .content-details .activity .comments i,
245 .header-content .featured .episode-description .content-details .activity .likes i {
246 color: #fff;
247 cursor: pointer;
248 font-size: 18px;
249 }
250
251 .header-content .featured .episode-description .content-details .activity .comments i:hover::before {
252 content: "\e91c";
253 }
254
255 .header-content .featured .episode-description .content-details .activity .likes i:hover::before {
256 content: "\e91d";
257 }
258
259 .DWTC-hub-d {
260 display: flex;
261 flex-direction: column;
262 align-items: flex-start;
263 position: relative;
264 }
265
266 .DWTC-hub-d .hero-top {
267 display: flex;
268 flex-direction: column;
269 height: 100%;
270 align-items: flex-start;
271 gap: 132px;
272 padding: 42px 32px;
273 position: relative;
274 align-self: stretch;
275 width: 100%;
276 overflow: hidden;
277 }
278
279 .DWTC-hub-d .hero-top .hero-image {
280 position: absolute;
281 top: 0;
282 left: 0;
283 right: 0;
284 bottom: 0;
285 object-fit: cover;
286 width: 100%;
287 height: 100%;
288 }
289
290 .hero-top .cta-container {
291 align-items: flex-end;
292 display: flex;
293 flex-grow: 1;
294 justify-content: flex-end;
295 width: fit-content;
296 z-index: 1;
297 position: absolute;
298 left: 50%;
299 top: 50%;
300 transform: translate(-50%, -50%);
301 }
302
303 .hero-top .cta-container .view-button {
304 align-items: center;
305 background: radial-gradient(107.32% 141.42% at 0% 0%, rgba(244, 244, 244, 0.28) 0%, rgba(233, 233, 233, 0.34) 100%);
306 border: 1px solid rgba(244, 244, 244, 0.56);
307 border-radius: 40px;
308 display: flex;
309 gap: 16px;
310 height: 54px;
311 padding: 20px 0px;
312 transition: background-color 0.3s ease;
313 width: 186px;
314 }
315
316 .hero-top .cta-container .view-button .arrow-wrapper {
317 align-items: center;
318 background-color: #000;
319 border-radius: 50%;
320 display: flex;
321 height: 46px;
322 justify-content: center;
323 margin-left: 4px;
324 width: 46px;
325 }
326
327 .hero-top .cta-container .view-button .arrow-wrapper i {
328 color: #ffffff;
329 font-size: 16px;
330 }
331
332 .hero-top .cta-container .view-button:hover {
333 background: none;
334 background-color: #000;
335 border-color: #000;
336 }
337
338 .hero-top .cta-container .view-button .label {
339 color: #fff;
340 font-family: "DIN Pro-Medium", Helvetica;
341 font-weight: 500;
342 font-size: 18px;
343 letter-spacing: -0.72px;
344 line-height: 100%;
345 text-box-cap: both alphabetic;
346 text-box-trim: trim-both;
347 transition: color 0.3s ease;
348 }
349
350 .hero-top .cta-container .view-button:hover .label {
351 color: #ffffff;
352 }
353
354 .hero-top .cta-container .view-button .arrow-wrapper .arrow-right {
355 background-color: #fff;
356 -webkit-mask-image: url("assets/images/svg/btn-arrow-right.svg");
357 mask-image: url("assets/images/svg/btn-arrow-right.svg");
358 -webkit-mask-repeat: no-repeat;
359 mask-repeat: no-repeat;
360 background-position: 50% 50%;
361 width: 14px;
362 height: 10px;
363 transition: background-color 0.3s ease;
364 }
365
366 .hero-top .cta-container .view-button:hover .arrow-wrapper .arrow-right {
367 background-color: #fff;
368 }
369.watch-video-row {
370 position: absolute;
371 top: 82%;
372 right: 125px;
373 z-index: 10;
374}
375
376.watch-video-btn {
377 display: inline-block;
378 width: fit-content;
379}
380
381.watch-video-link {
382 display: inline-flex;
383 align-items: center;
384 justify-content: center;
385 gap: 8px;
386 padding: 20px 30px;
387 border: 1px solid #ffffff;
388 border-radius: 999px;
389 text-decoration: none;
390 font-weight: 600;
391 font-size: 18px;
392 transition: all 0.3s ease;
393 white-space: nowrap;
394 cursor: pointer;
395 background-color: var(--white);
396 border-color: var(--white);
397 color: var(--brand-color-5);
398}
399
400 .watch-video-link .text{
401 line-height: normal;
402}
403
404.watch-video-link:hover {
405 background-color: var(--brand-color-5);
406 border-color: var(--brand-color-5);
407 color: var(--white);
408}
409
410.watch-video-link .dwtc-hub-arrow-small {
411 font-size: 16px;
412 transition: transform 0.3s ease;
413}
414
415 .header-content .content-container .article-header .heading-container .heading-wrapper .dwtc-hub-youtube:before {
416 color: var(--white);
417}
418
419.watch-video-link:hover .dwtc-hub-arrow-small {
420 transform: translateX(4px);
421}
422.content-title a{
423 color: var(--white);
424}
425
426.content-title a:hover{
427 color: rgb(174, 153, 98);
428}
429
430
431 .dwtc-way-ihero .header-content .title-wrapper h1.detail-title {
432 display: none;
433 }
434
435 .dwtc-way-ihero .header-content .title-wrapper h1.dwtc-way-title {
436 display: block !important;
437 }
438
439 .dwtc-way-ihero .header-content .heading-container {
440 border: none;
441 padding: 0 0 35px 18px;
442 }
443
444 .dwtc-way-ihero .header-content .content-date {
445 display: none;
446 }
447
448 .dwtc-way-ihero .header-content .content-details {
449 display: none !important;
450 }
451
452 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .short-description {
453 display: block !important;
454 color: #ffffff;
455 font-family: "DIN Pro-Light", Helvetica;
456 font-size: 24px;
457 font-weight: 300;
458 letter-spacing: -0.96px;
459 line-height: 120%;
460 }
461 @media (max-width: 991.98px) {
462 .DWTC-hub-d .hero-top {
463 padding: 32px 28px;
464 }
465
466 }
467
468 @media (max-width: 768px) {
469 .dwtc-hub-play-button {
470 font-size: 10px;
471 }
472 .watch-video-row {
473 position: absolute;
474 top: 96%;
475 right: 0px;
476 z-index: 10;
477 }
478 .heading-wrapper {
479 flex-direction: column-reverse; /* Moves last element to top */
480 }
481
482 .via-youtube {
483 order: -1;
484 display: flex !important; /* override d-none on mobile */
485 }
486 }
487
488 @media (max-width: 575px) {
489 .dwtc-hub-play-button {
490 font-size: 10px;
491 }
492 .header-content .content-container .heading-container {
493 margin-top: 20px;
494 }
495 }
496 @media (max-width: 421px) {
497
498 .header-content .content-container .heading-container {
499 margin-top: 100px;
500 }
501 }
502
503 @media (max-width: 1160px) {
504 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .short-description {
505 font-size: 16px;
506 letter-spacing: -0.64px;
507 line-height: 100%;
508 }
509 }
510 @media (max-width: 1750px) {
511 .header-content .content-container .featured .mobile-episode-description .content-details .duration i {
512 color: #fff;
513 font-size: 18px;
514 }
515
516 .header-content .content-container .featured .mobile-episode-description .content-details .activity .comments,
517 .header-content .content-container .featured .mobile-episode-description .content-details .activity .likes i {
518 color: #fff;
519 font-size: 18px;
520 cursor: pointer;
521 }
522.header-content .content-container .article-header .heading-container .heading-wrapper {
523 margin-top: 15%;
524}
525 }
526</style>
527
528<#macro formatTimeAgo inputDate>
529 <#assign cleanedDate=inputDate?replace("[ ,]", " " , "r" )?trim>
530 <#attempt>
531 <#assign parsedDate=cleanedDate?datetime("M/dd/yy hh:mm a")>
532 <#recover>
533 <#assign parsedDate=cleanedDate?datetime("M/dd/yyyy hh:mm a")>
534 </#attempt>
535
536 <#assign now=.now>
537 <#assign diffInMillis=now?long - parsedDate?long>
538 <#assign diffInSeconds=diffInMillis / 1000>
539 <#assign diffInMinutes=diffInSeconds / 60>
540 <#assign diffInHours=diffInMinutes / 60>
541 <#assign diffInDays=diffInHours / 24>
542
543 <#if diffInSeconds < 60>
544 ${diffInSeconds?int} seconds
545 <#elseif diffInMinutes < 60>
546 ${diffInMinutes?int} minutes
547 <#elseif diffInHours < 24>
548 ${diffInHours?int} hours
549 <#else>
550 ${diffInDays?int} days
551 </#if>
552</#macro>
553
554<#assign hubContentDataResponse=restClient.get("/c/dwtchubcontents/${ObjectEntry_objectEntryId.getData()}?fields=taxonomyCategoryBriefs") />
555
556<#if hubContentDataResponse?has_content && hubContentDataResponse.taxonomyCategoryBriefs??>
557 <#assign categories=hubContentDataResponse.taxonomyCategoryBriefs />
558 <#if categories?has_content && categories??>
559 <div class="d-none" id="object-selected-categories">
560 <#list categories as category>
561 <div class="taxonomy-category">
562 <div class="id">
563 ${category.taxonomyCategoryId}
564 </div>
565 <div class="name">
566 ${category.taxonomyCategoryName}
567 </div>
568 </div>
569 </#list>
570 </div>
571 </#if>
572</#if>
573
574<#assign scopeGroupId=themeDisplay.getScopeGroupId()>
575<#assign contentCommentData = restClient.get("/c/usercomments/scopes/${scopeGroupId}?filter=r_hubContentUserComments_c_dwtcHubContentId eq '${ObjectEntry_objectEntryId.getData()}'")>
576<#assign videoPreviewURL="" />
577<#assign previewURL="" />
578
579<#if (.data_model["ObjectField_117605#previewURL"].getData())?? &&
580 .data_model["ObjectField_117605#previewURL"].getData() !="">
581 <#assign videoPreviewURL=.data_model["ObjectField_117605#previewURL"].getData()!"">
582</#if>
583
584<#if (.data_model["ObjectField_90598#previewURL"].getData())?? &&
585.data_model["ObjectField_90598#previewURL"].getData() !="">
586 <#assign previewURL=.data_model["ObjectField_90598#previewURL"].getData()!"">
587</#if>
588
589<div class="d-none" id="hub-content-id">
590 ${ObjectEntry_objectEntryId.getData()}
591</div>
592
593<#if categories?has_content && categories??>
594 <#list categories as category>
595 <#switch category.taxonomyCategoryName?lower_case>
596 <#case "spotify">
597 <#-- Code for Podcast Section --></#-->
598 <div class="hero-top position-relative gradientbg">
599 <#if videoPreviewURL==''>
600 <div>
601 <img class="hero-image" src="${previewURL}" alt="Media Image" />
602 </div>
603 <#else>
604 <div>
605 <video class="hero-image" src="${videoPreviewURL}" poster="${previewURL}" muted loop playsinline preload="auto"
606 id="hero-video"></video>
607 </div>
608 <div class="cta-container">
609 <button class="view-button">
610 <div class="arrow-wrapper">
611 <i class="dwtc-hub-arrow-small"></i>
612 </div>
613
614 <div class="label" data-lfr-editable-id="play-button-text" data-lfr-editable-type="text">
615 ${languageUtil.get(locale, "see-video")}
616 </div>
617 </button>
618 </div>
619 </#if>
620 <div class="container-fluid">
621 <div class="header-content">
622 <div class="title-wrapper ">
623 <h1 class="detail-title mb-3"><span class='strong'>DWTC</span> Hub ${category.taxonomyCategoryName}</h1>
624 <h1 class="dwtc-way-title d-none"><span class='strong'>DWTC</span> Way</h1>
625 </div>
626 <div class="content-container">
627 <div class="featured">
628 <div class="heading-container border-bottom-0 border-left-0 p-0">
629 <div class="heading-wrapper" id="player-wrapper">
630 <div class="spotify-player-wrapper">
631 <div class="player">
632 <div class="spotify-icon dwtc-hub-spotify"></div>
633
634 <#if (.data_model["ObjectField_75707#previewURL"].getData())?? &&
635 .data_model["ObjectField_75707#previewURL"].getData() !="">
636 <audio id="audio" src="${.data_model["ObjectField_75707#previewURL"].getData()}"></audio>
637 </#if>
638 <div class="player-content">
639 <div class="cover-art d-flex align-items-center justify-content-center">
640 <img src="/documents/d/the-hub/dwtc-logo-blue-outline" alt="Logo" />
641 </div>
642 <div class="control-section">
643
644 <div class="video-heading">
645 <div id="mediaTitle">${ObjectField_title.getData()}</div>
646
647 </div>
648 <div class="bottom-section">
649 <div class="seek-controls">
650 <button id="backward" class="player-rewind-backward"></button>
651 <input type="range" id="seekBar" class="seek-bar" min="0" value="0" max="372.715083">
652 <button id="forward" class="player-rewind-forward"></button>
653 <div class="player-time">
654 <span id="duration">0:00</span>
655
656 </div>
657 <div class="player-dots">...</div>
658 <button id="playPause">
659 <i class="dwtc-hub-play-button"></i>
660 <svg class="lexicon-icon lexicon-icon-pause d-none" role="presentation">
661 <use href="/o/classic-theme/images/clay/icons.svg#pause"></use>
662 </svg>
663 </button>
664 </div>
665 </div>
666 </div>
667 </div>
668 </div>
669 </div>
670
671 <div class="mobile-episode-description">
672 <div class="episode-intro">${languageUtil.get(locale, "about-the-episode")}</div>
673
674 <p class="description">
675 ${ObjectField_shortDescription.getData()}
676 </p>
677
678 <div class="content-details">
679 <div class="duration">
680 <i class="dwtc-hub-clock"></i>
681 <div class="text">
682 0 Sec
683 </div>
684 </div>
685
686 <div class="date">
687 <div class="text">
688 <#if (ObjectEntry_modifiedDate.getData())??>
689 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
690 </#if>
691 </div>
692 </div>
693
694 <div class="activity">
695 <div class="comments">
696 <i class="dwtc-hub-chat-bubble"></i>
697 <div class="text">${contentCommentData.totalCount}</div>
698 </div>
699
700 <div class="likes">
701 <i class="dwtc-hub-like like-btn" id="dwtc-hub-like-mobile-btn"></i>
702 <div class="text like-count" id="dwtc-hub-like--mobile-count">0</div>
703 </div>
704 </div>
705 </div>
706 </div>
707 </div>
708 </div>
709 <div class="episode-description">
710 <div class="episode-intro">${languageUtil.get(locale, "about-the-episode")}</div>
711 <p class="description">
712 ${ObjectField_shortDescription.getData()}
713 </p>
714 <div class="content-details">
715 <div class="duration">
716 <i class="dwtc-hub-clock"></i>
717 <div class="text">
718 0 Sec
719 </div>
720 </div>
721 <div class="date">
722 <div class="text">
723 <#if (ObjectEntry_modifiedDate.getData())??>
724 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
725 </#if>
726 </div>
727 </div>
728 <div class="activity">
729 <div class="comments">
730 <i class="dwtc-hub-chat-bubble"></i>
731 <div class="text">${contentCommentData.totalCount}</div>
732 </div>
733 <div class="likes">
734 <i class="dwtc-hub-like like-btn" id="dwtc-hub-like-btn"></i>
735 <div class="text like-count" id="dwtc-hub-like-count">0</div>
736 </div>
737 </div>
738 </div>
739 </div>
740 </div>
741 </div>
742
743 </div>
744 </div>
745 </div>
746
747 <#break>
748 <#case "article">
749 <#case "youtube">
750 <#case "instagram">
751 <#case "linkedin">
752 <#case "announcements">
753 <#case "news">
754 <#-- Code for Events Section --></#-->
755 <div class="hero-top position-relative gradientbg">
756 <#if videoPreviewURL==''>
757 <div>
758 <img class="hero-image" src="${previewURL}" alt="Media Image" />
759 </div>
760 <#else>
761 <div>
762 <video class="hero-image" src="${videoPreviewURL}" poster="${previewURL}" muted loop playsinline preload="auto"
763 id="hero-video"></video>
764 </div>
765 <!-- <div class="cta-container">
766 <button class="view-button">
767 <div class="arrow-wrapper">
768 <i class="dwtc-hub-arrow-small"></i>
769 </div>
770
771 <div class="label" data-lfr-editable-id="play-button-text" data-lfr-editable-type="text">
772 ${languageUtil.get(locale, "see-video")}</div>
773 </button>
774 </div> -->
775 </#if>
776 <div class="container-fluid">
777 <div class="header-content">
778 <div class="title-wrapper ">
779 <h1 class="detail-title"><span class='strong'>DWTC</span> Hub
780 ${category.taxonomyCategoryName}</h1>
781 <h1 class="dwtc-way-title d-none"><span class='strong'>DWTC</span> Way</h1>
782 </div>
783
784 <div class="content-container">
785 <div class="article-header">
786 <div class="heading-container border-bottom-0 border-left-0 p-0">
787 <div class="heading-wrapper">
788 <!-- <div class="content-date">
789
790 <#if ObjectEntry_createDate.getData()??>
791 ${ObjectEntry_createDate.getData()?date("M/d/yy h:mm a")?string("dd MMM yyyy")}
792
793 </#if>
794
795 </div> -->
796 <#if category.taxonomyCategoryName?lower_case=="youtube" ||
797 category.taxonomyCategoryName?lower_case=="instagram" ||
798 category.taxonomyCategoryName?lower_case=="linkedin">
799 <a class="provider-container d-none via-youtube" href="${ObjectField_postUrl.getData()}" target="_blank">
800 <i class="dwtc-hub-${category.taxonomyCategoryName?lower_case}"></i>
801 <div class="provider-name">VIA ${category.taxonomyCategoryName?upper_case}
802 </div>
803 </a>
804 </#if>
805 <h2 class="content-title">
806 <a href="/web/the-hub/l/${ObjectEntry_objectEntryId.getData()}"> ${ObjectField_title.getData()}</a></h2>
807 <p class="short-description d-none">
808 ${ObjectField_shortDescription.getData()}
809 </p>
810
811 <div class="content-details">
812 <div class="duration">
813 <i class="dwtc-hub-clock"></i>
814 <div class="text">
815 0 Sec
816 </div>
817 </div>
818
819 <div class="date">
820 <div class="text">
821 <#if (ObjectEntry_modifiedDate.getData())??>
822
823 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d,
824 yyyy")}
825 </#if>
826 </div>
827 </div>
828
829 <div class="activity">
830 <div class="comments">
831 <i class="dwtc-hub-chat-bubble"></i>
832 <div class="text">${contentCommentData.totalCount}</div>
833 </div>
834
835 <div class="likes">
836 <i class="dwtc-hub-like" id="dwtc-hub-like-btn"></i>
837 <div class="text" id="dwtc-hub-like-count">0</div>
838 </div>
839 </div>
840 </div>
841 <#if category.taxonomyCategoryName?lower_case=="youtube">
842 <div class="watch-video-btn mt-4 mb-2 view-button" id="">
843 <div class="watch-video-link d-flex">
844 <div class="text">Watch Video</div> <i class="ml-3 dwtc-hub-arrow-small"></i>
845 </div>
846 </div>
847 </#if>
848 </div>
849 </div>
850 </div>
851 </div>
852
853 </div>
854 </div>
855 </div>
856 <#break>
857 </#switch>
858 </#list>
859</#if>
860
861<script>
862 $(document).ready(function () {
863 const $button = $(".view-button");
864 const $video = $(".hero-image");
865
866
867 if ($video.length && $video.prop("tagName").toLowerCase() === "video") {
868 $button.on("click", function () {
869 const videoEl = $video.get(0);
870 if (videoEl.paused) {
871 videoEl.play();
872 } else {
873 videoEl.pause();
874 }
875 });
876 };
877
878 });
879</script>
Technology integration, personalisation and a strong USP are key for existing and emerging fitness brands targeting an increasingly health aware GCC audience. Jack Thomas, co-founder of The Fit Guide, explains why this sector is ripe for growth
Health and wellness is a growing business across the GCC with the industry valued at $63.4 billion in 2022 and forecasted to grow to $94.6bn by 2028, according to market research company IMARC Group.
This reflects a growing interest in all aspects of personal wellbeing spurred by rising adoption of digital health technologies and overall demand for wellness services. At the same time, the brick-and-mortar fitness space, which encompasses big box brands, homegrown clubs, and a growing number of specialised fitness facilities,
A nuanced market
The GCC market does not follow a ‘one size fits all’ approach to fitness engagement and facility membership with nuanced cultural and workout genre preferences differentiating demand and opportunity from the UAE to Saudi Arabia,
From street corner gyms to big box brands, the competitive landscape is varied. In terms of competitiveness rankings, Dubai scores extremely highly for member engagement according to 2023 research conducted by The Fit Guide, a global, independent rating system for fitness clubs and studios in key cities. It also performs well for front desk staff product and package knowledge as well as client name usage, which has been identified as a global weak spot.
Incorporating a brand experience or sensory element within public areas is also a key consumer touchpoint with Dubai scoring above the global average at 63 per cent whereas Sydney, for example, scored 39 per cent.
When it comes to penetration, Kuwait has the highest rate in the region, according to 2021 research by Statista, with nine per cent of the population having a gym membership versus six per cent in the UAE and 2.7 per cent in Oman.
Markets across the Gulf may be less mature than their international counterparts and have a different demographic profile, but they are catching up. The market is wide open with numerous demand gaps to fill, which attracts fitness entrepreneurs looking to gain first-mover advantage, but the introduction of new concepts also requires investment into public awareness, which can slow opportunities for growth.