@nylas/web-elements 0.0.0-test-20250320205845 → 0.0.0-test-20250327161320

package/dist/nylas-web-elements/p-3d93df74.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as o,a as t}from"./p-6f5a3998.js";import{v as r}from"./p-890d7f01.js";import"./p-fc5bc07b.js";const i='.video-container{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#000;position:relative;box-sizing:border-box;border-radius:8px;font-family:"Inter", serif;font-optical-sizing:auto}.video-container video{width:100%;border-radius:8px}.video-container .play-icon svg{fill:red}.video-container .controls-overlay{color:white;background:linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));position:absolute;bottom:0;left:0;right:0;padding:30px 20px;padding-bottom:10px;opacity:1;transition:opacity 0.3s;border-bottom-right-radius:8px;border-bottom-left-radius:8px;display:none;}.video-container .controls-overlay .seek{width:100%}.video-container .controls-overlay input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}.video-container .controls-overlay .info{padding-bottom:20px}.video-container .controls-overlay .info .title{font-size:20px}.video-container .controls-overlay .info .description{color:#bbbbbb;font-weight:400;font-size:14px}.video-container .controls-overlay .progress-bar{background-color:rgba(255, 255, 255, 0.5);height:2px;margin:10px 0;transition:width 0.1s}.video-container .controls-overlay .progress-bar .progress{background:white;height:2px}.video-container .controls-overlay .controls{display:flex;align-items:center;justify-content:space-between}.video-container .controls-overlay .controls button{background:none;border:none}.video-container .controls-overlay input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;width:15rem}.video-container .controls-overlay input[type=range]:focus{outline:none}.video-container .controls-overlay input[type=range]::-webkit-slider-runnable-track{background-color:#053a5f;border-radius:0.5rem;height:0.5rem}.video-container .controls-overlay input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-12px;background-color:#5cd5eb;height:2rem;width:1rem}.video-container .controls-overlay input[type=range]:focus::-webkit-slider-thumb{border:1px solid #053a5f;outline:3px solid #053a5f;outline-offset:0.125rem}.video-container .controls-overlay input[type=range]::-moz-range-track{background-color:#053a5f;border-radius:0.5rem;height:0.5rem}.video-container .controls-overlay input[type=range]::-moz-range-thumb{border:none;border-radius:0;background-color:#5cd5eb;height:2rem;width:1rem}.video-container .controls-overlay input[type=range]:focus::-moz-range-thumb{border:1px solid #053a5f;outline:3px solid #053a5f;outline-offset:0.125rem}';const n=i;const a=class{constructor(o){e(this,o);this.handleTimeUpdate=()=>{const e=this.videoElement;r.set("videoTime",this.videoElement.currentTime);if(!this.isSeeking){this.seekElement.value=(e.currentTime/e.duration*100).toString()}};this.handlePlay=()=>{this.isPlaying=true;this.videoElement.play()};this.handlePause=()=>{this.isPlaying=false;this.videoElement.pause()};this.videoUrl=undefined;this.isSeeking=false;this.isPlaying=false}inputSeek(e){if(!this.isSeeking)this.isSeeking=true}handleSeek(e){this.isSeeking=false;if(!this.videoElement)return;const o=e.target;this.videoElement.currentTime=parseFloat(o.value)/100*this.videoElement.duration;this.videoElement.play()}get progressPercent(){if(!this.videoElement)return 0;const e=r.get("videoTime");return e/this.videoElement.duration*100}render(){return o("div",{key:"98a898e225274dac6fda72126de7eb3fbe3b73b0",class:"video-container"},o("video",{key:"2938eddacc3020461e2ce61e1d35bc58fd791975",ref:e=>this.videoElement=e,onPlay:this.handlePlay,onPause:this.handlePause,onTimeUpdate:this.handleTimeUpdate,muted:true,controls:true},this.videoUrl&&o("source",{src:this.videoUrl,type:"video/mp4"})),o("div",{key:"d4846bb9f5e06341238a073d54453b546def4229",class:"controls-overlay"},o("div",{key:"880ba34f2650bb4eb59da0c4efbdeab1e218612e",class:"info"},o("div",{key:"69918a5f5996d62e6da92087765c4c85e258ee4f",class:"title"},"Ad Video from Google"),o("div",{key:"9278b8de8b7e2aec89b596c12e858c9358da5ac9",class:"description"},"Found on the web...")),o("div",{key:"acb43c9ed7fd285300244c3df93c40440adc33a3",class:"progress-bar"},o("input",{key:"2284a9a07bf435af8b80e1f16b6fe654b266337c",type:"range",ref:e=>this.seekElement=e,min:"0",max:"100",class:"seek",value:this.progressPercent,onChange:e=>this.handleSeek(e),onClickCapture:e=>this.inputSeek(e)})),o("div",{key:"4da6eac3a627fa0fcece4492555162f3b6425662",class:"controls"},o("div",{key:"1ab2d7fbaac122a98aaae5310d113e07856b57bb",class:"left"},o("button",{key:"9b3ef1094eaec87cff17f5159fc0a9a2e31fbd5c",onClick:()=>this.handlePlay()}),o("button",{key:"70b050babf342fb2ca91ca172b2868642724addd",onClick:()=>this.handlePause()})),o("div",{key:"4fee85bcaeb2d7504ee3f53e97e6a1da99fdbfda",class:"right"},o("button",{key:"a5b3363cfa522afc38abb6b20fc4205412a3ccdf",onClick:()=>this.handlePause()})))))}get el(){return t(this)}};a.style=n;export{a as nylas_video_player};
-//# sourceMappingURL=p-3d93df74.entry.js.map

