Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Poster Image, Preview Thumbnail, and Time Display props #598

Merged
merged 5 commits into from
May 11, 2023
Merged

feat: Poster Image, Preview Thumbnail, and Time Display props #598

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5285b6c
lint
AdamJaggard May 11, 2023
f116922
poster image props
AdamJaggard May 11, 2023
16cfe74
preview thumb props
AdamJaggard May 11, 2023
196aaec
preview time display props
AdamJaggard May 11, 2023
2f2b3cc
move ts-ignore
AdamJaggard May 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 27 additions & 4 deletions src/js/media-poster-image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import { window, document } from './utils/server-safe-globals.js';
import { getStringAttr, setStringAttr } from './utils/element-utils.js';

export const Attributes = {
PLACEHOLDER_SRC: 'placeholdersrc',
SRC: 'src',
}
};

const template = document.createElement('template');

template.innerHTML = /*html*/`
template.innerHTML = /*html*/ `
<style>
:host {
pointer-events: none;
Expand All @@ -33,10 +34,10 @@ template.innerHTML = /*html*/`

const unsetBackgroundImage = (el) => {
el.style.removeProperty('background-image');
}
};
const setBackgroundImage = (el, image) => {
el.style['background-image'] = `url('${image}')`;
}
};

/**
* @attr {string} placeholdersrc - Placeholder image source URL, often a blurhash data URL.
Expand Down Expand Up @@ -82,6 +83,28 @@ class MediaPosterImage extends window.HTMLElement {
}
}
}

/**
* @type {string | undefined}
*/
get placeholderSrc() {
return getStringAttr(this, Attributes.PLACEHOLDER_SRC);
}

set placeholderSrc(value) {
setStringAttr(this, Attributes.SRC, value);
}

/**
* @type {string | undefined}
*/
get src() {
return getStringAttr(this, Attributes.SRC);
}

set src(value) {
setStringAttr(this, Attributes.SRC, value);
}
}

if (!window.customElements.get('media-poster-image')) {
Expand Down
71 changes: 54 additions & 17 deletions src/js/media-preview-thumbnail.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
import { window, document } from './utils/server-safe-globals.js';
import { MediaUIAttributes, MediaStateReceiverAttributes } from './constants.js';
import { getOrInsertCSSRule } from './utils/element-utils.js';
import {
MediaUIAttributes,
MediaStateReceiverAttributes,
} from './constants.js';
import {
getOrInsertCSSRule,
getStringAttr,
setStringAttr,
} from './utils/element-utils.js';

const template = document.createElement('template');
template.innerHTML = /*html*/`
template.innerHTML = /*html*/ `
<style>
:host {
box-sizing: border-box;
Expand Down Expand Up @@ -55,8 +62,9 @@ class MediaPreviewThumbnail extends window.HTMLElement {
MediaStateReceiverAttributes.MEDIA_CONTROLLER
);
if (mediaControllerId) {
// @ts-ignore
this.#mediaController = this.getRootNode()?.getElementById(mediaControllerId);
this.#mediaController =
// @ts-ignore
this.getRootNode()?.getElementById(mediaControllerId);
AdamJaggard marked this conversation as resolved.
Show resolved Hide resolved
this.#mediaController?.associateElement?.(this);
}
}
Expand Down Expand Up @@ -89,19 +97,45 @@ class MediaPreviewThumbnail extends window.HTMLElement {
}
}

/**
* @type {string | undefined} The url of the preview image
*/
get mediaPreviewImage() {
return getStringAttr(this, MediaUIAttributes.MEDIA_PREVIEW_IMAGE);
}

set mediaPreviewImage(value) {
setStringAttr(this, MediaUIAttributes.MEDIA_PREVIEW_IMAGE, value);
}

/**
* @type {Array<number> | undefined} Fixed length array [x, y, width, height] or undefined
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick(non-blocking): This should probably be [number, number, number, number] | undefined since it's a tuple

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I initially did this and typescript didn't like the return type because I could be technically returning an array of any length. Although I guess I could add a type comment to the return to force it?

*/
get mediaPreviewCoords() {
const attrVal = this.getAttribute(MediaUIAttributes.MEDIA_PREVIEW_COORDS);

if (!attrVal) return undefined;

return attrVal.split(/\s+/).map((coord) => +coord);
}

set mediaPreviewCoords(value) {
if (!value) {
this.removeAttribute(MediaUIAttributes.MEDIA_PREVIEW_COORDS);
return;
}

this.setAttribute(MediaUIAttributes.MEDIA_PREVIEW_COORDS, value.join(' '));
}

update() {
const mediaPreviewCoordsStr = this.getAttribute(
MediaUIAttributes.MEDIA_PREVIEW_COORDS
);
const mediaPreviewImage = this.getAttribute(
MediaUIAttributes.MEDIA_PREVIEW_IMAGE
);
if (!(mediaPreviewCoordsStr && mediaPreviewImage)) return;
const coords = this.mediaPreviewCoords;
const previewImage = this.mediaPreviewImage;

if (!(coords && previewImage)) return;

const [x, y, w, h] = mediaPreviewCoordsStr
.split(/\s+/)
.map((coord) => +coord);
const src = mediaPreviewImage.split('#')[0];
const [x, y, w, h] = coords;
const src = previewImage.split('#')[0];

const computedStyle = getComputedStyle(this);
const { maxWidth, maxHeight, minWidth, minHeight } = computedStyle;
Expand Down Expand Up @@ -145,7 +179,10 @@ class MediaPreviewThumbnail extends window.HTMLElement {
}

if (!window.customElements.get('media-preview-thumbnail')) {
window.customElements.define('media-preview-thumbnail', MediaPreviewThumbnail);
window.customElements.define(
'media-preview-thumbnail',
MediaPreviewThumbnail
);
}

export default MediaPreviewThumbnail;
18 changes: 17 additions & 1 deletion src/js/media-preview-time-display.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import MediaTextDisplay from './media-text-display.js';
import { window } from './utils/server-safe-globals.js';
import { formatTime } from './utils/time.js';
import { MediaUIAttributes } from './constants.js';
import { getNumericAttr, setNumericAttr } from './utils/element-utils.js';
// Todo: Use data locals: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString

/**
Expand All @@ -10,6 +11,7 @@ import { MediaUIAttributes } from './constants.js';
* @cssproperty [--media-preview-time-display-display = inline-flex] - `display` property of display.
*/
class MediaPreviewTimeDisplay extends MediaTextDisplay {
/** @type {HTMLSlotElement} */
#slot;

static get observedAttributes() {
Expand All @@ -28,10 +30,24 @@ class MediaPreviewTimeDisplay extends MediaTextDisplay {
}
super.attributeChangedCallback(attrName, oldValue, newValue);
}

/**
* @type {number | undefined} Timeline preview time
*/
get mediaPreviewTime() {
return getNumericAttr(this, MediaUIAttributes.MEDIA_PREVIEW_TIME);
}

set mediaPreviewTime(value) {
setNumericAttr(this, MediaUIAttributes.MEDIA_PREVIEW_TIME, value);
}
}

if (!window.customElements.get('media-preview-time-display')) {
window.customElements.define('media-preview-time-display', MediaPreviewTimeDisplay);
window.customElements.define(
'media-preview-time-display',
MediaPreviewTimeDisplay
);
}

export default MediaPreviewTimeDisplay;