@outbook/webcomponents-player-artwork 1.1.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +8 -7
  2. package/_style/player-artwork.style.js +1 -1
  3. package/package.json +1 -1
  4. package/player-artwork.js +23 -6
package/README.md CHANGED
@@ -62,13 +62,14 @@ The component is best used via its wrapper function `PlayerArtwork`.
62
62
 
63
63
  The properties listed below are used by the `PlayerArtwork` wrapper function.
64
64
 
65
- | Attribute | Property | Type | Default | Description |
66
- |---|---|---|---|---|
67
- | `class` | `extraClasses` | `String` | `undefined` | CSS classes to apply to the host element. |
68
- | `src1x` | `src1x` | `String` | `undefined` | The source URL for the 1x resolution image. |
69
- | `src2x` | `src2x` | `String` | `undefined` | The source URL for the 2x resolution image. |
70
- | `sources` | `sources` | `Array` | `[]` | An array of source objects for `<picture>` usage. Each object should have `media`, `src1x`, and optionally `src2x`. |
71
- | - | `icon` | `Object` | `music_note` | The SVG icon object to display as a fallback. Must be passed as a property. |
65
+ | Attribute | Property | Type | Default | Description |
66
+ |-----------------|----------------|-----------|--------------|--------------------------------------------------------------------------------------------------------------------|
67
+ | `class` | `extraClasses` | `String` | `undefined` | CSS classes to apply to the host element. |
68
+ | `natural-ratio` | `naturalRatio` | `Boolean` | `false` | Natural ratio preseves original image ratio. |
69
+ | `src1x` | `src1x` | `String` | `undefined` | The source URL for the 1x resolution image. |
70
+ | `src2x` | `src2x` | `String` | `undefined` | The source URL for the 2x resolution image. |
71
+ | `sources` | `sources` | `Array` | `[]` | An array of source objects for `<picture>` usage. Each object should have `media`, `src1x`, and optionally `src2x`. |
72
+ | - | `icon` | `Object` | `music_note` | The SVG icon object to display as a fallback. Must be passed as a property. |
72
73
 
73
74
  ### Sources Object Structure
74
75
 
package/_style/player-artwork.style.js CHANGED
@@ -1,4 +1,4 @@
1
1
  /* eslint-disable */
2
2
  import { css } from 'lit';
3
3
 
4
- export default css`:host{display:block;aspect-ratio:1/1;--_background-color: var( --outbook-player-artwork--background-color, light-dark( oklch(92.2% 0 0deg), oklch(37.1% 0 0deg) ) );--_text-color: var( --outbook-player-artwork--text-color, light-dark( oklch(20.5% 0 0deg), oklch(98.5% 0 0deg) ) );--crystal--background: var( --outbook-player-artwork--crystal-background, light-dark( oklch(97% 0 0deg), oklch(20.5% 0 0deg) ) );--crystal--border: var( --outbook-player-artwork--crystal-border, light-dark( oklch(92.2% 0 0deg), oklch(43.9% 0 0deg) ) )}.player-artwork{border-radius:0.375rem;display:flex;justify-content:center;align-items:center;overflow:hidden;width:100%;height:100%;background-color:var(--_background-color);color:var(--_text-color)}.player-artwork--image img{width:100%;height:100%;object-fit:cover}.player-artwork--fallback{background-color:oklch(from var(--crystal--background) l c h/0.57);border-radius:0.75rem;backdrop-filter:blur(2px) saturate(180%);-webkit-backdrop-filter:blur(2px);overflow:hidden;border:1px solid hsla(0,0%,100%,.125);box-shadow:inset 0 0 4px oklch(from var(--crystal--border) l c h/0.4)}.player-artwork__icon{width:50%;height:50%;color:var(--_text-color)}`;
4
+ export default css`:host{display:block;aspect-ratio:1/1;--_background-color: var( --outbook-player-artwork--background-color, light-dark( oklch(92.2% 0 0deg), oklch(37.1% 0 0deg) ) );--_text-color: var( --outbook-player-artwork--text-color, light-dark( oklch(20.5% 0 0deg), oklch(98.5% 0 0deg) ) );--crystal--background: var( --outbook-player-artwork--crystal-background, light-dark( oklch(97% 0 0deg), oklch(20.5% 0 0deg) ) );--crystal--border: var( --outbook-player-artwork--crystal-border, light-dark( oklch(92.2% 0 0deg), oklch(43.9% 0 0deg) ) )}:host([natural-ratio]){aspect-ratio:unset}.player-artwork{border-radius:0.375rem;display:flex;justify-content:center;align-items:center;overflow:hidden;width:100%;height:100%;background-color:var(--_background-color);color:var(--_text-color)}.player-artwork--image img{width:100%;height:100%;object-fit:cover}.player-artwork--image.player-artwork--natural-ratio img{height:auto;object-fit:unset}.player-artwork--fallback{background-color:oklch(from var(--crystal--background) l c h/0.57);border-radius:0.75rem;backdrop-filter:blur(2px) saturate(180%);-webkit-backdrop-filter:blur(2px);overflow:hidden;border:1px solid hsla(0,0%,100%,.125);box-shadow:inset 0 0 4px oklch(from var(--crystal--border) l c h/0.4)}.player-artwork__icon{width:50%;height:50%;color:var(--_text-color)}`;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@outbook/webcomponents-player-artwork",
3
- "version": "1.1.0",
3
+ "version": "1.1.1",
4
4
  "main": "player-artwork.js",
