"use strict";(self.webpackChunk_aidoop_aidoop_r=self.webpackChunk_aidoop_aidoop_r||[]).push([[3018],{9030:(t,r,a)=>{a.r(r);a(799),a(77198),a(59178),a(16441);var o=a(50493),e=a(94430),i=a(56765),s=a(98491),d=a(71277);let n=class extends e.oi{constructor(){super(...arguments),this.groups=[],this.groupId="",this.targetPage=""}render(){return e.dy`
      <ul>
        ${(this.groups||[]).map((t=>e.dy`
            <li ?active=${this.groupId===t.id} @long-press=${r=>this._infoGroup(t)}>
              <a href=${`${this.targetPage}/${t.id}`}>${t.name}</a>
            </li>
          `))}

        <li padding></li>

        <li add>
          <mwc-icon @click=${t=>this._infoGroup()}>add</mwc-icon>
        </li>
      </ul>
    `}_infoGroup(t){this.dispatchEvent(new CustomEvent("info-play-group",{detail:t}))}_onWheelEvent(t){var r=Math.max(-1,Math.min(1,t.wheelDelta||-t.detail));this.scrollLeft-=40*r,t.preventDefault()}_onClickAdd(t){}updated(t){if(t.has("groups")&&this.__sb&&this.__sb.updateMetrics(),t.has("groupId")){var r=this.renderRoot.querySelector("li[active]");r&&r.scrollIntoView()}}firstUpdated(){var t=this.renderRoot.querySelector("ul");(0,d.J1)(t),t.addEventListener("mousewheel",this._onWheelEvent.bind(this),!1),this.__sb=new s.Z({viewport:this,content:t,mode:"x",onUpdate:t=>{this.scrollLeft=t.position.x}})}};n.styles=[e.iv`
      :host {
        background-color: var(--group-bar-background-color);

        overflow-x: hidden;
      }

      ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        white-space: nowrap;
      }

      li {
        display: inline-block;
        padding: 0px 3px;

        border-bottom: var(--group-bar-line);
      }

      li[active] {
        border-color: var(--group-bar-active-line-color);
      }

      li a {
        display: block;
        padding: 5px 4px 1px 4px;
        text-decoration: none;
        font: var(--group-bar-textbutton);
        color: rgba(255, 255, 255, 0.8);
      }

      li[active] a {
        font: var(--group-bar-textbutton-active);
        color: rgba(255, 255, 255, 1);
      }

      li[padding] {
        flex: 1;
      }

      li[add] {
        padding: 5px 4px 1px 4px;
      }

      li[add] * {
        color: rgba(255, 255, 255, 0.5);
      }

      mwc-icon {
        vertical-align: middle;
      }
    `],(0,o.gn)([(0,i.Cb)({type:Array}),(0,o.w6)("design:type",Array)],n.prototype,"groups",void 0),(0,o.gn)([(0,i.Cb)({type:String}),(0,o.w6)("design:type",String)],n.prototype,"groupId",void 0),(0,o.gn)([(0,i.Cb)({type:String,attribute:"target-page"}),(0,o.w6)("design:type",String)],n.prototype,"targetPage",void 0),n=(0,o.gn)([(0,i.Mo)("play-group-bar")],n);var p=a(16682),l=a(28120),u=a(13756),h=a(37077),y=a(77675),g=a(27805),c=a(53421),f=a(15633),b=a(93074),v=a(60977);class m extends((0,c.NC)(c.z2)((0,l.$)(y.h)(y.B4))){static get styles(){return[f.Ix,e.iv`
        :host {
          display: flex;
          flex-direction: column;
          position: relative;

          overflow: hidden;
        }

        board-tile-list {
          flex: 1;
          overflow-y: auto;
        }

        #play {
          position: absolute;
          bottom: 15px;
          right: 16px;
          text-decoration: auto;
        }
      `]}static get properties(){return{groupId:String,groups:Array,boards:Array,favorites:Array}}get context(){var t=this.groups&&this.groups.find((t=>t.id===this.groupId));return{title:{icon:"video_library",text:t?t.name:"Play List"},board_topmenu:!0}}render(){return e.dy`
      <play-group-bar
        .groups=${this.groups}
        .groupId=${this.groupId}
        target-page="play-list"
        @info-play-group=${t=>this.onInfoPlayGroup(t.detail)}
      ></play-group-bar>

      <board-tile-list
        .favorites=${this.favorites}
        .boards=${this.boards}
        .group=${this.groupId}
        @info-board=${t=>this.onInfoBoard(t.detail)}
        @delete-board=${t=>this.onDeleteBoard(t.detail)}
        @refresh-favorites=${t=>this.refreshFavorites()}
        @reordered=${t=>this.onReorder(t.detail)}
        reorderable
      ></board-tile-list>

      <a id="play" .href=${"board-player/"+this.groupId}>
        <mwc-fab icon="play_arrow" title="play"> </mwc-fab>
      </a>
    `}async refresh(){this.groups=(await(0,v.xz)()).playGroups.items,this.groups&&await this.refreshBoards()}async refreshBoards(){if(this.groups){if(!this.groupId){let r=this.groups&&this.groups[0]&&this.groups[0].id;var t=new URL(window.location);return t.pathname+=`/${r}`,void(r&&(0,y.c4)(t,!0))}if(this.groupId){var r=(await(0,v.bc)(this.groupId)).playGroup;this.boards=r?r.boards:[]}else this.boards=[];this.updateContext();var a=this.shadowRoot.querySelector("board-tile-list");a.style.transition="",a.style.transform="translate3d(0, 0, 0)"}else await this.refresh()}async pageInitialized(){this.refresh()}async pageUpdated(t,r){this.active&&(this.page=r.page,this.groupId=r.resourceId,await this.updateComplete,this.refreshBoards())}stateChanged(t){this.favorites=t.favorite.favorites}firstUpdated(){var t=this.shadowRoot.querySelector("board-tile-list");(0,b.A)({container:this.shadowRoot,scrollable:t,refresh:()=>this.refresh()}),(0,d.s2)()&&(0,d.aq)({container:t,animates:{dragging:async(r,a)=>{var o=this.groups,e=o.findIndex((t=>t.id==this.groupId));if(r>0&&e<=0||r<0&&e>=o.length-1)return!1;t.style.transform=`translate3d(${r}px, 0, 0)`},aborting:async r=>{t.style.transition="transform 0.3s",t.style.transform="translate3d(0, 0, 0)",setTimeout((()=>{t.style.transition=""}),300)},swiping:async(r,a)=>{var o=this.groups,e=o.findIndex((t=>t.id==this.groupId));r>0&&e<=0||r<0&&e>=o.length-1?(t.style.transition="",t.style.transform="translate3d(0, 0, 0)"):(t.style.transition="transform 0.3s",t.style.transform=`translate3d(${r<0?"-100%":"100%"}, 0, 0)`,(0,y.c4)(`${this.page}/${o[e+(r<0?1:-1)].id}`))}}})}async onInfoBoard(t){(0,h.IK)("viewpart-info",{template:e.dy`
        <board-info
          .board=${t}
          .groupId=${this.groupId}
          @update-board=${t=>this.onUpdateBoard(t.detail)}
          @delete-board=${t=>this.onDeleteBoard(t.detail)}
          @join-playgroup=${t=>this.onJoinPlayGroup(t.detail)}
          @leave-playgroup=${t=>this.onLeavePlayGroup(t.detail)}
        ></board-info>
      `})}async onInfoPlayGroup(t){(0,h.IK)("viewpart-info",{template:e.dy`
        <play-group-info
          .playGroup=${t}
          @update-play-group=${t=>this.onUpdatePlayGroup(t.detail)}
          @delete-play-group=${t=>this.onDeletePlayGroup(t.detail)}
          @create-play-group=${t=>this.onCreatePlayGroup(t.detail)}
        ></play-group-info>
      `})}async onCreatePlayGroup(t){try{await(0,v.f3)(t),this._notify("info",c.z2.t("text.play-group created",{playGroup:t.name}))}catch(t){this._notify("error",t,t)}this.refresh()}async onUpdatePlayGroup(t){try{await(0,v.Kh)(t),this._notify("info",c.z2.t("text.play-group updated",{playGroup:t.name}))}catch(t){this._notify("error",t,t)}this.refresh()}async onDeletePlayGroup(t){try{await(0,v.g9)(t.id),this._notify("info",c.z2.t("text.play-group deleted",{playGroup:t.name}))}catch(t){this._notify("error",t,t)}this.refresh()}async onUpdateBoard(t){try{await(0,v.wN)(t),this._notify("info",c.z2.t("text.board updated",{board:t.name}))}catch(t){this._notify("error",t,t)}this.refreshBoards()}async onDeleteBoard(t){const r=this.groups&&this.groups.find((t=>t.id===this.groupId));await this.onLeavePlayGroup({board:t,playGroup:r})}async onJoinPlayGroup({board:t,playGroup:r}){try{await g.Lp.mutate({mutation:p.ZP`
          mutation JoinPlayGroup($id: String!, $boardIds: [String!]!) {
            joinPlayGroup(id: $id, boardIds: $boardIds) {
              id
            }
          }
        `,variables:{id:r.id,boardIds:[t.id]}}),this._notify("info",c.z2.t("text.joined into play-group",{board:t.name,playGroup:r.name}))}catch(t){this._notify("error",t,t)}this.refresh()}async onLeavePlayGroup({board:t,playGroup:r}){try{await g.Lp.mutate({mutation:p.ZP`
          mutation ($id: String!, $boardIds: [String!]!) {
            leavePlayGroup(id: $id, boardIds: $boardIds) {
              id
            }
          }
        `,variables:{id:r.id,boardIds:[t.id]}}),this._notify("info",c.z2.t("text.leaved from play-group",{board:t.name,playGroup:r.name}))}catch(t){this._notify("error",t,t)}this.refresh()}async onReorder({boardIds:t,groupId:r}){try{const a=(await g.Lp.mutate({mutation:p.ZP`
          mutation ($id: String!, $boardIds: [String!]!) {
            reorderPlayGroup(id: $id, boardIds: $boardIds) {
              id
              name
            }
          }
        `,variables:{id:r,boardIds:t}})).data.reorderPlayGroup;this._notify("info",c.z2.t("text.reorder play-group",{playGroup:a.name}))}catch(t){this._notify("error",t,t)}this.refresh()}async refreshFavorites(){const t=await g.Lp.query({query:p.ZP`
        query {
          myFavorites {
            id
            routing
          }
        }
      `});y.h.dispatch({type:u.U,favorites:t.data.myFavorites.map((t=>t.routing))})}_notify(t,r,a){document.dispatchEvent(new CustomEvent("notify",{detail:{level:t,message:r,ex:a}}))}}window.customElements.define("play-list-page",m)}}]);