Merge pull request #272 from 10up/feature/issue-229-191-player-enhanc…

…ements Feature/issue 229 191 player enhancements
10up · Jun 27, 2024 · b4b0810 · b4b0810
2 parents 95a719e + d6836ab
commit b4b0810
Show file tree

Hide file tree

Showing 15 changed files with 2,840 additions and 4,933 deletions.
diff --git a/assets/js/blocks.js b/assets/js/blocks.js
@@ -67,7 +67,6 @@ export default registerBlockType(
 				type: 'string',
 				source: 'meta',
 				meta: 'podcast_explicit',
-				default: 'no',
 			},
 			enclosure: {
 				type: 'string',
@@ -89,17 +88,54 @@ export default registerBlockType(
 				source: 'meta',
 				meta: 'podcast_episode_type',
 			},
+			displayDuration: {
+				type: 'boolean',
+				default: false,
+			},
+			displayShowTitle: {
+				type: 'boolean',
+				default: false,
+			},
+			displayEpisodeTitle: {
+				type: 'boolean',
+				default: false,
+			},
+			displayArt: {
+				type: 'boolean',
+				default: false,
+			},
+			displayExplicitBadge: {
+				type: 'boolean',
+				default: false,
+			},
+			displaySeasonNumber: {
+				type: 'boolean',
+				default: false,
+			},
+			displayEpisodeNumber: {
+				type: 'boolean',
+				default: false,
+			},
+			displayEpisodeType: {
+				type: 'boolean',
+				default: false,
+			}
 		},
 		transforms,
 
 		edit: Edit,
 
 		save: props => {
-			const { id, src, caption } = props.attributes;
+			const {
+				id,
+				src,
+				caption
+			} = props.attributes;
+
 			return (
 				<figure className={ id ? `podcast-${ id }` : null }>
+					{ caption && caption.length > 0 && <figcaption className="wp-block-podcasting-podcast__caption">{ caption }</figcaption> }
 					<audio controls="controls" src={ src } />
-					{ caption && caption.length > 0 && <figcaption>{ caption }</figcaption> }
 				</figure>
 			);
 		},

diff --git a/assets/js/blocks/podcast/index.js b/assets/js/blocks/podcast/index.js
@@ -0,0 +1 @@
+import './index.scss';
diff --git a/assets/js/blocks/podcast/index.scss b/assets/js/blocks/podcast/index.scss
@@ -0,0 +1,84 @@
+.wp-block-podcasting-podcast-outer {
+    border: 1px solid #707070;
+    border-radius: 4px;
+    padding: 20px;
+}
+
+.wp-block-podcasting-podcast__container {
+    margin-bottom: 10px;
+
+    @media (min-width: 768px) {
+        display: flex;
+    }
+}
+
+.wp-block-podcasting-podcast__show-art {
+    margin-bottom: 20px;
+
+    @media (min-width: 768px) {
+        flex-basis: 100px;
+        margin-bottom: 0;
+        margin-right: 20px;
+    }
+}
+
+.wp-block-podcasting-podcast__image {
+    aspect-ratio: 1/1;
+    height: auto;
+    position: relative;
+
+    & img {
+        display: block;
+        height: 100%;
+        object-fit: cover;
+        width: 100%;
+    }
+}
+
+.wp-block-podcasting-podcast__show-title {
+    margin: 0;
+}
+
+.wp-block-podcasting-podcast__show-details {
+    color: #575757;
+    font-size: 0.875rem;
+    text-transform: uppercase;
+
+    & span {
+        display: block;
+        margin-right: 6px;
+
+        @media (min-width: 768px) {
+            display: inline;
+        }
+
+        &::after {
+
+            @media (min-width: 768px) {
+                content: '/';
+                margin-left: 6px;
+            }
+        }
+
+        &:last-child {
+            margin-right: 0;
+
+            &::after {
+                display: none;
+            }
+        }
+    }
+}
+
+.wp-block-podcasting-podcast__caption {
+    margin-bottom: 10px;
+}
+
+.wp-block-podcasting-podcast {
+    margin: 0;
+
+    & audio {
+        display: block;
+        width: 100%;
+    }
+}