5
5
  "type": "module",
6
6
  "private": false,
package/player-artwork.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { LitElement, html } from 'lit';
2
+ import { classMap } from 'lit/directives/class-map.js';
2
3
  import { ifDefined } from 'lit/directives/if-defined.js';
3
4
  import { TypeIcon } from '@outbook/webcomponents-type-icon/shadow';
4
5
  import { music_note } from '@outbook/icons';
@@ -30,6 +31,7 @@ class ComponentPlayerArtwork extends LitElement {
30
31
  toAttribute: value => (value?.length ? JSON.stringify(value) : null)
31
32
  }
32
33
  },
34
+ naturalRatio: { type: Boolean, attribute: 'natural-ratio' },
33
35
  icon: { type: Object }
34
36
  };
35
37
 
@@ -37,6 +39,7 @@ class ComponentPlayerArtwork extends LitElement {
37
39
  super();
38
40
  this.icon = music_note;
39
41
  this.sources = [];
42
+ this.naturalRatio = false;
40
43
  }
41
44
 
42
45
  static styles = styleComponent;
@@ -48,11 +51,15 @@ class ComponentPlayerArtwork extends LitElement {
48
51
  }
49
52
 
50
53
  render() {
51
- const [fallback] = this.resolvedSources;
54
+ const [artworkResolved] = this.resolvedSources;
52
55
 
53
- if (fallback) {
56
+ if (artworkResolved) {
57
+ const artworkClasses = classMap({
58
+ 'player-artwork player-artwork--image': true,
59
+ 'player-artwork--natural-ratio': this.naturalRatio
60
+ });
54
61
  return html`
55
- <picture class="player-artwork player-artwork--image">
62
+ <picture class="${artworkClasses}">
56
63
  ${this.resolvedSources.length > 1
57
64
  ? this.resolvedSources.map(
58
65
  ({ media, src1x, src2x }) => html`
@@ -64,8 +71,10 @@ class ComponentPlayerArtwork extends LitElement {
64
71
  )
65
72
  : ''}
66
73
  <img
67
- srcset="${buildSrcSet(fallback.src1x, fallback.src2x)}"
68
- src="${fallback.src1x}"
74
+ srcset="
75
+ ${buildSrcSet(artworkResolved.src1x, artworkResolved.src2x)}
76
+ "
77
+ src="${artworkResolved.src1x}"
69
78
  alt=""
70
79
  aria-hidden="true"
71
80
  loading="lazy"
@@ -82,7 +91,14 @@ if (!customElements.get('outbook-player-artwork')) {
82
91
  customElements.define('outbook-player-artwork', ComponentPlayerArtwork);
83
92
  }
84
93
 
85
- export function PlayerArtwork({ extraClasses, src1x, src2x, sources, icon }) {
94
+ export function PlayerArtwork({
95
+ extraClasses,
96
+ src1x,
97
+ src2x,
98
+ sources,
99
+ naturalRatio,
100
+ icon
101
+ }) {
86
102
  return html`
87
103
  <outbook-player-artwork
88
104
  class="${ifDefined(extraClasses)}"
@@ -90,6 +106,7 @@ export function PlayerArtwork({ extraClasses, src1x, src2x, sources, icon }) {
90
106
  src2x="${ifDefined(src2x)}"
91
107
  .sources="${sources ?? []}"
92
108
  .icon="${icon}"
109
+ ?natural-ratio="${naturalRatio}"
93
110
  ></outbook-player-artwork>
94
111
  `;
95
112
  }