From 5d7dd12dc34da63e9df4271cb65edd1505abff10 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Sun, 15 Oct 2023 12:54:44 +0200
Subject: [PATCH] Feat: width option (#3259)

* Feat: width option

* Snapshots
---
 cypress/e2e/options.cy.js                     |  38 ++++++++++++++++++
 .../options.cy.js/width-100.snap.png          | Bin 0 -> 5258 bytes
 .../options.cy.js/width-10rem.snap.png        | Bin 0 -> 4041 bytes
 .../options.cy.js/width-200px.snap.png        | Bin 0 -> 4041 bytes
 .../options.cy.js/width-300.snap.png          | Bin 0 -> 5258 bytes
 examples/all-options.js                       |   8 ++++
 src/renderer.ts                               |   7 ++++
 src/wavesurfer.ts                             |   4 +-
 8 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 cypress/snapshots/options.cy.js/width-100.snap.png
 create mode 100644 cypress/snapshots/options.cy.js/width-10rem.snap.png
 create mode 100644 cypress/snapshots/options.cy.js/width-200px.snap.png
 create mode 100644 cypress/snapshots/options.cy.js/width-300.snap.png

diff --git a/cypress/e2e/options.cy.js b/cypress/e2e/options.cy.js
index 02f01a2bd..27546098a 100644
--- a/cypress/e2e/options.cy.js
+++ b/cypress/e2e/options.cy.js
@@ -546,4 +546,42 @@ describe('WaveSurfer options tests', () => {
       })
     })
   })
+
+  it('should accept a numeric width option', () => {
+    cy.window().then((win) => {
+      return new Promise((resolve, reject) => {
+        win.wavesurfer = win.WaveSurfer.create({
+          container: id,
+          url: '../../examples/audio/demo.wav',
+          width: 100,
+        })
+
+        win.wavesurfer.once('ready', () => {
+          cy.get(id).matchImageSnapshot('width-100')
+          win.wavesurfer.setOptions({ width: 300 })
+          cy.get(id).matchImageSnapshot('width-300')
+          resolve()
+        })
+      })
+    })
+  })
+
+  it('should accept a CSS value for the width option', () => {
+    cy.window().then((win) => {
+      return new Promise((resolve, reject) => {
+        win.wavesurfer = win.WaveSurfer.create({
+          container: id,
+          url: '../../examples/audio/demo.wav',
+          width: '10rem',
+        })
+
+        win.wavesurfer.once('ready', () => {
+          cy.get(id).matchImageSnapshot('width-10rem')
+          win.wavesurfer.setOptions({ width: '200px' })
+          cy.get(id).matchImageSnapshot('width-200px')
+          resolve()
+        })
+      })
+    })
+  })
 })
diff --git a/cypress/snapshots/options.cy.js/width-100.snap.png b/cypress/snapshots/options.cy.js/width-100.snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..a75b37f03350df255f924dbe4dfa8efebbf7c9e5
GIT binary patch
literal 5258
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
AEC2ui

literal 0
HcmV?d00001

