Merge pull request #146 from MrChuckomo:episode-progress

Episode-progress Relates to #145
MrChuckomo · Jan 1, 2024 · 128f2b4 · 128f2b4
2 parents 5e4fdb9 + 3386523
commit 128f2b4
Show file tree

Hide file tree

Showing 14 changed files with 293 additions and 55 deletions.
diff --git a/README.md b/README.md
@@ -39,6 +39,7 @@ For some help and support check out the [documentation](https://www.poddycast.ap
 - Browse through the **History** of podcasts you've already listened to
 - See some **Statistics**
 - Manage **Playlists** for custom playback
+- Progress indicator for each episode
 - OPML Import & Export
 - Dark mode
 - Speedy playback
@@ -48,7 +49,7 @@ For some help and support check out the [documentation](https://www.poddycast.ap
 
 ### All New Episodes
 
-![New Episodes Screenshot](img/new_episodes2.png)
+![New Episodes Screenshot](img/new_episodes3.png)
 
 ### Browse Podcast Feeds
 
@@ -71,3 +72,10 @@ I'd be happy to hear from you guys 💕
 - [Patreon: @poddycastapp](https://patreon.com/poddycastapp)
 - [Instagram: @poddycastapp](https://instagram.com/poddycastapp)
 - [Buy me a coffee: @poddycastapp](https://www.buymeacoffee.com/poddycastapp)
+
+
+# Sponsorship
+
+Want advertising space? Get in touch with us!
+
+Get your Podcast promoted directly on the screenshot here and/or on the website: [poddycast.app](https://www.poddycast.app/).
diff --git a/app/css/dark_layout.css b/app/css/dark_layout.css
@@ -17,6 +17,12 @@ body {
     color: #DDD;
 }
 
+:root {
+    --episode-item-bg-color: #11111150;
+    --progress-bg-color: #20202090;
+    --progress-color: #11111180;
+}
+
 #search,
 #content-right-header,
 #content-right-body,
@@ -109,10 +115,10 @@ input {
     fill: #FFF;
 }
 
-.podcast-entry:hover,
 .podcast-edit-entry:hover,
-.list-item-row-layout:hover {
-    background: #222;
+.list-item-row-layout:hover,
+li[aria-label="main-container"]:hover {
+    background: #222!important;
 }
 
 .select-episode:hover {
@@ -187,6 +193,6 @@ input[id=volume]::-webkit-slider-runnable-track {
     color: #FFF;
 }
 
-.slider {
+.slider, .list-item-progress-container {
     --theme-slider: #222;
 }
diff --git a/app/css/list_item.css b/app/css/list_item.css
@@ -13,12 +13,14 @@
     margin: .5rem;
 }
 
-.list-item-row-layout:hover {
-    background-color: #F2F2F2;
+.list-item-row-layout:hover, 
+li[aria-label="main-container"]:hover {
+    background-color: #ececec!important;
 }
 
-.select-episode:hover {
-    background-color: #2979FF!important;
+.select-episode:hover,
+li[aria-label="main-container"].select-episode:hover {
+    background-color: var(--primary-color)!important;
 }
 
 .list-item-row-layout img {
@@ -37,6 +39,12 @@
     opacity: 0.7;
 }
 
+.list-item-icon:hover .bi-trash3,
+div[aria-label="podcast-actions"] .bi-trash3:hover {
+    color: #dc3545!important;
+    cursor: pointer;
+}
+
 .list-item-flag {
     border-radius: 4px;
     text-align: center;
@@ -66,4 +74,18 @@
 
 .list-item-sub-text {
     opacity: 0.4;
-}
+}
+
+.list-item-progress-container {
+    width: 100%;
+    height: 15%;
+    align-self: center;
+    background-color: var(--theme-slider);
+    border-radius: 3px;
+}
+
+.list-item-progress-container .list-item-progress {
+    height: 100%;
+    background-color: var(--primary-color);
+    border-radius: 3px;
+}
diff --git a/app/css/main.css b/app/css/main.css
@@ -15,6 +15,16 @@
     background-color: #bebebe;
 }
 
+:root {
+    --primary-color: #2979FF;
+    --episode-item-bg-color: #dedcdc50;
+    --progress-bg-color: #dedcdc50;
+    --progress-color: #b7b7b780;
+}
+
+.fs-7 {
+    font-size: 0.75rem !important;
+}
 
 body {
     margin: 0;

diff --git a/app/css/player.css b/app/css/player.css
@@ -167,12 +167,15 @@ button#content-right-player-speed-indicator {
     bottom: 3px;
 }
 
+.slider, .list-item-progress-container {
+    --theme-slider: #d3d3d3;
+}
+
 .slider {
     -webkit-appearance: none;
     width: 100%;
     height: 8px;
     border-radius: 5px;
-    --theme-slider: #d3d3d3;
     background: linear-gradient(to right, #448AFF 0%, #448AFF 0%, var(--theme-slider) 0%, var(--theme-slider) 100%);
     outline: none;
     opacity: 0.7;

diff --git a/app/js/animation.js b/app/js/animation.js
@@ -6,7 +6,7 @@ const anime = require('animejs');
 
 function playListAnimation() {
     anime({
-        targets: '.list-item-row-layout img',
+        targets: ['.list-item-row-layout img', '[aria-label="main-layout"] img'],
         translateX: [-15, 0],
         opacity: [0, 1],
         duration: 600,

diff --git a/app/js/helper/helper_entries.js b/app/js/helper/helper_entries.js
@@ -143,11 +143,27 @@ function getStatisticsElement(_Class, _Title, _Value) {
 }
 module.exports.getStatisticsElement = getStatisticsElement;
 
-function deleteEntryWithIcon(_Self) {
-    animation.playListDeleteAnimation(_Self.parentElement.parentElement);
+/**
+ * Delete an episode list item.
+ * @param {DOMElement} _Self The reference object, usually the deleteicon itself
+ * @param {number} _ParentLevel Control different hierarchy level (for differnt UI-layouts)
+ */
+function deleteEntryWithIcon(_Self, _ParentLevel) {
+    let ListItem = _Self.parentElement.parentElement;
+
+    switch (_ParentLevel) {
+        case 3:
+            ListItem = _Self.parentElement.parentElement.parentElement;
+            break;
+        default:
+            ListItem = _Self.parentElement.parentElement;
+            break;
+    }
+
+    animation.playListDeleteAnimation(ListItem);
 
     setTimeout(function () {
-        deleteEntry(_Self.parentElement.parentElement);
+        deleteEntry(ListItem);
     }, 500);
 }
 module.exports.deleteEntryWithIcon = deleteEntryWithIcon;

diff --git a/app/js/list_item.js b/app/js/list_item.js
@@ -2,6 +2,7 @@
 
 const global = require('./helper/helper_global');
 const animation = require('./animation.js');
+const json2html = require('node-json2html');
 
 const eLayout = {
     row: 'list-item-row-layout',
@@ -122,3 +123,164 @@ function getIconButtonPart(_Icon) {
     return IconButtonElement;
 }
 module.exports.getIconButtonPart = getIconButtonPart;
+
+
+/**
+ *
+ * @param {string} _Progress - value as string in percentage (0-100)
+ * @returns {DOMElement}
+ */
+function getProgressPart(_Progress) {
+    let ProgressElement = document.createElement('div');
+    let Progress = document.createElement('div');
+
+    ProgressElement.classList.add('list-item-progress-container');
+    Progress.classList.add('list-item-progress');
+    Progress.style.width = _Progress ? _Progress + '%' : '0%';
+
+    ProgressElement.appendChild(Progress);
+
+    return ProgressElement;
+}
+module.exports.getProgressPart = getProgressPart;
+
+// * ---------------------------------------------------------------------------------------------------------------------
+// * NEW Render Section using Json2Html
+
+/**
+ * @param {object} _JsonData - Array of objects, keys used in template
+ * @returns {DOMElement}
+ */
+function renderNewEpisodeItem(_JsonData) {
+    let html = json2html.render(_JsonData,
+        {
+            '<>': 'li',
+            'class': 'card border-0 m-3 ${selected}',
+            'aria-label': 'main-container',
+            'style': 'background-color: var(--episode-item-bg-color)',
+            'channel': '${channel}',
+            'title': '${name}',
+            'type': '${type}',
+            'url': '${url}',
+            'length': '${length}',
+            'artworkUrl': '${artwork}',
+            'episodeImagekUrl': '${episodeImagekUrl}',
+            'html': [
+                {
+                    '<>': 'div', //* NOTE: Row #1
+                    'class': 'd-flex flex-row p-3 pb-2',
+                    'aria-label': 'main-layout',
+                    'html': [
+                        {
+                            '<>': 'img',
+                            'class': 'rounded shadow-sm',
+                            'style': 'width: 55px; height: 55px',
+                            'src': '${artwork}'
+                        },
+                        {
+                            '<>': 'div',
+                            'class': 'flex-fill px-3',
+                            'aria-label': 'podcast-info',
+                            'html': [
+                                {
+                                    '<>': 'div',
+                                    'class': 'text-truncate fw-bold fs-6',
+                                    'style': 'max-width: 450px',
+                                    'text': '${name}'
+                                },
+                                {
+                                    '<>': 'div',
+                                    'class': 'fs-7',
+                                    'text': 'by ${channel}'
+                                },
+                                {
+                                    '<>': 'div',
+                                    'class': 'fs-7 opacity-75',
+                                    'html': [
+                                        { '<>': 'i', 'class': 'bi bi-stopwatch pe-1' },
+                                        { '<>': 'span', 'text': '${duration}' }
+                                    ]
+                                }
+                            ]
+                        },
+                        // TODO: display shownotes
+                        // {
+                        //     '<>': 'a',
+                        //     'class': 'btn btn-primary',
+                        //     'data-bs-toggle': 'collapse',
+                        //     'href': '#collapseExample',
+                        //     'role': 'button',
+                        //     'aria-expanded': 'false',
+                        //     'aria-controls': 'collapseExample',
+                        //     'text': 'Desc'
+                        // },
+                        // {
+                        //     '<>': 'div',
+                        //     'id': 'collapseExample',
+                        //     'class': 'collapse',
+                        //     'html': '${description}'
+                        // },
+                        {
+                            '<>': 'div',
+                            'class': 'opacity-75 align-self-center px-3',
+                            'aria-label': 'podcast-actions',
+                            'html': [
+                                // {
+                                //     '<>': 'i',
+                                //     'class': 'bi bi-info-circle fs-5 d-block'
+                                // },
+                                {
+                                    '<>': 'i',
+                                    'class': 'bi bi-trash3 fs-5 d-block',
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    '<>': 'div', //* NOTE: Row #2
+                    'class': 'd-flex flex-row',
+                    'aria-label': 'podcast-progress',
+                    'html': [
+                        {
+                            '<>': 'div',
+                            'class': 'progress rounded-0',
+                            'style': 'height: 8px; width: 100%; background-color: var(--progress-bg-color)!important; border-radius: 0 0 0.375rem 0.375rem!important;',
+                            'role': 'progressbar',
+                            'aria-valuemin': '0',
+                            'aria-valuemax': '100',
+                            'html': [
+                                {
+                                    '<>': 'div',
+                                    'class': 'progress-bar',
+                                    'style': 'width: ${progress}%; background-color: var(--progress-color)'
+
+                                    // ProgressElement.classList.add('list-item-progress-container');
+                                    // Progress.classList.add('list-item-progress');
+                                    // Progress.style.width = _Progress ? _Progress + '%' : '0%';
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    );
+
+    const template = document.createElement('template');
+    template.innerHTML = html.trim();
+
+    let child = template.content.firstElementChild;
+
+    // Action for list item: play expisode
+    child.setAttribute('onclick', 'window.audioAPI.clickEpisode(this)');
+
+    // Action to delete list item
+    child.querySelector('.bi-trash3').setAttribute(
+        'onclick',
+        'event.stopPropagation(); window.episodeAPI.delete(this, 3)'
+    );
+
+    return child;
+}
+module.exports.renderNewEpisodeItem = renderNewEpisodeItem;