Skip to content

Commit

Permalink
Merge pull request #359 from Shinsina/autoplay-video-on-mute
Browse files Browse the repository at this point in the history 
 Autoplay the video on homepage on mute, adjust styling of podcast callouts.
  • Loading branch information
@Shinsina
Shinsina authored Sep 10, 2024
2 parents 4088d58 + fe8fa48 commit 7d57571
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 26 deletions.
162 changes: 138 additions & 24 deletions sites/diverseeducation.com/server/components/blocks/latest-podcast.marko
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import queryFragment from '@cox-matthews-associates/package-global/graphql/fragments/content-page';
import sectionFragment from "@parameter1/base-cms-marko-web-theme-monorail/graphql/fragments/section-info";
import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";


$ const queryParams = {
sectionAlias: "podcasts",
Expand All @@ -12,18 +14,50 @@ $ const queryParams = {
$ const { site, i18n } = out.global;
$ const podcastLinks = site.getAsArray("podcastLinks");
$ const blockName = "latest-podcast";
$ const withVideo = defaultValue(input.withVideo, false);

<marko-web-block name="callout-cards">
<marko-web-element block-name="callout-cards" name="row">
<marko-web-query|{ nodes, section }| name="website-scheduled-content" params=queryParams>
$ const [node] = nodes;
<marko-web-element block-name="callout-cards" name="col">
<marko-web-block name=blockName>
<marko-web-element block-name=blockName name="header">
<marko-web-icon name="file" modifiers=[blockName] />
${section.name}
</marko-web-element>

<if(withVideo)>
<marko-web-block name="callout-cards">
<marko-web-element block-name="callout-cards" name="row">
<marko-web-query|{ nodes, section }| name="website-scheduled-content" params=queryParams>
$ const [node] = nodes;
<marko-web-element block-name="callout-cards" name="col">
<marko-web-block name=blockName>
<marko-web-element block-name=blockName name="header">
<marko-web-icon name="file" modifiers=[blockName] />
${section.name}
</marko-web-element>
<div style="display: flex">
<div class="podcast-logo-description-wrapper">
<marko-web-img
class="section__logo"
src="https://img.diverseeducation.com/files/base/diverse/all/image/2023/12/InTheMarginsArt23_1_.656deceee49c6.png"
srcset=["https://img.diverseeducation.com/files/base/diverse/all/image/2023/12/InTheMarginsArt23_1_.656deceee49c6.png?dpr=2 2x"]
alt="In The Margins Logo"
/>
</div>
<div class="col">
<marko-web-node
type=`${node.type}-content`
card=true
flush=true
full-height=false
modifiers=[blockName]
>
<@body>
<@header>
<@left>
${i18n("Latest Episode")}
</@left>
</@header>
<@title tag="h5">
<marko-web-content-name tag=null obj=node link=true />
</@title>
</@body>
</marko-web-node>
</div>
</div>
<br/>
<marko-web-node
type=`${node.type}-content`
card=true
Expand All @@ -32,14 +66,6 @@ $ const blockName = "latest-podcast";
modifiers=[blockName]
>
<@body>
<@header>
<@left>
${i18n("Latest Episode")}
</@left>
</@header>
<@title tag="h5">
<marko-web-content-name tag=null obj=node link=true />
</@title>
<@text modifiers=["more-episodes"]>
<marko-web-website-section-name|{ value }| tag=null obj=section link=true>
${i18n("More episodes")} &raquo;
Expand All @@ -63,8 +89,9 @@ $ const blockName = "latest-podcast";
</if>
</@body>
</marko-web-node>
</marko-web-block>
</marko-web-element>
</marko-web-block>
</marko-web-element>
</marko-web-query>
<marko-web-element block-name="callout-cards" name="col" modifiers=["last"]>
<marko-web-block name=blockName>
<marko-web-element block-name=blockName name="header">
Expand All @@ -81,11 +108,98 @@ $ const blockName = "latest-podcast";
}
>
<if(nodes[0].embedCode)>
$ const matches = nodes[0].embedCode.match(/src\=\"(.+?)\"/);
$ if (matches.length) {
const [, urlMatch] = matches;
const urlMatchAsURL = new URL(urlMatch);
if (!urlMatchAsURL.searchParams.has('mute', '1')) {
urlMatchAsURL.searchParams.set('mute', '1');
}
if (!urlMatchAsURL.searchParams.has('autoplay', '1')) {
urlMatchAsURL.searchParams.set('autoplay', '1');
}
if (!urlMatchAsURL.searchParams.has('rel', '0')) {
urlMatchAsURL.searchParams.set('rel', '0');
}
nodes[0].embedCode = nodes[0].embedCode.replace(urlMatch, String(urlMatchAsURL));
}
<marko-web-content-embed-code block-name=blockName obj=nodes[0] modifiers=["podcast-video"] />
</if>
</marko-web-query>
</marko-web-block>
</marko-web-element>
</marko-web-query>
</marko-web-element>
</marko-web-block>
</marko-web-element>
</marko-web-block>
</if>
<else>
<marko-web-query|{ nodes, section }| name="website-scheduled-content" params=queryParams>
$ const [node] = nodes;
<marko-web-block name=blockName>
<marko-web-element block-name=blockName name="header">
<marko-web-icon name="file" modifiers=[blockName] />
${section.name}
</marko-web-element>
<div style="display: flex">
<div class="podcast-logo-description-wrapper">
<marko-web-img
class="section__logo"
src="https://img.diverseeducation.com/files/base/diverse/all/image/2023/12/InTheMarginsArt23_1_.656deceee49c6.png?w=100"
srcset=["https://img.diverseeducation.com/files/base/diverse/all/image/2023/12/InTheMarginsArt23_1_.656deceee49c6.png?w=100&dpr=2 2x"]
alt="In The Margins Logo"
/>
</div>
<div class="col">
<marko-web-node
type=`${node.type}-content`
card=true
flush=true
full-height=false
modifiers=[blockName]
>
<@body>
<@header>
<@left>
${i18n("Latest Episode")}
</@left>
</@header>
<@title tag="h5">
<marko-web-content-name tag=null obj=node link=true />
</@title>
</@body>
</marko-web-node>
</div>
</div>
<marko-web-node
type=`${node.type}-content`
card=true
flush=true
full-height=false
modifiers=[blockName]
>
<@body>
<@text modifiers=["more-episodes"]>
<marko-web-website-section-name|{ value }| tag=null obj=section link=true>
${i18n("More episodes")} &raquo;
</marko-web-website-section-name>
</@text>
<if(podcastLinks.length)>
<@footer>
<@left modifiers=["buttons"]>
<for|link| of=podcastLinks>
<marko-web-link
class=`btn btn-light ${blockName}__btn`
href=link.href
title=link.label
target="_blank"
>
${link.label}
</marko-web-link>
</for>
</@left>
</@footer>
</if>
</@body>
</marko-web-node>
</marko-web-block>
</marko-web-query>
</else>
2 changes: 1 addition & 1 deletion sites/diverseeducation.com/server/components/blocks/promo-card-rotation.marko
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ $ const placement = nxConfig.getPlacement({ name: placementName, aliases });
<marko-web-block name=blockName>
<marko-web-element block-name=blockName name="row">
<marko-web-element block-name=blockName name="col">
<theme-latest-podcast-block alias="podcasts" />
<site-latest-podcast-block />
</marko-web-element>
<marko-web-native-x-fetch-elements|{ ads }| uri=uri id=placement.id>
$ const hasAd = ads && ads.length && ads[0] && ads[0].hasCampaign;
Expand Down
2 changes: 1 addition & 1 deletion sites/diverseeducation.com/server/templates/index.marko
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ $ const { id, alias, name, pageNode } = input;
</@section>

<@section>
<site-latest-podcast-block />
<site-latest-podcast-block with-video=true />
</@section>

<@section|{ aliases }|>
Expand Down

0 comments on commit 7d57571

Please sign in to comment.