diff --git a/cypress/snapshots/options.cy.js/width-10rem.snap.png b/cypress/snapshots/options.cy.js/width-10rem.snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..db5f9b907cc37f437ce14e1592624bc1e118fd95
GIT binary patch
literal 4041
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
Rctp1g3)vW46BPT^zX6Glc(VWi

literal 0
HcmV?d00001

diff --git a/cypress/snapshots/options.cy.js/width-200px.snap.png b/cypress/snapshots/options.cy.js/width-200px.snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..db5f9b907cc37f437ce14e1592624bc1e118fd95
GIT binary patch
literal 4041
zcmcgvdr(tX8b@@H@^B+6-fB=FQkz9qVtgbmXhjf-;v*_TPz0i&MC6f$27{m#gA7?{
zXi(8RI8_2#30Ttv5fC*P5HM)fq#6kgf!>|67(i{Lg6?;MZugI!+5ei!<R-c2eCPXq
zkMEpYuz6#stJ54OJ3Bkquyw&~J3ISG_<qFE0Y3H8*>!eyfB8Brc=a~Hq`_NW>Aqp-
zMGq|78LSF7*}6~MSd<Gv>ZD2Z)SI35KYW@T>n&2v-t2sul++uXR1$`-VYh@B2kd8k
zOI)!ipZ(aB`DPW7`}VE1`JJWt-FQkcy!w{Rv0cvp=@;$N@EP9l8o4f_2d-R+zIxa4
zNYkfJmlP&3)Jwxpz^kop8EzULhCioIA5}S^OZ`O=y&p&4B>H8xF(Lo^f?tw;h3+@j
zm^N(Mw5jdgitrhFSX4F>)y>~`?Yz`&_bs!TLiN!u3!jlP{Q7m<!-puR5$4jJQLF-j
z%^KUMjHuk-JBLNZFYDT2YzmB=7=fDv0qI3Jy-Ozj$zsL7Q>G^~6X(sJUoYbLG8461
zcrxkj=u$QmB<cFr<f4oyYNh0EV-;|G6;ii+^-<n>s)YXwL~aa~m)0@n6{B*A2dR}D
z-;`2z{FzTS_Tyz9)26!9*4FqD8>q*5pUS>w_mUqj-NG{YCCQ~9LbpSR1)8=+XiOS;
z^dv@U=q{4F)rL`NMU<{m_C+O|Wtsz3?3B%fp^yJlW8)fFxQ+Q@C#xWedYt21h*6Xg
zG4vveVmzmd_uHF5+S(*Jen=pQjo|IAGi>4Qg`#xre8_;;FJ!Yi)3uEu^3pp?!yj?7
z3iqFRU#iEn{K*Qo6C{yF&ML;~R3CR{VoV7;Ucx@FW7!sxx>0=+0E4Z~<G;<VO4lx8
zQOVP$mJ7497Z9DyBzg8GZJE@q5U1NxD)*IbW~~O&R_2SoJV9F`gpAy|6}t9IY$pZB
z7tLq0a29pg9YW^kPlfdhp#pEsI<X{;TtH*<`T_S4>T!(H<xw2UW>rYnQ6=nna%g!6
zQ^6ol>x>uwEA#Wp{qgSHJ#_{N+gsMMG`vE3S_b33Hw<E}5}-LSFpze(@*~jQ=<9=m
ze72LBQNmA1W00>kG;oJszHF)1wZpsl?W@JW+$H5zK(+*@SH+7rJPbCdo^^L`;rYl~
z&P#7IieSNjQ~U$~1pRVR-vnT^W#-{FZ&`4U72^uR#FEEJcVHk0il*_mQL;%si|YcI
zw3;O$tOAn#;;iiK79o;N_JI|RTg8&Cw6)KlKabq-umynWddy*NN3_x2w61!4lqNbQ
zWk){Z+-35MIKIjVF-^)oeFrPcvZQIZu)fu?<fU7giDDWc31o=PZQexZuwW0M1l-$b
z_a-)oCHE567*u#W)7%t__)v+QsUXUDP~<l1aef~jRUsAJGo^aUTIzuXst;f~ox6t|
z3O~StjSFPKtb*=?p{#-wG_SXw<13pP!{+TJheDy3lqGCfwpx0dFPo`J>w}OJqB>_5
zIX|^n1s3LZR@_PO0M#eRF?*9(vi}TYhYhLq@nR`k5N5;hKy%MG{9l%#z^u44pWN_4
zm4HFcOM{Re%En*S=JuyDNZbW^N37*f)auD+?>Sfkk*m$!sjI0zY?i=6mHD5oM7BUh
z_2F6J)Z^AqWkYA!PPLbmkT7Hsog{DE1M#b*LGn^iE63N&xC*V{5vOd>Dr~fN=DZnP
zA*Kl|s8!9ki0D%G>+<oOVrzL-)k1f$2mdkW$zW#ocG=7u3uP@JI!2Mef})22wmC&}
zwL_pPD-tU$e8xzQGD16x3v~cK@CFwfg{YCWUNbp?S7kH%2uK>d@iX-H#qaO!yY`jT
zZG<2G5Mq!0W=N@!f|#Sk5{@sFn;y8L?OcRd5+ash6h-q`|6&lS7u?W4@Z7yoj9P4c
z`P{w^s%$gw4yF#3vU}gYEst_M8i#?^M>ovrTmPBOJV5$ojACXiS&!`U(_kie=MMI9
zt7KJtbC2Q#?JDvRLZPeIVYDP(Tpi)7NdxIx%PqDhRS3$5k^F#pFbA@;eB|ZtGFgE_
zj-0_Lw6#HwF6txD9z!#aWrrbc>^TW0&9jzclwEpL6QDOf9;hJMBWr*U5QR7e*`MEn
zmAOt#%{bO(0i0k+8hO}gZc4PJHnOD!E1<ar#bORf&}Zfb=bS?RUnFZeSZBUaNOR-%
z`FKqc#eD%#CtfqTFcX7U9{cZ{iXVB7EQH2EMvlm-aFDF3M~NdjU08Y|dlGG}CJpfv
zx{oyK9WNG}QJ+_KdyX83+_De=E|X#KsZ6ycv%$lA_XHalrPc-l+#!-CHpT0vFAaky
z>j2&p*_mEb8bKMDXcC~hzF~Er^8{ohdzhfV?>Q2ZN1C|F<B>+~Kj2pkcNWfmUu=#P
za{ZoUulDzZTq)hD4g?uhcm2a(^k<$UpA+P|x;jXjU(`H4m@+ofvA7Q(z4#$uC?8P$
z{YI;>t9szGgu^}j+}y53d0)s&ar&z04??+k@ax5QIUU{I9%e=_t`@?Go418snGJg-
z9~6bQ%mgj-U`h%opw8(J`U5{;Pia_vqk?4bH6>w}e%Re86vaW4@pq|^UTbbn)L8?K
z!UU?1DDG#n*OVZ~&YaQy+38x`76=eIcguCeCwckY1g|OD=|P@(H#^bt{o5RmlI(M#
z<38)@p*y2R(b&7LBmI#)nr3KAmgUL8I@Dhy;IBLq+TRB1SHJxs$gx5S8#aRYC`QpT
z5xs}z)ZAp|kL^r0EO9{%g&?c_{hhsH#c1QIsWLeMN}R&6039a*0DXBF_3bf+Yht84
zBD<JB%@UYw@V4kPJa*~RiVy+*3f&TguGiLQb8rzok~dm@!%`-X@O1|jsFInX`iuj0
z(JF)A?gxjOG{UYr2Jz49MP>Y=ILy)OeujqzLunEFu6Yt<00-8E)D*gOSjw3o*M6`2
zF~ftns_VtgJ~~d!!we5C6BxK58~E&cjk#WxJUWl(XB6W6Mb~S%n1lP_9>tRbr(YfJ
zidQ^|l}~gik@K%_%86=aXQLI-8l6WPGV*Ik_J@03l#uMT%$VM$DvJ<gVaCnN242mv
z1a?L7_8U&7q-jm~1&h#q;MEzDJ(M$;S!gXc7@~t51(v91M&s3(TGTGiT`&bzE8(w5
z9&@j}pR8p9@iCAGTIOEDF>ARhIm*Vuy##fVve(B5Z5Kdkv}PA7-C?zlxmR=}B{c)U
z)2l=Oph1_1B6XZ{z}97QRkiYm<U&LP8MaTyqf$5M4ba`TCL7Y*IURgpB4A$B-*>gH
zdN;ZW$m@WXd-<^w*M<1?`ZTT!o#)3)L_WBAo6`X&Lk$MU9Gs7j7{B2sB*^=pKZo;A
z8I$nWTuFt~;2jK3TT%K9jN8Vfzc9`S`q^hfIA)$;D$h^tf91)6$OFsgZUlxCG#I>r
z+Nwq?gNPJZvI_V`TfL?%KkEwm*I+<OwbDiX1u~dGE9|;0ELNV3!x($Tw}hK|tS=A4
zM;^&vGX&@&|HP_dYT*<CE%k<F*vOUdH6dPXSWW<4Y!Q9w=;hzg)YPxvo$Hf#geKYw
zg3(|bnS?Ff7ehnHveA%W<^J=@(IAKSR!0_6yc;7{k&8niqPvdsRMlT!Gcbf&tf`4$
z668W)2bzN8(Gc5U^YA)@N?^GQhY08!nGHS~Xf8y=<yi_<GGZMi^V5Oloz+U9(%8X-
z<1tRB6XeCiMn$SNPHbW#8q>81Ebw&B_^Tc6pbQ<SS{YD>3QYxeKyqqqjkXN@0IQyg
z<XuvNx4qA;QGX7{D=<J;mZdBTTz<t7JZf47h8uWOt_SEGCvjb>pb?d2>}t(yfPL>a
zc8n$>o~qz096^9lfis-LRLRgG+`+Ucs@io2Fb?|!I0!Lwvo4S1=rsiXX|x6;%E42*
zfo1ypDnBq>yu4oy#lo}^=CjnwngM|?GJkqIv-N=D38a&nY!r%VJC7j+6Z;JAJinAU
zTNhbbJXaelzJ;mh_d{{&PGK=k#Cu@`>*{0W{efayV~9TE5y!UCnnZL^E)(Ym5WoS~
zMgI%VRdUi?HCVM0O@=hlK18IdOS3FlprPUfu?Y~wJ22!V`BN3L_{#jbHEqJK9amy%
z!M1#5az}Kvo|h!IO}(F5`8etLST5uqo@|J>^#nMf)1!Eh!T)_YyUWanDDZHG`eX3l
zzB9Q%gFq8URU-O?FHdAgA46kyZc~>5eh6vwu&A_|_K%tG1N>Q+U*FmN?oO=x>z+$2
Rctp1g3)vW46BPT^zX6Glc(VWi

literal 0
HcmV?d00001

diff --git a/cypress/snapshots/options.cy.js/width-300.snap.png b/cypress/snapshots/options.cy.js/width-300.snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..a75b37f03350df255f924dbe4dfa8efebbf7c9e5
GIT binary patch
literal 5258
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
AEC2ui

literal 0
HcmV?d00001

diff --git a/examples/all-options.js b/examples/all-options.js
index a44bba37c..89582c4c2 100644
--- a/examples/all-options.js
+++ b/examples/all-options.js
@@ -7,6 +7,8 @@ const options = {
   container: 'body',
   /** The height of the waveform in pixels */
   height: 128,
+  /** The width of the waveform in pixels or any CSS value; defaults to 100% */
+  width: 300,
   /** Render each audio channel as a separate waveform */
   splitChannels: false,
   /** Stretch the waveform to the full height */
@@ -69,6 +71,12 @@ const schema = {
     max: 512,
     step: 1,
   },
+  width: {
+    value: 300,
+    min: 10,
+    max: 2000,
+    step: 1,
+  },
   cursorWidth: {
     value: 1,
     min: 0,
diff --git a/src/renderer.ts b/src/renderer.ts
index e9f5cad5d..56a5b223f 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -138,6 +138,7 @@ class Renderer extends EventEmitter<RendererEvents> {
       <style>
         :host {
           user-select: none;
+          min-width: 1px;
         }
         :host audio {
           display: block;
@@ -524,6 +525,12 @@ class Renderer extends EventEmitter<RendererEvents> {
     this.progressWrapper.innerHTML = ''
     this.wrapper.style.width = ''
 
+    // Width
+    if (this.options.width != null) {
+      this.scrollContainer.style.width =
+        typeof this.options.width === 'number' ? `${this.options.width}px` : this.options.width
+    }
+
     // Determine the width of the waveform
     const pixelRatio = window.devicePixelRatio || 1
     const parentWidth = this.scrollContainer.clientWidth
diff --git a/src/wavesurfer.ts b/src/wavesurfer.ts
index cfc177870..e098408da 100644
--- a/src/wavesurfer.ts
+++ b/src/wavesurfer.ts
@@ -6,10 +6,12 @@ import Renderer from './renderer.js'
 import Timer from './timer.js'
 
 export type WaveSurferOptions = {
-  /** Required: an HTML element or selector where the waveform will be rendered. */
+  /** Required: an HTML element or selector where the waveform will be rendered */
   container: HTMLElement | string
   /** The height of the waveform in pixels, or "auto" to fill the container height */
   height?: number | 'auto'
+  /** The width of the waveform in pixels or any CSS value; defaults to 100% */
+  width?: number | string
   /** The color of the waveform */
   waveColor?: string | string[] | CanvasGradient
   /** The color of the progress mask */