Merge pull request #567 from totaldebug/v7.0.0-b1

fix: progress bar not functioning with media player

Author: marksie1988

.devcontainer/recommended-Dockerfile

@@ -8,7 +8,7 @@ RUN apt install python3 zsh -y
 
 RUN wget https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh -O - | zsh || true
 
-RUN npm install --include=dev
+RUN yarn install
 
 RUN pip3 install -r ../docs/requirements.txt
 RUN pip3 install sphinx

dist/atomic-calendar-revive.js

@@ -62,15 +62,15 @@ From the cloned repository, run the command to install the requirements:
 
 .. code-block:: bash
 
-      npm install
+      yarn install
 
 ********************
 Make changes & Build
 ********************
 
 #. Any changes to the card should be made in the folder ``src``
 #. Update the version number in ``package.json``
-#. Run the command ``npm run build`` to create the latest distribution file
+#. Run the command ``yarn run build`` to create the latest distribution file
 
 *******
 Testing

docs/contribute/devcycle.rst

@@ -1,6 +1,6 @@
 {
 	"name": "atomic-calendar-revive",
-	"version": "7.0.0-b",
+	"version": "7.0.0-b1",
 	"editor_version": "2.0.0",
 	"description": "Calendar Card for Home Assistant",
 	"main": "atomic-calendar-revive.js",
@@ -59,7 +59,6 @@
 		"dayjs": "^1.10.7",
 		"lit": "^2.2.0",
 		"lit-element": "^3.2.0",
-		"node-google-calendar": "^1.1.1",
 		"npm": "^8.5.1",
 		"typescript": "^4.5.5"
 	},

package.json

@@ -76,7 +76,7 @@ export default {
 	showProgressBar: true,
 	showFullDayProgress: false,
 	progressBarColor: 'var(--primary-color)',
-	progressBarBufferColor: 'var(--secondary-color)',
+	progressBarBackgroundColor: '#555',
 
 	enableModeChange: false,
 	defaultMode: 'Event',
@@ -107,4 +107,5 @@ export default {
 	showMultiDay: false,
 	showMultiDayEventParts: false,
 	showWeekNumber: false,
+	showDescription: false,
 };

src/defaults.ts

@@ -1,6 +1,5 @@
-import "@material/mwc-linear-progress/mwc-linear-progress";
-import { LitElement, html, TemplateResult, CSSResultGroup } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { LitElement, html, TemplateResult, CSSResultGroup } from 'lit';
+import { property } from 'lit/decorators.js';
 import { HomeAssistant, LovelaceCardEditor } from 'custom-card-helpers';
 import { formatTime } from './helpers/format-time'
 import { groupEventsByDay, getEventMode, getCalendarMode } from './lib/event.func';
@@ -363,10 +362,11 @@ class AtomicCalendarRevive extends LitElement {
           const eventDuration = event.endDateTime.diff(event.startDateTime, 'minutes');
           const eventProgress = dayjs().diff(event.startDateTime, 'minutes');
           const eventPercentProgress = (eventProgress * 100) / eventDuration / 100;
-          progressBar = html`<mwc-linear-progress
+          /**progressBar = html`<mwc-linear-progress
             class="progress-bar"
-            style="--mdc-theme-primary: ${this._config.progressBarColor}; --mdc-linear-progress-buffer-color: ${this._config.progressBarBufferColor};"
-						progress="${eventPercentProgress}"></mwc-linear-progress>`;
+
+            progress="${eventPercentProgress}"></mwc-linear-progress>`;*/
+          progressBar = html`<progress style="--progress-bar: ${this._config.progressBarColor}; --progress-bar-bg: ${this._config.progressBarBackgroundColor};" value="${eventPercentProgress}" max="1"></progress>`;
         }
 
         const finishedEventsStyle =

src/index.ts

@@ -181,14 +181,19 @@ export const styles: CSSResultGroup = css`
 			margin-bottom: 0px;
 		}
 
-		.progress-bar {
-			--mdc-theme-primary: var(--mdc-theme-primary);
-			--mdc-linear-progress-buffer-color: var(--mdc-linear-progress-buffer-color);
-		}
-
-		mwc-linear-progress {
+		progress {
+			border-radius: 2px;
 			width: 100%;
-			margin: auto;
+			height: 3px;
+			box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
+		}
+		progress::-webkit-progress-bar {
+			background-color: var(--progress-bar-bg);
+			border-radius: 2px;
+		}
+		progress::-webkit-progress-value{
+			background-color: var(--progress-bar);
+			border-radius: 2px;
 		}
 
 		ha-button-toggle-group {

src/style.ts

@@ -42,6 +42,8 @@ export interface atomicCardConfig extends LovelaceCardConfig {
 	showHiddenText?: boolean;
 	hiddenEventText?: string;
 	refreshInterval: number;
+	showDescription: boolean;
+	showEventIcon: boolean;
 
 	// color and font settings
 	nameColor?: string;