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>
Join Amer Alfarsi, VP of Real Estate Development, for a behind-the-scenes tour of Phase One of the DEC expansion