Skip to content

Commit

Permalink
Implements initial ability to dock the player to top or bottom of page
Browse files Browse the repository at this point in the history
  • Loading branch information
@wadebekker
wadebekker committed Jan 2, 2025
1 parent 376e6db commit c43ffd9
Show file tree
Hide file tree
Showing 5 changed files with 372 additions and 108 deletions.
7 changes: 6 additions & 1 deletion assets/js/blocks.js
100755 → 100644
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,12 @@ export default registerBlockType(
displayEpisodeType: {
type: 'boolean',
default: false,
}
},
isDocked: {
type: 'string',
default: 'none',
enum: ['none', 'top', 'bottom'],
},
},
transforms,

Expand Down
75 changes: 75 additions & 0 deletions assets/js/blocks/podcast/index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,80 @@
body.has-docked-bottom {
padding-bottom: 150px;
&.docked-in-editor .docked-bottom {
bottom: 24px;
}
}
body.has-docked-top {
padding-top: 150px;
&.docked-in-editor {
padding-top: 0px;
}
&.docked-in-editor .editor-styles-wrapper {
padding-top: 150px;
}
&.docked-in-editor .docked-top {
top: 60px;
}

&.logged-in.admin-bar {
padding-top: 182px;
}

&.logged-in.admin-bar .docked-top {
top: 32px;
}
}


.wp-block-podcasting-podcast-outer {
border: 1px solid #707070;
border-radius: 4px;
padding: 20px;

&.docked-bottom {
margin: 0;
background-color: var(--wp--preset--color--base);
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 34;
border-radius: 4px 4px 0px 0px;
max-width: initial;
.wp-block-podcasting-podcast__container {
margin-bottom: 0px;
}

.wp-block-podcasting-podcast__details {
width: 100%;
}

#toggle-details-button {
margin-bottom: 20px;
}
}
&.docked-top {
margin: 0;
background-color: var(--wp--preset--color--base);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 34;
border-radius: 0px 0px 4px 4px;
max-width: initial;
.wp-block-podcasting-podcast__container {
margin-bottom: 0px;
}

.wp-block-podcasting-podcast__details {
width: 100%;
}

#toggle-details-button {
margin-bottom: 20px;
}
}
}

.wp-block-podcasting-podcast__container {
Expand All @@ -13,9 +86,11 @@
}

