Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

media-chrome

Package Overview
Dependencies
Maintainers
3
Versions
640
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

media-chrome - npm Package Compare versions

Comparing version 0.4.1 to 0.4.2

4

dist/media-time-range.js

@@ -1,2 +0,2 @@

import I from"./media-chrome-range.js";import{defineCustomElement as M}from"./utils/defineCustomElement.js";import{Window as s,Document as C}from"./utils/server-safe-globals.js";import{MediaUIEvents as h,MediaUIAttributes as n}from"./constants.js";import{nouns as w}from"./labels/labels.js";import{formatAsTimePhrase as c}from"./utils/time.js";const T="video not loaded, unknown time.",f=d=>{const e=d.range,t=c(+e.value),i=c(+e.max),l=t&&i?`${t} of ${i}`:T;e.setAttribute("aria-valuetext",l)},b=C.createElement("template");b.innerHTML=`
import A from"./media-chrome-range.js";import{defineCustomElement as I}from"./utils/defineCustomElement.js";import{Window as r,Document as C}from"./utils/server-safe-globals.js";import{MediaUIEvents as h,MediaUIAttributes as n}from"./constants.js";import{nouns as w}from"./labels/labels.js";import{formatAsTimePhrase as c}from"./utils/time.js";const T="video not loaded, unknown time.",f=d=>{const e=d.range,t=c(+e.value),i=c(+e.max),l=t&&i?`${t} of ${i}`:T;e.setAttribute("aria-valuetext",l)},b=C.createElement("template");b.innerHTML=`
<style>

@@ -55,2 +55,2 @@ #thumbnailContainer {

</div>
`;class p extends I{static get observedAttributes(){return[...super.observedAttributes,"thumbnails",n.MEDIA_DURATION,n.MEDIA_CURRENT_TIME,n.MEDIA_PREVIEW_IMAGE]}constructor(){super();this.shadowRoot.appendChild(b.content.cloneNode(!0)),this.range.addEventListener("input",()=>{const t=this.range.value,i=new s.CustomEvent(h.MEDIA_SEEK_REQUEST,{composed:!0,bubbles:!0,detail:t});this.dispatchEvent(i)}),this.enableThumbnails()}connectedCallback(){this.range.setAttribute("aria-label",w.SEEK()),super.connectedCallback()}attributeChangedCallback(e,t,i){e===n.MEDIA_CURRENT_TIME&&(this.range.value=+i,f(this),this.updateBar()),e===n.MEDIA_DURATION&&(this.range.max=+i,f(this),this.updateBar()),super.attributeChangedCallback(e,t,i)}getBarColors(){let e=super.getBarColors();if(!this.mediaBuffered||!this.mediaBuffered.length||this.mediaDuration<=0)return e;const t=this.mediaBuffered,i=t[t.length-1][1]/this.mediaDuration*100;return e.splice(1,0,["var(--media-time-buffered-color, #777)",i]),e}enableThumbnails(){this.thumbnailPreview=this.shadowRoot.querySelector("media-thumbnail-preview"),this.shadowRoot.querySelector("#thumbnailContainer").classList.add("enabled");let t;const i=()=>{t=u=>{const r=+this.getAttribute(n.MEDIA_DURATION);if(!r)return;const a=this.range.getBoundingClientRect();let o=(u.clientX-a.left)/a.width;o=Math.max(0,Math.min(1,o));const E=a.left-this.getBoundingClientRect().left+o*a.width;this.thumbnailPreview.style.left=`${E}px`;const v=o*r,A=new s.CustomEvent(h.MEDIA_PREVIEW_REQUEST,{composed:!0,bubbles:!0,detail:v});this.dispatchEvent(A)},s.addEventListener("mousemove",t,!1)},l=()=>{s.removeEventListener("mousemove",t)};let m=!1,g=u=>{const r=this.getAttribute(n.MEDIA_DURATION);if(!m&&r){m=!0,i();let a=o=>{o.target!=this&&!this.contains(o.target)&&(s.removeEventListener("mousemove",a),m=!1,l())};s.addEventListener("mousemove",a,!1)}};this.addEventListener("mousemove",g,!1)}}M("media-time-range",p);export default p;
`;class p extends A{static get observedAttributes(){return[...super.observedAttributes,"thumbnails",n.MEDIA_DURATION,n.MEDIA_CURRENT_TIME,n.MEDIA_PREVIEW_IMAGE]}constructor(){super();this.shadowRoot.appendChild(b.content.cloneNode(!0)),this.range.addEventListener("input",()=>{const t=this.range.value,i=new r.CustomEvent(h.MEDIA_SEEK_REQUEST,{composed:!0,bubbles:!0,detail:t});this.dispatchEvent(i)}),this.enableThumbnails()}connectedCallback(){this.range.setAttribute("aria-label",w.SEEK()),super.connectedCallback()}attributeChangedCallback(e,t,i){e===n.MEDIA_CURRENT_TIME&&(this.range.value=+i,f(this),this.updateBar()),e===n.MEDIA_DURATION&&(this.range.max=Math.floor(+i),f(this),this.updateBar()),super.attributeChangedCallback(e,t,i)}getBarColors(){let e=super.getBarColors();if(!this.mediaBuffered||!this.mediaBuffered.length||this.mediaDuration<=0)return e;const t=this.mediaBuffered,i=t[t.length-1][1]/this.mediaDuration*100;return e.splice(1,0,["var(--media-time-buffered-color, #777)",i]),e}enableThumbnails(){this.thumbnailPreview=this.shadowRoot.querySelector("media-thumbnail-preview"),this.shadowRoot.querySelector("#thumbnailContainer").classList.add("enabled");let t;const i=()=>{t=u=>{const s=+this.getAttribute(n.MEDIA_DURATION);if(!s)return;const a=this.range.getBoundingClientRect();let o=(u.clientX-a.left)/a.width;o=Math.max(0,Math.min(1,o));const E=a.left-this.getBoundingClientRect().left+o*a.width;this.thumbnailPreview.style.left=`${E}px`;const v=o*s,M=new r.CustomEvent(h.MEDIA_PREVIEW_REQUEST,{composed:!0,bubbles:!0,detail:v});this.dispatchEvent(M)},r.addEventListener("mousemove",t,!1)},l=()=>{r.removeEventListener("mousemove",t)};let m=!1,g=u=>{const s=this.getAttribute(n.MEDIA_DURATION);if(!m&&s){m=!0,i();let a=o=>{o.target!=this&&!this.contains(o.target)&&(r.removeEventListener("mousemove",a),m=!1,l())};r.addEventListener("mousemove",a,!1)}};this.addEventListener("mousemove",g,!1)}}I("media-time-range",p);export default p;
{
"name": "media-chrome",
"version": "0.4.1",
"version": "0.4.2",
"description": "Custom elements (web components) for making audio and video player controls that look great in your website or app.",

@@ -5,0 +5,0 @@ "main": "dist/index.js",

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc