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 697, column 193]
----
1<style>
2 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .provider-container:hover .provider-name {
3 text-decoration: underline;
4 }
5
6 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration {
7 align-items: center;
8 display: flex;
9 gap: 6px;
10 }
11
12 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration i {
13 color: #D7CCFF;
14 font-size: 18px;
15 }
16
17 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration .text {
18 color: #D7CCFF;
19 font-family: "URW DIN-Regular", Helvetica;
20 font-weight: 400;
21 font-size: 14px;
22 letter-spacing: 0.56px;
23 line-height: 100%;
24 text-box-cap: cap alphabetic;
25 text-box-trim: trim-both;
26 text-transform: uppercase;
27 }
28
29 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .date .text {
30 color: #D7CCFF;
31 font-family: "URW DIN-Regular", Helvetica;
32 font-weight: 400;
33 font-size: 14px;
34 letter-spacing: 0.56px;
35 line-height: 100%;
36 text-box-cap: cap alphabetic;
37 text-box-trim: trim-both;
38 text-transform: uppercase;
39 }
40
41 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity {
42 align-items: center;
43 display: flex;
44 flex-direction: row;
45 gap: 16px;
46 }
47
48 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments,
49 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes {
50 align-items: center;
51 display: flex;
52 gap: 8px;
53 }
54
55 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i,
56 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i {
57 color: #D7CCFF;
58 cursor: pointer;
59 font-size: 18px;
60 }
61
62
63 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration {
64 align-items: center;
65 display: flex;
66 gap: 6px;
67 }
68
69 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration i {
70 color: #D7CCFF;
71 font-size: 18px;
72 }
73
74 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration .text {
75 color: #D7CCFF;
76 font-family: "URW DIN-Regular", Helvetica;
77 font-weight: 400;
78 font-size: 14px;
79 letter-spacing: 0.56px;
80 line-height: 100%;
81 text-box-cap: cap alphabetic;
82 text-box-trim: trim-both;
83 text-transform: uppercase;
84 }
85
86 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .date .text {
87 color: #D7CCFF;
88 font-family: "URW DIN-Regular", Helvetica;
89 font-weight: 400;
90 font-size: 14px;
91 letter-spacing: 0.56px;
92 line-height: 100%;
93 text-box-cap: cap alphabetic;
94 text-box-trim: trim-both;
95 text-transform: uppercase;
96 }
97
98 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity {
99 align-items: center;
100 display: flex;
101 flex-direction: row;
102 gap: 16px;
103 }
104
105 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments,
106 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes {
107 align-items: center;
108 display: flex;
109 gap: 8px;
110 }
111
112 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i,
113 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i {
114 color: #D7CCFF;
115 cursor: pointer;
116 font-size: 18px;
117 }
118
119 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i:hover::before {
120 content: "\e91c";
121 }
122
123 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i:hover::before {
124 content: "\e91d";
125 }
126
127 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments .text,
128 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes .text {
129 color: #D7CCFF;
130 font-family: "URW DIN-Regular", Helvetica;
131 font-weight: 400;
132 font-size: 14px;
133 letter-spacing: 0.56px;
134 line-height: 100%;
135 text-box-cap: cap alphabetic;
136 text-box-trim: trim-both;
137 text-transform: uppercase;
138 }
139
140 /* Featured */
141 .header-content .featured {
142 display: flex;
143 width: 100%;
144 }
145
146 .header-content .featured .mobile-episode-description {
147 display: none;
148 }
149
150 .header-content .featured .episode-description {
151 align-items: flex-start;
152 display: flex;
153 flex-direction: column;
154 gap: 24px;
155 justify-content: flex-end;
156 max-width: 597px;
157 padding-left: 24px;
158 padding-bottom: 83px;
159 width: 100%;
160 }
161
162 .header-content .featured .episode-description .episode-intro {
163 color: #ffffff;
164 font-family: "DIN Pro-Medium", Helvetica;
165 font-size: 24px;
166 font-weight: 500;
167 letter-spacing: -0.96px;
168 line-height: 100%;
169 }
170
171 .header-content .featured .episode-description .description {
172 color: #D7CCFF;
173 font-family: "DIN Pro-Regular", Helvetica;
174 font-size: 16px;
175 font-weight: 400;
176 letter-spacing: -0.32px;
177 line-height: 120%;
178 }
179
180 .header-content .featured .episode-description .content-details {
181 align-items: center;
182 display: flex;
183 flex-direction: row;
184 gap: 20px;
185 }
186
187 .header-content .featured .episode-description .content-details .duration {
188 align-items: center;
189 display: flex;
190 gap: 6px;
191 }
192
193 .header-content .featured .episode-description .content-details .duration i {
194 color: #D7CCFF;
195 font-size: 18px;
196 }
197
198 .header-content .featured .episode-description .content-details .duration .text {
199 color: #D7CCFF;
200 font-family: "URW DIN-Regular", Helvetica;
201 font-weight: 400;
202 font-size: 14px;
203 letter-spacing: 0.56px;
204 line-height: 100%;
205 text-box-cap: cap alphabetic;
206 text-box-trim: trim-both;
207 text-transform: uppercase;
208 }
209
210 .header-content .featured .episode-description .content-details .date .text {
211 color: #D7CCFF;
212 font-family: "URW DIN-Regular", Helvetica;
213 font-weight: 400;
214 font-size: 14px;
215 letter-spacing: 0.56px;
216 line-height: 100%;
217 text-box-cap: cap alphabetic;
218 text-box-trim: trim-both;
219 text-transform: uppercase;
220 }
221
222
223 .header-content .featured .episode-description .content-details .activity {
224 align-items: center;
225 display: flex;
226 flex-direction: row;
227 gap: 16px;
228 }
229
230 .header-content .featured .episode-description .content-details .activity .comments,
231 .header-content .featured .episode-description .content-details .activity .likes {
232 align-items: center;
233 display: flex;
234 gap: 8px;
235 }
236
237 .header-content .featured .episode-description .content-details .activity .comments i,
238 .header-content .featured .episode-description .content-details .activity .likes i {
239 color: #D7CCFF;
240 cursor: pointer;
241 font-size: 18px;
242 }
243
244 .header-content .featured .episode-description .content-details .activity .comments i:hover::before {
245 content: "\e91c";
246 }
247
248 .header-content .featured .episode-description .content-details .activity .likes i:hover::before {
249 content: "\e91d";
250 }
251
252 .DWTC-hub-d {
253 display: flex;
254 flex-direction: column;
255 align-items: flex-start;
256 position: relative;
257 }
258
259 .DWTC-hub-d .hero-top {
260 display: flex;
261 flex-direction: column;
262 height: 100%;
263 align-items: flex-start;
264 gap: 132px;
265 padding: 42px 32px;
266 position: relative;
267 align-self: stretch;
268 width: 100%;
269 overflow: hidden;
270 }
271
272 .DWTC-hub-d .hero-top .hero-image {
273 position: absolute;
274 top: 0;
275 left: 0;
276 right: 0;
277 bottom: 0;
278 object-fit: cover;
279 width: 100%;
280 height: 100%;
281 }
282
283 .hero-top .cta-container {
284 align-items: flex-end;
285 display: flex;
286 flex-grow: 1;
287 justify-content: flex-end;
288 width: fit-content;
289 z-index: 1;
290 position: absolute;
291 left: 50%;
292 top: 50%;
293 transform: translate(-50%, -50%);
294 }
295
296 .hero-top .cta-container .view-button {
297 align-items: center;
298 background: radial-gradient(107.32% 141.42% at 0% 0%, rgba(244, 244, 244, 0.28) 0%, rgba(233, 233, 233, 0.34) 100%);
299 border: 1px solid rgba(244, 244, 244, 0.56);
300 border-radius: 40px;
301 display: flex;
302 gap: 16px;
303 height: 54px;
304 padding: 20px 0px;
305 transition: background-color 0.3s ease;
306 width: 186px;
307 }
308
309 .hero-top .cta-container .view-button .arrow-wrapper {
310 align-items: center;
311 background-color: #000;
312 border-radius: 50%;
313 display: flex;
314 height: 46px;
315 justify-content: center;
316 margin-left: 4px;
317 width: 46px;
318 }
319
320 .hero-top .cta-container .view-button .arrow-wrapper i {
321 color: #ffffff;
322 font-size: 16px;
323 }
324
325 .hero-top .cta-container .view-button:hover {
326 background: none;
327 background-color: #000;
328 border-color: #000;
329 }
330
331 .hero-top .cta-container .view-button .label {
332 color: #fff;
333 font-family: "DIN Pro-Medium", Helvetica;
334 font-weight: 500;
335 font-size: 18px;
336 letter-spacing: -0.72px;
337 line-height: 100%;
338 text-box-cap: both alphabetic;
339 text-box-trim: trim-both;
340 transition: color 0.3s ease;
341 }
342
343 .hero-top .cta-container .view-button:hover .label {
344 color: #ffffff;
345 }
346
347 .hero-top .cta-container .view-button .arrow-wrapper .arrow-right {
348 background-color: #fff;
349 -webkit-mask-image: url("assets/images/svg/btn-arrow-right.svg");
350 mask-image: url("assets/images/svg/btn-arrow-right.svg");
351 -webkit-mask-repeat: no-repeat;
352 mask-repeat: no-repeat;
353 background-position: 50% 50%;
354 width: 14px;
355 height: 10px;
356 transition: background-color 0.3s ease;
357 }
358
359 .hero-top .cta-container .view-button:hover .arrow-wrapper .arrow-right {
360 background-color: #fff;
361 }
362
363 @media (max-width: 1750px) {
364 .header-content .content-container .featured .mobile-episode-description .content-details .duration i {
365 color: #D7CCFF;
366 font-size: 18px;
367 }
368
369 .header-content .content-container .featured .mobile-episode-description .content-details .activity .comments,
370 .header-content .content-container .featured .mobile-episode-description .content-details .activity .likes i {
371 color: #D7CCFF;
372 font-size: 18px;
373 cursor: pointer;
374 }
375 }
376
377 @media (max-width: 991.98px) {
378 .DWTC-hub-d .hero-top {
379 padding: 32px 28px;
380 }
381 }
382
383 @media (max-width: 768px) {
384 .dwtc-hub-play-button {
385 font-size: 10px;
386 }
387 }
388
389 @media (max-width: 575px) {
390 .dwtc-hub-play-button {
391 font-size: 10px;
392 }
393 }
394
395 .dwtc-way-ihero .header-content .title-wrapper h1.detail-title {
396 display: none;
397 }
398
399 .dwtc-way-ihero .header-content .title-wrapper h1.dwtc-way-title {
400 display: block !important;
401 }
402
403 .dwtc-way-ihero .header-content .heading-container {
404 border: none;
405 }
406
407 .dwtc-way-ihero .header-content .content-date {
408 display: none;
409 }
410
411 .dwtc-way-ihero .header-content .content-details {
412 display: none !important;
413 }
414
415 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .short-description {
416 display: block !important;
417 color: #ffffff;
418 font-family: "DIN Pro-Light", Helvetica;
419 font-size: 24px;
420 font-weight: 300;
421 letter-spacing: -0.96px;
422 line-height: 120%;
423 }
424
425 @media (max-width: 1160px) {
426 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .short-description {
427 font-size: 16px;
428 letter-spacing: -0.64px;
429 line-height: 100%;
430 }
431 }
432</style>
433
434<#macro formatTimeAgo inputDate>
435 <#assign cleanedDate=inputDate?replace("[ ,]", " " , "r" )?trim>
436 <#attempt>
437 <#assign parsedDate=cleanedDate?datetime("M/dd/yy hh:mm a")>
438 <#recover>
439 <#assign parsedDate=cleanedDate?datetime("M/dd/yyyy hh:mm a")>
440 </#attempt>
441
442 <#assign now=.now>
443 <#assign diffInMillis=now?long - parsedDate?long>
444 <#assign diffInSeconds=diffInMillis / 1000>
445 <#assign diffInMinutes=diffInSeconds / 60>
446 <#assign diffInHours=diffInMinutes / 60>
447 <#assign diffInDays=diffInHours / 24>
448
449 <#if diffInSeconds < 60>
450 ${diffInSeconds?int} seconds
451 <#elseif diffInMinutes < 60>
452 ${diffInMinutes?int} minutes
453 <#elseif diffInHours < 24>
454 ${diffInHours?int} hours
455 <#else>
456 ${diffInDays?int} days
457 </#if>
458</#macro>
459
460<#assign hubContentDataResponse=restClient.get("/c/dwtchubcontents/${ObjectEntry_objectEntryId.getData()}?fields=taxonomyCategoryBriefs") />
461
462<#if hubContentDataResponse?has_content && hubContentDataResponse.taxonomyCategoryBriefs??>
463 <#assign categories=hubContentDataResponse.taxonomyCategoryBriefs />
464 <#if categories?has_content && categories??>
465 <div class="d-none" id="object-selected-categories">
466 <#list categories as category>
467 <div class="taxonomy-category">
468 <div class="id">
469 ${category.taxonomyCategoryId}
470 </div>
471 <div class="name">
472 ${category.taxonomyCategoryName}
473 </div>
474 </div>
475 </#list>
476 </div>
477 </#if>
478</#if>
479
480<#assign scopeGroupId=themeDisplay.getScopeGroupId()>
481<#assign contentCommentData = restClient.get("/c/usercomments/scopes/${scopeGroupId}?filter=r_hubContentUserComments_c_dwtcHubContentId eq '${ObjectEntry_objectEntryId.getData()}'")>
482<#assign videoPreviewURL="" />
483<#assign previewURL="" />
484
485<#if (.data_model["ObjectField_117605#previewURL"].getData())?? &&
486 .data_model["ObjectField_117605#previewURL"].getData() !="">
487 <#assign videoPreviewURL=.data_model["ObjectField_117605#previewURL"].getData()!"">
488</#if>
489
490<#if (.data_model["ObjectField_90598#previewURL"].getData())?? &&
491.data_model["ObjectField_90598#previewURL"].getData() !="">
492 <#assign previewURL=.data_model["ObjectField_90598#previewURL"].getData()!"">
493</#if>
494
495<div class="d-none" id="hub-content-id">
496 ${ObjectEntry_objectEntryId.getData()}
497</div>
498
499<#if categories?has_content && categories??>
500 <#list categories as category>
501 <#switch category.taxonomyCategoryName?lower_case>
502 <#case "spotify">
503 <#-- Code for Podcast Section --></#-->
504 <div class="hero-top">
505 <#if videoPreviewURL==''>
506 <div>
507 <img class="hero-image" src="${previewURL}" alt="Media Image" />
508 </div>
509 <#else>
510 <div>
511 <video class="hero-image" src="${videoPreviewURL}" poster="${previewURL}" muted loop playsinline preload="auto"
512 id="hero-video"></video>
513 </div>
514 <div class="cta-container">
515 <button class="view-button">
516 <div class="arrow-wrapper">
517 <i class="dwtc-hub-arrow-small"></i>
518 </div>
519
520 <div class="label" data-lfr-editable-id="play-button-text" data-lfr-editable-type="text">
521 ${languageUtil.get(locale, "see-video")}
522 </div>
523 </button>
524 </div>
525 </#if>
526 <div class="container-fluid">
527 <div class="header-content">
528 <div class="title-wrapper ">
529 <h1 class="detail-title mb-3"><span class='strong'>DWTC</span> Hub ${category.taxonomyCategoryName}</h1>
530 <h1 class="dwtc-way-title d-none"><span class='strong'>DWTC</span> Way</h1>
531 </div>
532 <div class="content-container">
533 <div class="featured">
534 <div class="heading-container">
535 <div class="heading-wrapper" id="player-wrapper">
536 <div class="spotify-player-wrapper">
537 <div class="player">
538 <div class="spotify-icon dwtc-hub-spotify"></div>
539
540 <#if (.data_model["ObjectField_75707#previewURL"].getData())?? &&
541 .data_model["ObjectField_75707#previewURL"].getData() !="">
542 <audio id="audio" src="${.data_model["ObjectField_75707#previewURL"].getData()}"></audio>
543 </#if>
544 <div class="player-content">
545 <div class="cover-art d-flex align-items-center justify-content-center">
546 <img src="/documents/d/the-hub/dwtc-logo-blue-outline" alt="Logo" />
547 </div>
548 <div class="control-section">
549
550 <div class="video-heading">
551 <div id="mediaTitle">${ObjectField_title.getData()}</div>
552
553 </div>
554 <div class="bottom-section">
555 <div class="seek-controls">
556 <button id="backward" class="player-rewind-backward"></button>
557 <input type="range" id="seekBar" class="seek-bar" min="0" value="0" max="372.715083">
558 <button id="forward" class="player-rewind-forward"></button>
559 <div class="player-time">
560 <span id="duration">0:00</span>
561
562 </div>
563 <div class="player-dots">...</div>
564 <button id="playPause">
565 <i class="dwtc-hub-play-button"></i>
566 <svg class="lexicon-icon lexicon-icon-pause d-none" role="presentation">
567 <use href="/o/classic-theme/images/clay/icons.svg#pause"></use>
568 </svg>
569 </button>
570 </div>
571 </div>
572 </div>
573 </div>
574 </div>
575 </div>
576
577 <div class="mobile-episode-description">
578 <div class="episode-intro">${languageUtil.get(locale, "about-the-episode")}</div>
579
580 <p class="description">
581 ${ObjectField_shortDescription.getData()}
582 </p>
583
584 <div class="content-details">
585 <div class="duration">
586 <i class="dwtc-hub-clock"></i>
587 <div class="text">
588 0 Sec
589 </div>
590 </div>
591
592 <div class="date">
593 <div class="text">
594 <#if (ObjectEntry_modifiedDate.getData())??>
595 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
596 </#if>
597 </div>
598 </div>
599
600 <div class="activity">
601 <div class="comments">
602 <i class="dwtc-hub-chat-bubble"></i>
603 <div class="text">${contentCommentData.totalCount}</div>
604 </div>
605
606 <div class="likes">
607 <i class="dwtc-hub-like like-btn" id="dwtc-hub-like-mobile-btn"></i>
608 <div class="text like-count" id="dwtc-hub-like--mobile-count">0</div>
609 </div>
610 </div>
611 </div>
612 </div>
613 </div>
614 </div>
615 <div class="episode-description">
616 <div class="episode-intro">${languageUtil.get(locale, "about-the-episode")}</div>
617 <p class="description">
618 ${ObjectField_shortDescription.getData()}
619 </p>
620 <div class="content-details">
621 <div class="duration">
622 <i class="dwtc-hub-clock"></i>
623 <div class="text">
624 0 Sec
625 </div>
626 </div>
627 <div class="date">
628 <div class="text">
629 <#if (ObjectEntry_modifiedDate.getData())??>
630 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
631 </#if>
632 </div>
633 </div>
634 <div class="activity">
635 <div class="comments">
636 <i class="dwtc-hub-chat-bubble"></i>
637 <div class="text">${contentCommentData.totalCount}</div>
638 </div>
639 <div class="likes">
640 <i class="dwtc-hub-like like-btn" id="dwtc-hub-like-btn"></i>
641 <div class="text like-count" id="dwtc-hub-like-count">0</div>
642 </div>
643 </div>
644 </div>
645 </div>
646 </div>
647 </div>
648
649 </div>
650 </div>
651 </div>
652
653 <#break>
654 <#case "article">
655 <#case "youtube">
656 <#case "instagram">
657 <#case "linkedin">
658 <#case "announcements">
659 <#case "news">
660 <#-- Code for Events Section --></#-->
661 <div class="hero-top">
662 <#if videoPreviewURL==''>
663 <div>
664 <img class="hero-image" src="${previewURL}" alt="Media Image" />
665 </div>
666 <#else>
667 <div>
668 <video class="hero-image" src="${videoPreviewURL}" poster="${previewURL}" muted loop playsinline preload="auto"
669 id="hero-video"></video>
670 </div>
671 <div class="cta-container">
672 <button class="view-button">
673 <div class="arrow-wrapper">
674 <i class="dwtc-hub-arrow-small"></i>
675 </div>
676
677 <div class="label" data-lfr-editable-id="play-button-text" data-lfr-editable-type="text">
678 ${languageUtil.get(locale, "see-video")}</div>
679 </button>
680 </div>
681 </#if>
682 <div class="container-fluid">
683 <div class="header-content">
684 <div class="title-wrapper ">
685 <h1 class="detail-title"><span class='strong'>DWTC</span> Hub
686 ${category.taxonomyCategoryName}</h1>
687 <h1 class="dwtc-way-title d-none"><span class='strong'>DWTC</span> Way</h1>
688 </div>
689
690 <div class="content-container">
691 <div class="article-header">
692 <div class="heading-container">
693 <div class="heading-wrapper">
694 <!-- <div class="content-date">
695
696 <#if ObjectEntry_createDate.getData()??>
697 ${ObjectEntry_createDate.getData()?date("M/d/yy h:mm a")?string("dd MMM yyyy")}
698
699 </#if>
700
701 </div> -->
702 <h2 class="content-title">
703 ${ObjectField_title.getData()}</h2>
704 <p class="short-description d-none">
705 ${ObjectField_shortDescription.getData()}
706 </p>
707 <#if category.taxonomyCategoryName?lower_case=="youtube" ||
708 category.taxonomyCategoryName?lower_case=="instagram" ||
709 category.taxonomyCategoryName?lower_case=="linkedin">
710 <a class="provider-container d-none" href="${ObjectField_postUrl.getData()}" target="_blank">
711 <i class="dwtc-hub-${category.taxonomyCategoryName?lower_case}"></i>
712 <div class="provider-name">VIA ${category.taxonomyCategoryName?upper_case}
713 </div>
714 </a>
715 </#if>
716 <div class="content-details">
717 <div class="duration">
718 <i class="dwtc-hub-clock"></i>
719 <div class="text">
720 0 Sec
721 </div>
722 </div>
723
724 <div class="date">
725 <div class="text">
726 <#if (ObjectEntry_modifiedDate.getData())??>
727
728 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d,
729 yyyy")}
730 </#if>
731 </div>
732 </div>
733
734 <div class="activity">
735 <div class="comments">
736 <i class="dwtc-hub-chat-bubble"></i>
737 <div class="text">${contentCommentData.totalCount}</div>
738 </div>
739
740 <div class="likes">
741 <i class="dwtc-hub-like" id="dwtc-hub-like-btn"></i>
742 <div class="text" id="dwtc-hub-like-count">0</div>
743 </div>
744 </div>
745 </div>
746 </div>
747 </div>
748 </div>
749 </div>
750 </div>
751 </div>
752 </div>
753 <#break>
754 </#switch>
755 </#list>
756</#if>
757
758<script>
759 $(document).ready(function () {
760 const $button = $(".view-button");
761 const $video = $(".hero-image");
762
763
764 if ($video.length && $video.prop("tagName").toLowerCase() === "video") {
765 $button.on("click", function () {
766 const videoEl = $video.get(0);
767 if (videoEl.paused) {
768 videoEl.play();
769 } else {
770 videoEl.pause();
771 }
772 });
773 };
774
775 });
776</script>
Latest from DWTC Hub Content