package/dist/nylas-web-elements/p-3d93df74.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["nylasVideoPlayerCss","NylasVideoPlayerStyle0","NylasVideoPlayer","this","handleTimeUpdate","videoElement","store","set","currentTime","isSeeking","seekElement","value","duration","toString","handlePlay","isPlaying","play","handlePause","pause","inputSeek","_e","handleSeek","e","target","parseFloat","progressPercent","get","render","h","key","class","ref","el","onPlay","onPause","onTimeUpdate","muted","controls","videoUrl","src","type","min","max","onChange","onClickCapture","onClick"],"sources":["src/components/nylas-notebook/nylas-video-player/nylas-video-player.scss?tag=nylas-video-player&encapsulation=shadow","src/components/nylas-notebook/nylas-video-player/nylas-video-player.tsx"],"sourcesContent":[".video-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background-color: #000;\n  position: relative;\n  box-sizing: border-box;\n  border-radius: 8px;\n  font-family: 'Inter', serif;\n  font-optical-sizing: auto;\n\n  video {\n    width: 100%;\n    border-radius: 8px;\n  }\n\n  .play-icon svg {\n    fill: red;\n  }\n\n  .controls-overlay {\n    color: white;\n    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    padding: 30px 20px;\n    padding-bottom: 10px;\n    opacity: 1;\n    transition: opacity 0.3s;\n    border-bottom-right-radius: 8px;\n    border-bottom-left-radius: 8px;\n    display: none;\n\n    .seek {\n      width: 100%;\n    }\n\n    input[type='range'] {\n      -webkit-appearance: none;\n      appearance: none;\n      background: transparent;\n      cursor: pointer;\n    }\n\n    .info {\n      padding-bottom: 20px;\n\n      .title {\n        font-size: 20px;\n      }\n\n      .description {\n        color: #bbbbbb;\n        font-weight: 400;\n        font-size: 14px;\n      }\n    }\n\n    .progress-bar {\n      background-color: rgba(255, 255, 255, 0.5);\n      height: 2px;\n      margin: 10px 0;\n      transition: width 0.1s;\n\n      .progress {\n        background: white;\n        height: 2px;\n      }\n    }\n\n    .controls {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n\n      button {\n        background: none;\n        border: none;\n      }\n    }\n\n    /********** Range Input Styles **********/\n    /*Range Reset*/\n    input[type='range'] {\n      -webkit-appearance: none;\n      appearance: none;\n      background: transparent;\n      cursor: pointer;\n      width: 15rem;\n    }\n\n    /* Removes default focus */\n    input[type='range']:focus {\n      outline: none;\n    }\n\n    /***** Chrome, Safari, Opera and Edge Chromium styles *****/\n    /* slider track */\n    input[type='range']::-webkit-slider-runnable-track {\n      background-color: #053a5f;\n      border-radius: 0.5rem;\n      height: 0.5rem;\n    }\n\n    /* slider thumb */\n    input[type='range']::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      /* Override default look */\n      appearance: none;\n      margin-top: -12px;\n      /* Centers thumb on the track */\n\n      /*custom styles*/\n      background-color: #5cd5eb;\n      height: 2rem;\n      width: 1rem;\n    }\n\n    input[type='range']:focus::-webkit-slider-thumb {\n      border: 1px solid #053a5f;\n      outline: 3px solid #053a5f;\n      outline-offset: 0.125rem;\n    }\n\n    /******** Firefox styles ********/\n    /* slider track */\n    input[type='range']::-moz-range-track {\n      background-color: #053a5f;\n      border-radius: 0.5rem;\n      height: 0.5rem;\n    }\n\n    /* slider thumb */\n    input[type='range']::-moz-range-thumb {\n      border: none;\n      /*Removes extra border that FF applies*/\n      border-radius: 0;\n      /*Removes default border-radius that FF applies*/\n\n      /*custom styles*/\n      background-color: #5cd5eb;\n      height: 2rem;\n      width: 1rem;\n    }\n\n    input[type='range']:focus::-moz-range-thumb {\n      border: 1px solid #053a5f;\n      outline: 3px solid #053a5f;\n      outline-offset: 0.125rem;\n    }\n  }\n}\n","import { Component, h, Element, State, Prop } from '@stencil/core';\nimport { videoStore as store } from '../store/notebook-store';\n\n@Component({\n  tag: 'nylas-video-player',\n  shadow: true,\n  styleUrl: './nylas-video-player.scss',\n})\nexport class NylasVideoPlayer {\n  @Element() el!: HTMLElement;\n  @Prop() videoUrl!: string;\n  @State() isSeeking: boolean = false;\n  @State() isPlaying: boolean = false;\n  private videoElement!: HTMLVideoElement;\n  private seekElement!: HTMLInputElement;\n\n  handleTimeUpdate = () => {\n    const videoElement = this.videoElement;\n    store.set('videoTime', this.videoElement.currentTime);\n    if (!this.isSeeking) {\n      this.seekElement.value = ((videoElement.currentTime / videoElement.duration) * 100).toString();\n    }\n  };\n\n  handlePlay = () => {\n    this.isPlaying = true;\n    this.videoElement.play();\n  };\n\n  handlePause = () => {\n    this.isPlaying = false;\n    this.videoElement.pause();\n  };\n\n  private inputSeek(_e: Event) {\n    if (!this.isSeeking) this.isSeeking = true;\n  }\n\n  private handleSeek(e: Event) {\n    this.isSeeking = false;\n    if (!this.videoElement) return;\n    const target = e.target as HTMLInputElement;\n    this.videoElement.currentTime = (parseFloat(target.value) / 100) * this.videoElement.duration;\n    this.videoElement.play();\n  }\n\n  get progressPercent() {\n    if (!this.videoElement) return 0;\n    const currentTime = store.get('videoTime');\n    return (currentTime / this.videoElement.duration) * 100;\n  }\n\n  render() {\n    return (\n      <div class=\"video-container\">\n        <video ref={el => (this.videoElement = el as HTMLVideoElement)} onPlay={this.handlePlay} onPause={this.handlePause} onTimeUpdate={this.handleTimeUpdate} muted controls>\n          {this.videoUrl && <source src={this.videoUrl} type=\"video/mp4\" />}\n        </video>\n        <div class=\"controls-overlay\">\n          <div class=\"info\">\n            <div class=\"title\">Ad Video from Google</div>\n            <div class=\"description\">Found on the web...</div>\n          </div>\n          <div class=\"progress-bar\">\n            <input\n              type=\"range\"\n              ref={el => (this.seekElement = el as HTMLInputElement)}\n              min=\"0\"\n              max=\"100\"\n              class=\"seek\"\n              value={this.progressPercent}\n              onChange={e => this.handleSeek(e)}\n              onClickCapture={e => this.inputSeek(e)}\n            />\n          </div>\n          <div class=\"controls\">\n            <div class=\"left\">\n              <button onClick={() => this.handlePlay()}>{/* <img src={playIcon} /> */}</button>\n              <button onClick={() => this.handlePause()}>{/* <img src={volumeIcon} /> */}</button>\n            </div>\n            <div class=\"right\">\n              <button onClick={() => this.handlePause()}>{/* <img src={fullScreenIcon} /> */}</button>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"8GAAA,MAAMA,EAAsB,ihFAC5B,MAAAC,EAAeD,E,MCOFE,EAAgB,M,yBAQ3BC,KAAAC,iBAAmB,KACjB,MAAMC,EAAeF,KAAKE,aAC1BC,EAAMC,IAAI,YAAaJ,KAAKE,aAAaG,aACzC,IAAKL,KAAKM,UAAW,CACnBN,KAAKO,YAAYC,OAAUN,EAAaG,YAAcH,EAAaO,SAAY,KAAKC,U,GAIxFV,KAAAW,WAAa,KACXX,KAAKY,UAAY,KACjBZ,KAAKE,aAAaW,MAAM,EAG1Bb,KAAAc,YAAc,KACZd,KAAKY,UAAY,MACjBZ,KAAKE,aAAaa,OAAO,E,uCApBG,M,eACA,K,CAsBtB,SAAAC,CAAUC,GAChB,IAAKjB,KAAKM,UAAWN,KAAKM,UAAY,I,CAGhC,UAAAY,CAAWC,GACjBnB,KAAKM,UAAY,MACjB,IAAKN,KAAKE,aAAc,OACxB,MAAMkB,EAASD,EAAEC,OACjBpB,KAAKE,aAAaG,YAAegB,WAAWD,EAAOZ,OAAS,IAAOR,KAAKE,aAAaO,SACrFT,KAAKE,aAAaW,M,CAGpB,mBAAIS,GACF,IAAKtB,KAAKE,aAAc,OAAO,EAC/B,MAAMG,EAAcF,EAAMoB,IAAI,aAC9B,OAAQlB,EAAcL,KAAKE,aAAaO,SAAY,G,CAGtD,MAAAe,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mBACTF,EAAA,SAAAC,IAAA,2CAAOE,IAAKC,GAAO7B,KAAKE,aAAe2B,EAAyBC,OAAQ9B,KAAKW,WAAYoB,QAAS/B,KAAKc,YAAakB,aAAchC,KAAKC,iBAAkBgC,MAAK,KAACC,SAAQ,MACpKlC,KAAKmC,UAAYV,EAAA,UAAQW,IAAKpC,KAAKmC,SAAUE,KAAK,eAErDZ,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,QACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,SAAO,wBAClBF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,eAAa,wBAE1BF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gBACTF,EAAA,SAAAC,IAAA,2CACEW,KAAK,QACLT,IAAKC,GAAO7B,KAAKO,YAAcsB,EAC/BS,IAAI,IACJC,IAAI,MACJZ,MAAM,OACNnB,MAAOR,KAAKsB,gBACZkB,SAAUrB,GAAKnB,KAAKkB,WAAWC,GAC/BsB,eAAgBtB,GAAKnB,KAAKgB,UAAUG,MAGxCM,EAAA,OAAAC,IAAA,2CAAKC,MAAM,YACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,QACTF,EAAA,UAAAC,IAAA,2CAAQgB,QAAS,IAAM1C,KAAKW,eAC5Bc,EAAA,UAAAC,IAAA,2CAAQgB,QAAS,IAAM1C,KAAKc,iBAE9BW,EAAA,OAAAC,IAAA,2CAAKC,MAAM,SACTF,EAAA,UAAAC,IAAA,2CAAQgB,QAAS,IAAM1C,KAAKc,mB"}