.wp-block-podcasting-podcast__show-art {
display: none;
margin-bottom: 20px;

@media (min-width: 768px) {
display: block;
flex-basis: 100px;
margin-bottom: 0;
margin-right: 20px;
Expand Down
241 changes: 174 additions & 67 deletions assets/js/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,8 @@ function Edit( props ) {
displayExplicitBadge,
displaySeasonNumber,
displayEpisodeNumber,
displayEpisodeType
displayEpisodeType,
isDocked,
} = attributes;

const duration = attributes.duration || '';
Expand Down Expand Up @@ -185,6 +186,53 @@ function Edit( props ) {
setFeaturedImage(image.id);
};

// Docked Player
const dockedClass = isDocked !== 'none' ? `docked-${isDocked}` : '';
const [showPodcastMeta, setShowPodcastMeta] = useState(false);
const [isDisplayingSettings, setIsDisplayingSettings] = useState(false);

const checkDisplaySettings = () => {
if (displayDuration || displayShowTitle ||
// displayEpisodeTitle ||
// displayArt ||
displayExplicitBadge || displaySeasonNumber || displayEpisodeNumber || displayEpisodeType) {
setIsDisplayingSettings(true);
}
else {
setIsDisplayingSettings(false);
}
}

// If the user changes one of the toggles, the checkDisplaySettings function will be called to check if any of the display settings are enabled.
// If at least one of the display settings are enabled, then we want to show the More/Less button.
useEffect(() => {
checkDisplaySettings();
}, [displayDuration,
displayShowTitle,
// displayEpisodeTitle,
// displayArt,
displayExplicitBadge,
displaySeasonNumber,
displayEpisodeNumber,
displayEpisodeType])

// Reset the More/Less button when the user docks or undocks the player.
useEffect(() => {
setShowPodcastMeta(false)
}, [isDocked])

useEffect(() => {
// Remove any existing classes
document.body.classList.remove('has-docked-top', 'has-docked-bottom', 'docked-in-editor');

// Add the appropriate class based on the isDocked value
if (isDocked === 'top') {
document.body.classList.add('has-docked-top', 'docked-in-editor');
} else if (isDocked === 'bottom') {
document.body.classList.add('has-docked-bottom', 'docked-in-editor');
}
}, [isDocked]); // Run this effect when isDocked changes

return (
<Fragment>
{controls}
Expand Down Expand Up @@ -285,7 +333,33 @@ function Edit( props ) {
'simple-podcasting'
)}
checked={displayEpisodeType}
onChange={() => setAttributes({ displayEpisodeType: !displayEpisodeType})}
onChange={() => setAttributes({ displayEpisodeType: !displayEpisodeType })}
/>
</PanelRow>
<PanelRow>
<RadioControl
label={__('Dock Player', 'simple-podcasting')}
selected={isDocked}
options={[
{
label: __('None', 'simple-podcasting'),
value: 'none',
},
{
label: __('Top', 'simple-podcasting'),
value: 'top',
},
{
label: __(
'Bottom',
'simple-podcasting'
),
value: 'bottom',
},
]}
onChange={(isDocked) =>
setAttributes({ isDocked })
}
/>
</PanelRow>
<PanelRow>
Expand Down Expand Up @@ -420,7 +494,7 @@ function Edit( props ) {
</PanelRow>
</PanelBody>
</InspectorControls>
<div className="wp-block-podcasting-podcast-outer">
<div className={`wp-block-podcasting-podcast-outer ${dockedClass}`}>
{src ? (
<>
<div className="wp-block-podcasting-podcast__container">
Expand Down Expand Up @@ -448,76 +522,109 @@ function Edit( props ) {
</h3>
)}

<div className="wp-block-podcasting-podcast__show-details">
{displayShowTitle && (
<span className="wp-block-podcasting-podcast__title">
{showName}
</span>
)}
{displaySeasonNumber && seasonNumber && (
<span className="wp-block-podcasting-podcast__season">
{__(
'Season: ',
'simple-podcasting'
{(isDocked === 'none' || showPodcastMeta) && (
<>
<div className="wp-block-podcasting-podcast__show-details">
{displayShowTitle && (
<span className="wp-block-podcasting-podcast__title">
{showName}
</span>
)}
{seasonNumber}
</span>
)}
{displayEpisodeNumber && episodeNumber && (
<span className="wp-block-podcasting-podcast__episode">
{__('Episode: ', 'simple-podcasting')}
{episodeNumber}
</span>
)}
</div>

<div className="wp-block-podcasting-podcast__show-details">
{displayDuration && duration && (
<span className="wp-block-podcasting-podcast__duration">
{__('Listen Time: ', 'simple-podcasting')}
{duration}
</span>
)}
{displayEpisodeType && (episodeType !== 'none') && (
<span className="wp-block-podcasting-podcast__episode-type">
{__(
'Episode type: ',
'simple-podcasting'
{displaySeasonNumber && seasonNumber && (
<span className="wp-block-podcasting-podcast__season">
{__(
'Season: ',
'simple-podcasting'
)}
{seasonNumber}
</span>
)}
{episodeType}
</span>
)}
{displayExplicitBadge && (
<span className="wp-block-podcasting-podcast__explicit-badge">
{__(
'Explicit: ',
'simple-podcasting'
{displayEpisodeNumber && episodeNumber && (
<span className="wp-block-podcasting-podcast__episode">
{__('Episode: ', 'simple-podcasting')}
{episodeNumber}
</span>
)}
{explicit}
</span>
)}
</div>
</div>

<div className="wp-block-podcasting-podcast__show-details">
{displayDuration && duration && (
<span className="wp-block-podcasting-podcast__duration">
{__('Listen Time: ', 'simple-podcasting')}
{duration}
</span>
)}
{displayEpisodeType && (episodeType !== 'none') && (
<span className="wp-block-podcasting-podcast__episode-type">
{__(
'Episode type: ',
'simple-podcasting'
)}
{episodeType}
</span>
)}
{displayExplicitBadge && (
<span className="wp-block-podcasting-podcast__explicit-badge">
{__(
'Explicit: ',
'simple-podcasting'
)}
{explicit}
</span>
)}
</div>
</>
)}

{isDocked !== 'none' && isDisplayingSettings && (
<button onClick={() => setShowPodcastMeta(!showPodcastMeta)} id="toggle-details-button">
{showPodcastMeta ? 'Less' : 'More'}
</button>
)}

{isDocked !== 'none' && (
<figure key="audio" className={className}>
{((caption && caption.length) || !!isSelected) && (
<RichText
tagName="figcaption"
placeholder={__(
'Write caption…',
'simple-podcasting'
)}
className="wp-block-podcasting-podcast__caption"
value={caption}
onChange={(value) =>
setAttributes({ caption: value })
}
isSelected={isSelected}
/>
)}
<audio controls="controls" src={src} />
</figure>
)}
</div>
</div>

<figure key="audio" className={className}>
{((caption && caption.length) || !!isSelected) && (
<RichText
tagName="figcaption"
placeholder={__(
'Write caption…',
'simple-podcasting'
)}
className="wp-block-podcasting-podcast__caption"
value={caption}
onChange={(value) =>
setAttributes({ caption: value })
}
isSelected={isSelected}
/>
)}
<audio controls="controls" src={src} />
</figure>
{isDocked === 'none' && (
<figure key="audio" className={className}>
{((caption && caption.length) || !!isSelected) && (
<RichText
tagName="figcaption"
placeholder={__(
'Write caption…',
'simple-podcasting'
)}
className="wp-block-podcasting-podcast__caption"
value={caption}
onChange={(value) =>
setAttributes({ caption: value })
}
isSelected={isSelected}
/>
)}
<audio controls="controls" src={src} />
</figure>
)}
</>
) : (
<MediaPlaceholder
Expand Down
Loading

0 comments on commit c43ffd9

Please sign in to comment.