diff --git a/Resources/Private/Templates/Youtube/Index.html b/Resources/Private/Templates/Youtube/Index.html
index 0355ad6ef82af3b596db9fdc7b52f28c18705331..9cba7b51c16bc7884c926a6cf265b3cb74aa2cb6 100644
--- a/Resources/Private/Templates/Youtube/Index.html
+++ b/Resources/Private/Templates/Youtube/Index.html
@@ -1,3 +1,5 @@
+{namespace sg=SGalinski\ProjectTheme\ViewHelpers}
+
<f:layout name="Default"/>
<f:section name="main">
@@ -5,117 +7,152 @@
{debugOutput -> f:format.raw()}
</f:if>
- <f:if condition="{response.kind} == 'youtube#playlistItemListResponse' && {feed -> f:count() > 0}">
- <f:then>
- <div class="sg-youtube-playlist">
- <f:if condition="{feed -> f:count()} === 1">
+ <f:variable name="feedCount" value="{feed -> f:count()}"/>
+
+ <f:comment><!--Handle the container classes--></f:comment>
+ <f:variable name="classes">
+ <f:if condition="{feedCount} > 4">
+ <f:then>
+ sg-video--default
+ </f:then>
+ <f:else>
+ <f:switch expression="{settings.layout}">
+ <f:case value="rows">
+ sg-video--rows
+ </f:case>
+ <f:case value="playlist">
+ sg-video--playlist sg-video--{feedCount} row
+ </f:case>
+ <f:defaultCase>
+ sg-video--default
+ </f:defaultCase>
+ </f:switch>
+ </f:else>
+ </f:if>
+ </f:variable>
+
+ {sg:structuredVideoData(videoArray: '{feed}', arrayType: 'youtube')}
+
+ <f:comment><!--Set the layout to single if there is only one item.--></f:comment>
+ <div class="sg-video {f:if(condition: '{feedCount} > 1', then: '{classes}', else: 'sg-video--single')}">
+ <f:if condition="{feedCount} < 2">
+ <f:then>
+ <f:render section="youtubeItem" arguments="{
+ feedItem: feed.0,
+ titleChars: 1000,
+ descChars: 1000
+ }"/>
+ </f:then>
+ <f:else>
+ <f:if condition="{feedCount} > 4">
<f:then>
- <ul class="sg-youtube">
- <li class="sg-youtube-item-container sg-youtube-item-single">
- <a class="sg-youtube-item sg-card-shadow" href="{feed.0.url}&list={settings.id}" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
- <f:if condition="{feed.0.thumbnail}">
- <div class="sg-youtube-image">
- <img src="{feed.0.thumbnail}" alt="{feed.0.title}" loading="lazy" />
- </div>
- </f:if>
- <f:if condition="{feed.0.title}">
- <div class="sg-youtube-title">
- <h3 class="h3">
- <f:format.htmlentitiesDecode>{feed.0.title}</f:format.htmlentitiesDecode>
- </h3>
- </div>
- </f:if>
- <f:if condition="{showDescription} && {feed.0.description}">
- <div class="sg-youtube-text">
- <f:format.htmlentitiesDecode><f:format.crop maxCharacters="200">{feed.0.description}</f:format.crop></f:format.htmlentitiesDecode>
- </div>
- </f:if>
- </a>
- </li>
- </ul>
+ <f:render section="list" arguments="{_all}"/>
</f:then>
<f:else>
- <div class="sg-youtube">
- <div class="sg-youtube-item-container">
- <a class="sg-youtube-item sg-card-shadow" href="{feed.0.url}&list={settings.id}" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
- <f:if condition="{feed.0.thumbnail}">
- <div class="sg-youtube-image">
- <img src="{feed.0.thumbnail}" alt="{feed.0.title}" loading="lazy" />
- </div>
- </f:if>
- <f:if condition="{showTitle} && {feed.0.title}">
- <div class="sg-youtube-title">
- <h3 class="h3">
- <f:format.htmlentitiesDecode>{feed.0.title}</f:format.htmlentitiesDecode>
- </h3>
- </div>
- </f:if>
- <f:if condition="{showDescription} && {feed.0.description}">
- <div class="sg-youtube-text">
- <f:format.htmlentitiesDecode><f:format.crop maxCharacters="200">{feed.0.description}</f:format.crop></f:format.htmlentitiesDecode>
- </div>
- </f:if>
- </a>
- </div>
- </div>
- <ul class="sg-youtube">
- <f:for each="{feed}" as="feedItem" iteration="feedIterator">
- <f:if condition="!{feedIterator.isFirst}">
- <li class="sg-youtube-item-container sg-youtube-item-list">
- <a class="sg-youtube-item sg-card-shadow" href="{feedItem.url}&list={settings.id}" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
- <f:if condition="{feedItem.thumbnail}">
- <div class="sg-youtube-image">
- <picture>
- <source media="(max-width: 600px)"
- srcset="{f:uri.image(src: '{feedItem.thumbnail}', width: '600c')}">
- <source media="(max-width: 992px)"
- srcset="{f:uri.image(src: '{feedItem.thumbnail}', width: '992c')}">
- <f:image src="{feedItem.thumbnail}" alt="{feedItem.title}" class="sg-video__image" width="1140" loading="lazy"/>
- </picture>
- </div>
- </f:if>
- <f:if condition="{showTitle} && {feedItem.title}">
- <div class="sg-youtube-title">
- <h3 class="h3">
- <f:format.htmlentitiesDecode>{feedItem.title}</f:format.htmlentitiesDecode>
- </h3>
- </div>
- </f:if>
- </a>
- </li>
- </f:if>
- </f:for>
- </ul>
+ <f:switch expression="{settings.layout}">
+ <f:case value="playlist">
+ <f:render section="list-playlist" arguments="{_all}"/>
+ </f:case>
+ <f:defaultCase>
+ <f:render section="list" arguments="{_all}"/>
+ </f:defaultCase>
+ </f:switch>
</f:else>
</f:if>
+ </f:else>
+ </f:if>
+ </div>
+</f:section>
+
+<f:section name="list">
+ <ul class="sg-video__list sg-video__list--{f:if(condition: '{settings.layout} === \'rows\'', then: 'rows', else: 'default')}">
+ <f:for each="{feed}" as="feedItem" iteration="feedIterator">
+ <li class="sg-video__list-item">
+ <f:render section="youtubeItem" arguments="{
+ feed: feed,
+ feedItem: feedItem,
+ titleChars: 500,
+ descChars: 1000,
+ expand: 1
+ }"/>
+ </li>
+ </f:for>
+ </ul>
+</f:section>
+
+<f:section name="list-playlist">
+ <f:variable name="highlightClasses">
+ <f:switch expression="{feedCount}">
+ <f:case value="3">col-lg-8</f:case>
+ <f:case value="4">col-lg-6</f:case>
+ <f:defaultCase>col-md-6</f:defaultCase>
+ </f:switch>
+ </f:variable>
+
+ <f:variable name="listClasses">
+ <f:switch expression="{feedCount}">
+ <f:case value="3">col-lg-4</f:case>
+ <f:case value="4">col-lg-6</f:case>
+ <f:defaultCase>col-md-6</f:defaultCase>
+ </f:switch>
+ </f:variable>
+
+ <div class="sg-video__highlight {highlightClasses}">
+ <f:render section="youtubeItem" arguments="{
+ feedItem: feed.0,
+ titleChars: 200,
+ descChars: 320
+ }"/>
+ </div>
+ <ul class="sg-video__list sg-video__list--playlist {listClasses}">
+ <f:for each="{feed}" as="feedItem" iteration="feedIterator">
+ <f:if condition="!{feedIterator.isFirst}">
+ <li class="sg-video__list-item {f:if(condition: '{feedCount} === 4', then: 'sg-video__list-item--alt')}">
+ <f:render section="youtubeItem" arguments="{
+ feed: feed,
+ feedItem: feedItem,
+ titleChars: 100,
+ descChars: \" {f:if(condition: '{feedCount} < 3', then: '300', else: '90')}\"}" />
+ </li>
+ </f:if>
+ </f:for>
+ </ul>
+</f:section>
+
+<f:section name="youtubeItem">
+ <div class="sg-video__item">
+ <f:if condition="{feedItem.thumbnail}">
+ <a class="sg-video__image-container sg-youtube-item" href="{feedItem.url}"
+ data-disable-lightbox="{settings.disableLightbox}" target="_blank"
+ data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
+ <img class="sg-video__image" src="{feedItem.thumbnail}" alt="{feedItem.title}"/>
+ </a>
+ </f:if>
+ <f:if condition="{settings.showTitle} || {settings.showDescription}">
+ <div class="sg-video__bodytext">
+ <f:if condition="{settings.showTitle} && {feedItem.title}">
+ <h3 class="h3">
+ <f:format.crop maxCharacters="{titleChars}"><f:format.htmlentitiesDecode>{feedItem.title}</f:format.htmlentitiesDecode></f:format.crop>
+ </h3>
+ </f:if>
+ <f:if condition="{settings.showDescription} && {feedItem.description}">
+ <span class="sg-video__description">
+ <f:format.crop maxCharacters="{descChars}"><f:format.htmlentitiesDecode>{feedItem.description}</f:format.htmlentitiesDecode></f:format.crop>
+ </span>
+ </f:if>
+ <f:if condition="{expand} && {settings.layout} == 'rows'">
+ <f:render section="readMoreButton" />
+ </f:if>
</div>
- </f:then>
- <f:else>
- <ul class="sg-youtube sg-youtube-default">
- <f:for each="{feed}" as="feedItem" iteration="feedIterator">
- <li class="sg-youtube-item-container{f:if(condition: '{feedIterator.total} < 2', then: ' sg-youtube-item-single')}">
- <a class="sg-youtube-item sg-card-shadow" href="{feedItem.url}" target="_blank" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
- <f:if condition="{feedItem.thumbnail}">
- <div class="sg-youtube-image">
- <img src="{feedItem.thumbnail}" alt="{feedItem.title}" loading="lazy"/>
- </div>
- </f:if>
- <f:if condition="{showTitle} && {feedItem.title}">
- <div class="sg-youtube-title">
- <h3 class="h3">
- <f:format.htmlentitiesDecode>{feedItem.title}</f:format.htmlentitiesDecode>
- </h3>
- </div>
- </f:if>
- <f:if condition="{showDescription} && {feedItem.description}">
- <div class="sg-youtube-text">
- <f:format.htmlentitiesDecode><f:format.crop maxCharacters="200">{feedItem.description}</f:format.crop></f:format.htmlentitiesDecode>
- </div>
- </f:if>
- </a>
- </li>
- </f:for>
- </ul>
- </f:else>
- </f:if>
+ <f:if condition="{expand} && {settings.layout} == 'default'">
+ <f:render section="readMoreButton" />
+ </f:if>
+ </f:if>
+ </div>
+</f:section>
+
+<f:section name="readMoreButton">
+ <button type="button" class="sg-video__read-more"
+ data-button-open-text="{f:translate(key: 'frontend.readMore', extensionName: 'project_theme')}"
+ data-button-close-text="{f:translate(key: 'frontend.readLess', extensionName: 'project_theme')}">{f:translate(key: 'frontend.readMore', extensionName: 'project_theme')}</button>
</f:section>