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

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"}