From b5ff097286666b228a4db482c7dde238aad7cab4 Mon Sep 17 00:00:00 2001 From: Roberto Tonino <roberto.tonino5@gmail.com> Date: Mon, 23 Nov 2020 21:37:18 +0100 Subject: [PATCH] chore: removed unused function on Search page; wip: searching logic --- public/js/bundle.js | 6 +- src/components/TheSearchBar.vue | 50 +++++----- src/components/pages/Search.vue | 158 +++++++++++++++++++++++--------- src/router.js | 5 +- src/use/main-search.js | 47 ++++++++++ 5 files changed, 191 insertions(+), 75 deletions(-) create mode 100644 src/use/main-search.js diff --git a/public/js/bundle.js b/public/js/bundle.js index 25b1b9d..0167daa 100644 --- a/public/js/bundle.js +++ b/public/js/bundle.js @@ -2501,7 +2501,7 @@ PERFORMANCE OF THIS SOFTWARE. `)]),e._v(" "),a("div",{staticClass:"relative flex items-center w-full justify-evenly",class:{"inline-grid gap-2":e.isSlim},attrs:{id:"theme_togglers"}},e._l(e.THEMES,function(r){return a("div",{key:r,staticClass:"w-6 h-6 border rounded-full cursor-pointer theme_toggler border-grayscale-500 gap",class:[{"theme_toggler--active":e.currentTheme===r},"theme_toggler--"+r],on:{click:function(i){e.currentTheme=r}}})}),0)])],2)},__vue_staticRenderFns__$4=[];const __vue_inject_styles__$4=function(e){if(!e)return;e("data-v-6ea15b3b_0",{source:"#update-notification[data-v-6ea15b3b]{left:30px;top:12px}.theme_toggler[data-v-6ea15b3b]{transition:border .2s ease-in-out}.theme_toggler--active[data-v-6ea15b3b]{border-width:3px}.theme_toggler--light[data-v-6ea15b3b]{background-color:#fff}.theme_toggler--dark[data-v-6ea15b3b]{background-color:#141414}.theme_toggler--purple[data-v-6ea15b3b]{background:#460eaf}",map:void 0,media:void 0})},__vue_scope_id__$4="data-v-6ea15b3b",__vue_module_identifier__$3=void 0,__vue_is_functional_template__$4=!1;function __vue_normalize__$4(e,n,a,r,i,s,l,c){const o=(typeof a=="function"?a.options:a)||{};o.__file="TheSidebar.vue",o.render||(o.render=e.render,o.staticRenderFns=e.staticRenderFns,o._compiled=!0,i&&(o.functional=!0)),o._scopeId=r;{let u;if(n&&(u=function(d){n.call(this,l(d))}),u!==void 0)if(o.functional){const d=o.render;o.render=function(m,h){return u.call(h),d(m,h)}}else{const d=o.beforeCreate;o.beforeCreate=d?[].concat(d,u):[u]}}return o}function __vue_create_injector__$3(){const e=document.head||document.getElementsByTagName("head")[0],n=__vue_create_injector__$3.styles||(__vue_create_injector__$3.styles={}),a=typeof navigator!="undefined"&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());return function(i,s){if(document.querySelector('style[data-vue-ssr-id~="'+i+'"]'))return;const l=a?s.media||"default":i,c=n[l]||(n[l]={ids:[],parts:[],element:void 0});if(!c.ids.includes(i)){let o=s.source,u=c.ids.length;if(c.ids.push(i),s.map&&(o+=` /*# sourceURL=`+s.map.sources[0]+" */",o+=` /*# sourceMappingURL=data:application/json;base64,`+btoa(unescape(encodeURIComponent(JSON.stringify(s.map))))+" */"),a&&(c.element=c.element||document.querySelector("style[data-group="+l+"]")),!c.element){const d=c.element=document.createElement("style");d.type="text/css",s.media&&d.setAttribute("media",s.media),a&&(d.setAttribute("data-group",l),d.setAttribute("data-next-index","0")),e.appendChild(d)}if(a&&(u=parseInt(c.element.getAttribute("data-next-index")),c.element.setAttribute("data-next-index",u+1)),c.element.styleSheet)c.parts.push(o),c.element.styleSheet.cssText=c.parts.filter(Boolean).join(` -`);else{const d=document.createTextNode(o),f=c.element.childNodes;f[u]&&c.element.removeChild(f[u]),f.length?c.element.insertBefore(d,f[u]):c.element.appendChild(d)}}}}var TheSidebar=__vue_normalize__$4({render:__vue_render__$4,staticRenderFns:__vue_staticRenderFns__$4},__vue_inject_styles__$4,__vue_script__$3,__vue_scope_id__$4,__vue_is_functional_template__$4,__vue_module_identifier__$3,__vue_create_injector__$3),script$4={data(){return{lastTextSearch:""}},created(){const e=a=>{a.keyCode===70&&a.ctrlKey&&(a.preventDefault(),this.$refs.searchbar.focus())},n=a=>{if(!(a.key=="Backspace"&&a.ctrlKey&&a.shiftKey))return;this.$refs.searchbar.value="",this.$refs.searchbar.focus()};document.addEventListener("keydown",e),document.addEventListener("keyup",n),this.$on("hook:destroyed",()=>{document.removeEventListener("keydown",e),document.removeEventListener("keyup",n)})},methods:{test(){console.log("test passato")},async handleSearchBarKeyup(e){let n=e.keyCode===13;if(!n)return;let a=this.$refs.searchbar.value,r=a==="";if(r)return;let i=isValidURL(a),s=e.ctrlKey,l=this.$route.name==="Link Analyzer",c=this.$route.name==="Search",o=a===this.lastTextSearch;if(i)s?this.$root.$emit("QualityModal:open",a):l?socket.emit("analyzeLink",a):sendAddToQueue(a);else{if(c&&o)return;c||await this.$router.push({name:"Search"}),o||(this.$root.$emit("updateSearchLoadingState",!0),this.lastTextSearch=a),this.$root.$emit("mainSearch:showNewResults",a)}}}};const __vue_script__$4=script$4;var __vue_render__$5=function(){var e=this,n=e.$createElement,a=e._self._c||n;return a("header",{attrs:{id:"search","aria-label":"searchbar"}},[e._m(0),e._v(" "),a("input",{ref:"searchbar",staticClass:"w-full",attrs:{id:"searchbar",autocomplete:"off",type:"search",name:"searchbar",value:"",placeholder:e.$t("searchbar"),autofocus:""},on:{keyup:function(r){return e.handleSearchBarKeyup(r)}}})])},__vue_staticRenderFns__$5=[function(){var e=this,n=e.$createElement,a=e._self._c||n;return a("div",{staticClass:"search__icon"},[a("i",{staticClass:"material-icons"},[e._v("search")])])}];const __vue_inject_styles__$5=function(e){if(!e)return;e("data-v-71c3049b_0",{source:`input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;width:28px;height:28px;background-color:var(--foreground);-webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E")}#search{background-color:var(--secondary-background);padding:0 1em;display:flex;align-items:center;border:1px solid transparent;transition:border .2s ease-in-out;border-radius:15px;margin:10px 10px 20px 10px}#search .search__icon{width:2rem;height:2rem}#search .search__icon i{font-size:2rem;color:var(--foreground)}#search .search__icon i::selection{background:0 0}#search #searchbar{height:45px;padding-left:.5em;border:0;border-radius:0;background-color:var(--secondary-background);color:var(--foreground);font-size:1.2rem;font-family:'Open Sans';font-weight:300;margin-bottom:0}#search #searchbar:focus{outline:0}#search #searchbar::-webkit-search-cancel-button{appearance:none;width:28px;height:28px;background-color:var(--foreground);mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E")}#search #searchbar:-webkit-autofill,#search #searchbar:-webkit-autofill:active,#search #searchbar:-webkit-autofill:focus,#search #searchbar:-webkit-autofill:hover{box-shadow:0 0 0 45px var(--secondary-background) inset!important}#search:focus-within{border:1px solid var(--foreground)}`,map:void 0,media:void 0})},__vue_scope_id__$5=void 0,__vue_module_identifier__$4=void 0,__vue_is_functional_template__$5=!1;function __vue_normalize__$5(e,n,a,r,i,s,l,c){const o=(typeof a=="function"?a.options:a)||{};o.__file="TheSearchBar.vue",o.render||(o.render=e.render,o.staticRenderFns=e.staticRenderFns,o._compiled=!0,i&&(o.functional=!0)),o._scopeId=r;{let u;if(n&&(u=function(d){n.call(this,l(d))}),u!==void 0)if(o.functional){const d=o.render;o.render=function(m,h){return u.call(h),d(m,h)}}else{const d=o.beforeCreate;o.beforeCreate=d?[].concat(d,u):[u]}}return o}function __vue_create_injector__$4(){const e=document.head||document.getElementsByTagName("head")[0],n=__vue_create_injector__$4.styles||(__vue_create_injector__$4.styles={}),a=typeof navigator!="undefined"&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());return function(i,s){if(document.querySelector('style[data-vue-ssr-id~="'+i+'"]'))return;const l=a?s.media||"default":i,c=n[l]||(n[l]={ids:[],parts:[],element:void 0});if(!c.ids.includes(i)){let o=s.source,u=c.ids.length;if(c.ids.push(i),s.map&&(o+=` +`);else{const d=document.createTextNode(o),f=c.element.childNodes;f[u]&&c.element.removeChild(f[u]),f.length?c.element.insertBefore(d,f[u]):c.element.appendChild(d)}}}}var TheSidebar=__vue_normalize__$4({render:__vue_render__$4,staticRenderFns:__vue_staticRenderFns__$4},__vue_inject_styles__$4,__vue_script__$3,__vue_scope_id__$4,__vue_is_functional_template__$4,__vue_module_identifier__$3,__vue_create_injector__$3),script$4=defineComponent({setup(){return{lastTextSearch:ref$2("")}},created(){const e=a=>{a.keyCode===70&&a.ctrlKey&&(a.preventDefault(),this.$refs.searchbar.focus())},n=a=>{if(!(a.key=="Backspace"&&a.ctrlKey&&a.shiftKey))return;this.$refs.searchbar.value="",this.$refs.searchbar.focus()};document.addEventListener("keydown",e),document.addEventListener("keyup",n),this.$on("hook:destroyed",()=>{document.removeEventListener("keydown",e),document.removeEventListener("keyup",n)})},methods:{async performSearch(e){let n=e.keyCode===13;if(!n)return;let a=this.$refs.searchbar.value,r=a==="";if(r)return;let i=isValidURL(a),s=e.ctrlKey,l=this.$route.name==="Link Analyzer",c=this.$route.name==="Search",o=a===this.lastTextSearch;if(i){if(s){this.$root.$emit("QualityModal:open",a);return}if(l){socket.emit("analyzeLink",a);return}sendAddToQueue(a)}else{if(c&&o)return;c||await this.$router.push({name:"Search",query:{term:a}}),o||(this.$root.$emit("updateSearchLoadingState",!0),this.lastTextSearch=a),this.$root.$emit("mainSearch:showNewResults",a)}}}});const __vue_script__$4=script$4;var __vue_render__$5=function(){var e=this,n=e.$createElement,a=e._self._c||n;return a("header",{attrs:{id:"search","aria-label":"searchbar"}},[e._m(0),e._v(" "),a("input",{ref:"searchbar",staticClass:"w-full",attrs:{id:"searchbar",autocomplete:"off",type:"search",name:"searchbar",value:"",placeholder:e.$t("searchbar"),autofocus:""},on:{keyup:function(r){return e.performSearch(r)}}})])},__vue_staticRenderFns__$5=[function(){var e=this,n=e.$createElement,a=e._self._c||n;return a("div",{staticClass:"search__icon"},[a("i",{staticClass:"material-icons"},[e._v("search")])])}];const __vue_inject_styles__$5=function(e){if(!e)return;e("data-v-37c5b206_0",{source:`input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;width:28px;height:28px;background-color:var(--foreground);-webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E")}#search{background-color:var(--secondary-background);padding:0 1em;display:flex;align-items:center;border:1px solid transparent;transition:border .2s ease-in-out;border-radius:15px;margin:10px 10px 20px 10px}#search .search__icon{width:2rem;height:2rem}#search .search__icon i{font-size:2rem;color:var(--foreground)}#search .search__icon i::selection{background:0 0}#search #searchbar{height:45px;padding-left:.5em;border:0;border-radius:0;background-color:var(--secondary-background);color:var(--foreground);font-size:1.2rem;font-family:'Open Sans';font-weight:300;margin-bottom:0}#search #searchbar:focus{outline:0}#search #searchbar::-webkit-search-cancel-button{appearance:none;width:28px;height:28px;background-color:var(--foreground);mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E")}#search #searchbar:-webkit-autofill,#search #searchbar:-webkit-autofill:active,#search #searchbar:-webkit-autofill:focus,#search #searchbar:-webkit-autofill:hover{box-shadow:0 0 0 45px var(--secondary-background) inset!important}#search:focus-within{border:1px solid var(--foreground)}`,map:void 0,media:void 0})},__vue_scope_id__$5=void 0,__vue_module_identifier__$4=void 0,__vue_is_functional_template__$5=!1;function __vue_normalize__$5(e,n,a,r,i,s,l,c){const o=(typeof a=="function"?a.options:a)||{};o.__file="TheSearchBar.vue",o.render||(o.render=e.render,o.staticRenderFns=e.staticRenderFns,o._compiled=!0,i&&(o.functional=!0)),o._scopeId=r;{let u;if(n&&(u=function(d){n.call(this,l(d))}),u!==void 0)if(o.functional){const d=o.render;o.render=function(m,h){return u.call(h),d(m,h)}}else{const d=o.beforeCreate;o.beforeCreate=d?[].concat(d,u):[u]}}return o}function __vue_create_injector__$4(){const e=document.head||document.getElementsByTagName("head")[0],n=__vue_create_injector__$4.styles||(__vue_create_injector__$4.styles={}),a=typeof navigator!="undefined"&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());return function(i,s){if(document.querySelector('style[data-vue-ssr-id~="'+i+'"]'))return;const l=a?s.media||"default":i,c=n[l]||(n[l]={ids:[],parts:[],element:void 0});if(!c.ids.includes(i)){let o=s.source,u=c.ids.length;if(c.ids.push(i),s.map&&(o+=` /*# sourceURL=`+s.map.sources[0]+" */",o+=` /*# sourceMappingURL=data:application/json;base64,`+btoa(unescape(encodeURIComponent(JSON.stringify(s.map))))+" */"),a&&(c.element=c.element||document.querySelector("style[data-group="+l+"]")),!c.element){const d=c.element=document.createElement("style");d.type="text/css",s.media&&d.setAttribute("media",s.media),a&&(d.setAttribute("data-group",l),d.setAttribute("data-next-index","0")),e.appendChild(d)}if(a&&(u=parseInt(c.element.getAttribute("data-next-index")),c.element.setAttribute("data-next-index",u+1)),c.element.styleSheet)c.parts.push(o),c.element.styleSheet.cssText=c.parts.filter(Boolean).join(` `);else{const d=document.createTextNode(o),f=c.element.childNodes;f[u]&&c.element.removeChild(f[u]),f.length?c.element.insertBefore(d,f[u]):c.element.appendChild(d)}}}}var TheSearchBar=__vue_normalize__$5({render:__vue_render__$5,staticRenderFns:__vue_staticRenderFns__$5},__vue_inject_styles__$5,__vue_script__$4,__vue_scope_id__$5,__vue_is_functional_template__$5,__vue_module_identifier__$4,__vue_create_injector__$4),__vue_render__$6=function(){var e=this,n=e.$createElement,a=e._self._c||n;return a("button",{staticClass:"btn-primary border-transparent border-solid flex items-center justify-center p-1 m-0 w-16 h-16 rounded-full z-10",on:{click:function(r){return e.$router.back()}}},[a("i",{staticClass:"material-icons mirrored text-4xl text-white"},[e._v("forward")])])},__vue_staticRenderFns__$6=[];const __vue_inject_styles__$6=function(e){if(!e)return;e("data-v-74f206d4_0",{source:"button[data-v-74f206d4]{transition:background .2s ease-in-out}",map:void 0,media:void 0})},__vue_scope_id__$6="data-v-74f206d4",__vue_module_identifier__$5=void 0,__vue_is_functional_template__$6=!1;function __vue_normalize__$6(e,n,a,r,i,s,l,c){const o=(typeof a=="function"?a.options:a)||{};o.__file="BackButton.vue",o.render||(o.render=e.render,o.staticRenderFns=e.staticRenderFns,o._compiled=!0,i&&(o.functional=!0)),o._scopeId=r;{let u;if(n&&(u=function(d){n.call(this,l(d))}),u!==void 0)if(o.functional){const d=o.render;o.render=function(m,h){return u.call(h),d(m,h)}}else{const d=o.beforeCreate;o.beforeCreate=d?[].concat(d,u):[u]}}return o}function __vue_create_injector__$5(){const e=document.head||document.getElementsByTagName("head")[0],n=__vue_create_injector__$5.styles||(__vue_create_injector__$5.styles={}),a=typeof navigator!="undefined"&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());return function(i,s){if(document.querySelector('style[data-vue-ssr-id~="'+i+'"]'))return;const l=a?s.media||"default":i,c=n[l]||(n[l]={ids:[],parts:[],element:void 0});if(!c.ids.includes(i)){let o=s.source,u=c.ids.length;if(c.ids.push(i),s.map&&(o+=` @@ -2844,7 +2844,7 @@ PERFORMANCE OF THIS SOFTWARE. `+e._s(e.$t("globals.by",{artist:r.artistName})+" - "+e.$tc("globals.listTabs.trackN",r.playlistTracksNumber))+` `)])],1)}),0)]],2)},__vue_staticRenderFns__$q=[];const __vue_inject_styles__$q=void 0,__vue_scope_id__$q=void 0,__vue_is_functional_template__$q=!1;function __vue_normalize__$q(e,n,a,r,i,s,l,c){const o=(typeof a=="function"?a.options:a)||{};return o.__file="ResultsPlaylists.vue",o.render||(o.render=e.render,o.staticRenderFns=e.staticRenderFns,o._compiled=!0,i&&(o.functional=!0)),o._scopeId=r,o}var ResultsPlaylists=__vue_normalize__$q({render:__vue_render__$q,staticRenderFns:__vue_staticRenderFns__$q},__vue_inject_styles__$q,__vue_script__$o,__vue_scope_id__$q,__vue_is_functional_template__$q),script$p={components:{TopResult,ResultsTracks,ResultsAlbums,ResultsArtists,ResultsPlaylists},props:{viewInfo:{type:Object,required:!1}},computed:{thereAreResults(){let e=!!this.viewInfo;if(!e)return!1;let n=this.viewInfo.ORDER.every(a=>a==="TOP_RESULT"?this.viewInfo[a].length===0:this.viewInfo[a].data.length===0);return!n}},methods:{convertDuration,upperCaseFirstLowerCaseRest,standardizeData,formatSingleTrack,formatAlbums,formatArtist,formatPlaylist,checkSectionResults(e){return e==="TOP_RESULT"?!!this.viewInfo.TOP_RESULT[0]:!!this.viewInfo[e].data[0]}}};const __vue_script__$p=script$p;var __vue_render__$r=function(){var e=this,n=e.$createElement,a=e._self._c||n;return a("section",[e.thereAreResults?e._l(e.viewInfo.ORDER,function(r){return a("section",{key:r,staticClass:"float-none py-5 border-t border-grayscale-500 first:border-t-0"},[e.checkSectionResults(r)?[a("h2",{staticClass:"mb-6 capitalize",class:{"text-4xl text-center":r==="TOP_RESULT","inline-block cursor-pointer text-3xl hover:text-primary transition-colors duration-200 ease-in-out":r!=="TOP_RESULT"},on:{click:function(i){return e.$emit("change-search-tab",r)}}},[e._v(` `+e._s(e.$tc("globals.listTabs."+r.toLowerCase(),2))+` - `)]),e._v(" "),r==="TOP_RESULT"?a("TopResult",{attrs:{info:e.viewInfo.TOP_RESULT[0]},on:{"add-to-queue":function(i){return e.$emit("add-to-queue",i)}}}):r==="TRACK"?a("ResultsTracks",{attrs:{viewInfo:e.standardizeData(e.viewInfo.TRACK,e.formatSingleTrack),itemsToShow:6},on:{"add-to-queue":function(i){return e.$emit("add-to-queue",i)}}}):r=="ALBUM"?a("ResultsAlbums",{attrs:{viewInfo:e.standardizeData(e.viewInfo.ALBUM,e.formatAlbums),itemsToShow:6},on:{"add-to-queue":function(i){return e.$emit("add-to-queue",i)}}}):r=="PLAYLIST"?a("ResultsPlaylists",{attrs:{viewInfo:e.standardizeData(e.viewInfo.PLAYLIST,e.formatPlaylist),itemsToShow:6},on:{"add-to-queue":function(i){return e.$emit("add-to-queue",i)}}}):r==="ARTIST"?a("ResultsArtists",{attrs:{viewInfo:e.standardizeData(e.viewInfo.ARTIST,e.formatArtist),itemsToShow:6},on:{"add-to-queue":function(i){return e.$emit("add-to-queue",i)}}}):e._e()]:e._e()],2)}):a("div",[a("h1",[e._v(e._s(e.$t("search.noResults")))])])],2)},__vue_staticRenderFns__$r=[];const __vue_inject_styles__$r=void 0,__vue_scope_id__$r=void 0,__vue_is_functional_template__$r=!1;function __vue_normalize__$r(e,n,a,r,i,s,l,c){const o=(typeof a=="function"?a.options:a)||{};return o.__file="ResultsAll.vue",o.render||(o.render=e.render,o.staticRenderFns=e.staticRenderFns,o._compiled=!0,i&&(o.functional=!0)),o._scopeId=r,o}var ResultsAll=__vue_normalize__$r({render:__vue_render__$r,staticRenderFns:__vue_staticRenderFns__$r},__vue_inject_styles__$r,__vue_script__$p,__vue_scope_id__$r,__vue_is_functional_template__$r);const resetObj={data:[],next:0,total:0,hasLoaded:!1};var script$q={components:{BaseLoadingPlaceholder,BaseTabs,BaseTab},props:{performScrolledSearch:{type:Boolean,required:!1}},data(){const e=this.$t.bind(this),n=this.$tc.bind(this);return{currentTab:{name:"",searchType:"",component:{},viewInfo:"",formatFunc:()=>{}},tabs:[{name:e("globals.listTabs.all"),searchType:"all",component:ResultsAll,viewInfo:"allTab"},{name:n("globals.listTabs.track",2),searchType:"track",component:ResultsTracks,viewInfo:"trackTab",formatFunc:formatSingleTrack},{name:n("globals.listTabs.album",2),searchType:"album",component:ResultsAlbums,viewInfo:"albumTab",formatFunc:formatAlbums},{name:n("globals.listTabs.artist",2),searchType:"artist",component:ResultsArtists,viewInfo:"artistTab",formatFunc:formatArtist},{name:n("globals.listTabs.playlist",2),searchType:"playlist",component:ResultsPlaylists,viewInfo:"playlistTab",formatFunc:formatPlaylist}],results:{query:"",allTab:{ORDER:[],TOP_RESULT:[],ALBUM:{hasLoaded:!1},ARTIST:{hasLoaded:!1},TRACK:{hasLoaded:!1},PLAYLIST:{hasLoaded:!1}},trackTab:{...resetObj},albumTab:{...resetObj},artistTab:{...resetObj},playlistTab:{...resetObj}}}},computed:{showSearchTab(){return this.results.query!==""},loadedTabs(){const e=[];for(const n in this.results)if(this.results.hasOwnProperty(n)){const a=this.results[n];a.hasLoaded&&e.push(n.replace(/Tab/g,""))}return e}},created(){this.currentTab=this.tabs[0]},mounted(){this.$root.$on("mainSearch:showNewResults",this.checkIfPerformNewMainSearch),this.$root.$on("mainSearch:updateResults",this.checkIfUpdateResults),socket.on("mainSearch",this.saveMainSearchResult),socket.on("search",this.handleSearch)},methods:{numberWithDots,convertDuration,addToQueue(e){sendAddToQueue(e.currentTarget.dataset.link)},getViewInfo(){return this.currentTab.searchType==="all"?this.results.allTab:standardizeData(this.results[this.currentTab.viewInfo],this.currentTab.formatFunc)},changeSearchTab(e){e=e.toLowerCase();const n=this.tabs.find(a=>a.searchType===e);if(!n){console.error(`No tab ${e} found`);return}window.scrollTo(0,0),this.currentTab=n},checkIfPerformNewMainSearch(e){let n=e!==this.results.query;n&&this.performNewMainSearch(e)},performNewMainSearch(e){socket.emit("mainSearch",{term:e}),this.$root.$emit("updateSearchLoadingState",!0),this.currentTab=this.tabs[0]},checkIfUpdateResults(e){let n=e===this.results.query&&this.currentTab.searchType!=="all";n&&(this.results[this.currentTab.searchType+"Tab"]={...resetObj},this.search(this.currentTab.searchType))},search(e){socket.emit("search",{term:this.results.query,type:e,start:this.results[`${e}Tab`].next,nb:30})},scrolledSearch(){if(this.currentTab.searchType==="all")return;const e=`${this.currentTab.searchType}Tab`,n=this.results[e].next<this.results[e].total;n&&this.search(this.currentTab.searchType)},saveMainSearchResult(e){this.$root.$emit("updateSearchLoadingState",!1),this.results.query=e.QUERY,this.results.allTab=e,this.results.allTab.TRACK.hasLoaded=!0,this.results.allTab.ALBUM.hasLoaded=!0,this.results.allTab.ARTIST.hasLoaded=!0,this.results.allTab.PLAYLIST.hasLoaded=!0,this.results.trackTab={...resetObj},this.results.albumTab={...resetObj},this.results.artistTab={...resetObj},this.results.playlistTab={...resetObj}},handleSearch(e){const{next:n,total:a,type:r,data:i}=e,s=r+"Tab";let l=0;n?l=parseInt(n.match(/index=(\d*)/)[1]):l=a,this.results[s].total!==a&&(this.results[s].total=a),this.results[s].next!==l&&(this.results[s].next=l,this.results[s].data=this.results[s].data.concat(i)),this.results[s].hasLoaded=!0},isTabLoaded(e){return this.loadedTabs.indexOf(e.searchType)!==-1||e.searchType==="all"}},watch:{performScrolledSearch(e){if(!e)return;this.scrolledSearch(e)},currentTab(e){if(this.isTabLoaded(e))return;this.search(e.searchType)}}};const __vue_script__$q=script$q;var __vue_render__$s=function(){var e=this,n=e.$createElement,a=e._self._c||n;return a("div",{attrs:{id:"search_tab"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:!e.showSearchTab,expression:"!showSearchTab"}]},[a("h2",[e._v(e._s(e.$t("search.startSearching")))]),e._v(" "),a("p",[e._v(e._s(e.$t("search.description")))])]),e._v(" "),a("div",{directives:[{name:"show",rawName:"v-show",value:e.showSearchTab,expression:"showSearchTab"}]},[a("BaseTabs",e._l(e.tabs,function(r){return a("BaseTab",{key:r.name,class:{active:e.currentTab.name===r.name},on:{click:function(i){e.currentTab=r}}},[e._v(` + `)]),e._v(" "),r==="TOP_RESULT"?a("TopResult",{attrs:{info:e.viewInfo.TOP_RESULT[0]},on:{"add-to-queue":function(i){return e.$emit("add-to-queue",i)}}}):r==="TRACK"?a("ResultsTracks",{attrs:{viewInfo:e.standardizeData(e.viewInfo.TRACK,e.formatSingleTrack),itemsToShow:6},on:{"add-to-queue":function(i){return e.$emit("add-to-queue",i)}}}):r=="ALBUM"?a("ResultsAlbums",{attrs:{viewInfo:e.standardizeData(e.viewInfo.ALBUM,e.formatAlbums),itemsToShow:6},on:{"add-to-queue":function(i){return e.$emit("add-to-queue",i)}}}):r=="PLAYLIST"?a("ResultsPlaylists",{attrs:{viewInfo:e.standardizeData(e.viewInfo.PLAYLIST,e.formatPlaylist),itemsToShow:6},on:{"add-to-queue":function(i){return e.$emit("add-to-queue",i)}}}):r==="ARTIST"?a("ResultsArtists",{attrs:{viewInfo:e.standardizeData(e.viewInfo.ARTIST,e.formatArtist),itemsToShow:6},on:{"add-to-queue":function(i){return e.$emit("add-to-queue",i)}}}):e._e()]:e._e()],2)}):a("div",[a("h1",[e._v(e._s(e.$t("search.noResults")))])])],2)},__vue_staticRenderFns__$r=[];const __vue_inject_styles__$r=void 0,__vue_scope_id__$r=void 0,__vue_is_functional_template__$r=!1;function __vue_normalize__$r(e,n,a,r,i,s,l,c){const o=(typeof a=="function"?a.options:a)||{};return o.__file="ResultsAll.vue",o.render||(o.render=e.render,o.staticRenderFns=e.staticRenderFns,o._compiled=!0,i&&(o.functional=!0)),o._scopeId=r,o}var ResultsAll=__vue_normalize__$r({render:__vue_render__$r,staticRenderFns:__vue_staticRenderFns__$r},__vue_inject_styles__$r,__vue_script__$p,__vue_scope_id__$r,__vue_is_functional_template__$r);const searchResult=ref$2({}),lastTermSearched=ref$2(null);function performSearch(e){if(e===lastTermSearched.value)return;socket.emit("mainSearch",{term:e}),socket.on("mainSearch",n=>{lastTermSearched.value=e,searchResult.value=n,socket.off("mainSearch")})}function useMainSearch(){return{searchResult,performSearch}}const resetObj={data:[],next:0,total:0,hasLoaded:!1};var script$q=defineComponent({components:{BaseLoadingPlaceholder,BaseTabs,BaseTab},props:{performScrolledSearch:{type:Boolean,required:!1}},setup(e,n){const a=reactive({currentTab:{name:"",searchType:"",component:{},viewInfo:"",formatFunc:()=>{}},results:{query:"",allTab:{ORDER:[],TOP_RESULT:[],ALBUM:{hasLoaded:!1},ARTIST:{hasLoaded:!1},TRACK:{hasLoaded:!1},PLAYLIST:{hasLoaded:!1}},trackTab:{...resetObj},albumTab:{...resetObj},artistTab:{...resetObj},playlistTab:{...resetObj}}}),{searchResult:r,performSearch:i}=useMainSearch();return watch(r,s=>{console.log("show main search results watcher"),n.root.$emit("updateSearchLoadingState",!1),a.results.query=r.QUERY,a.results.allTab=r,a.results.allTab.TRACK.hasLoaded=!0,a.results.allTab.ALBUM.hasLoaded=!0,a.results.allTab.ARTIST.hasLoaded=!0,a.results.allTab.PLAYLIST.hasLoaded=!0,a.results.trackTab={...resetObj},a.results.albumTab={...resetObj},a.results.artistTab={...resetObj},a.results.playlistTab={...resetObj}}),{...toRefs(a),searchResult:r,performSearch:i}},data(){const e=this.$t.bind(this),n=this.$tc.bind(this);return{tabs:[{name:e("globals.listTabs.all"),searchType:"all",component:ResultsAll,viewInfo:"allTab"},{name:n("globals.listTabs.track",2),searchType:"track",component:ResultsTracks,viewInfo:"trackTab",formatFunc:formatSingleTrack},{name:n("globals.listTabs.album",2),searchType:"album",component:ResultsAlbums,viewInfo:"albumTab",formatFunc:formatAlbums},{name:n("globals.listTabs.artist",2),searchType:"artist",component:ResultsArtists,viewInfo:"artistTab",formatFunc:formatArtist},{name:n("globals.listTabs.playlist",2),searchType:"playlist",component:ResultsPlaylists,viewInfo:"playlistTab",formatFunc:formatPlaylist}]}},computed:{showSearchTab(){return this.results.query!==""},loadedTabs(){const e=[];for(const n in this.results)if(this.results.hasOwnProperty(n)){const a=this.results[n];a.hasLoaded&&e.push(n.replace(/Tab/g,""))}return e}},created(){this.currentTab=this.tabs[0]},mounted(){this.$root.$on("mainSearch:showNewResults",this.checkIfPerformNewMainSearch),socket.on("mainSearch",this.saveMainSearchResult),socket.on("search",this.handleSearch)},methods:{numberWithDots,convertDuration,addToQueue(e){sendAddToQueue(e.currentTarget.dataset.link)},getViewInfo(){return this.currentTab.searchType==="all"?this.results.allTab:standardizeData(this.results[this.currentTab.viewInfo],this.currentTab.formatFunc)},changeSearchTab(e){e=e.toLowerCase();const n=this.tabs.find(a=>a.searchType===e);if(!n){console.error(`No tab ${e} found`);return}window.scrollTo(0,0),this.currentTab=n},checkIfPerformNewMainSearch(e){const n=e!==this.results.query;n&&(this.$root.$emit("updateSearchLoadingState",!0),this.performSearch(e),this.currentTab=this.tabs[0])},performNewMainSearch(e){socket.emit("mainSearch",{term:e}),this.$root.$emit("updateSearchLoadingState",!0),this.currentTab=this.tabs[0]},search(e){socket.emit("search",{term:this.results.query,type:e,start:this.results[`${e}Tab`].next,nb:30})},scrolledSearch(){if(this.currentTab.searchType==="all")return;const e=`${this.currentTab.searchType}Tab`,n=this.results[e].next<this.results[e].total;n&&this.search(this.currentTab.searchType)},saveMainSearchResult(e){console.log("show main search results");return},handleSearch(e){const{next:n,total:a,type:r,data:i}=e,s=r+"Tab";let l=0;n?l=parseInt(n.match(/index=(\d*)/)[1]):l=a,this.results[s].total!==a&&(this.results[s].total=a),this.results[s].next!==l&&(this.results[s].next=l,this.results[s].data=this.results[s].data.concat(i)),this.results[s].hasLoaded=!0},isTabLoaded(e){return this.loadedTabs.indexOf(e.searchType)!==-1||e.searchType==="all"}},watch:{performScrolledSearch(e){if(!e)return;this.scrolledSearch(e)},currentTab(e){if(this.isTabLoaded(e))return;this.search(e.searchType)}},beforeRouteEnter(e,n,a){a(r=>{r.checkIfPerformNewMainSearch(e.query.term)})},beforeRouteUpdate(e,n,a){this.checkIfPerformNewMainSearch(e.query.term),a()}});const __vue_script__$q=script$q;var __vue_render__$s=function(){var e=this,n=e.$createElement,a=e._self._c||n;return a("div",{attrs:{id:"search_tab"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:!e.showSearchTab,expression:"!showSearchTab"}]},[a("h2",[e._v(e._s(e.$t("search.startSearching")))]),e._v(" "),a("p",[e._v(e._s(e.$t("search.description")))])]),e._v(" "),a("div",{directives:[{name:"show",rawName:"v-show",value:e.showSearchTab,expression:"showSearchTab"}]},[a("BaseTabs",e._l(e.tabs,function(r){return a("BaseTab",{key:r.name,class:{active:e.currentTab.name===r.name},on:{click:function(i){return e.changeSearchTab(r.searchType)}}},[e._v(` `+e._s(r.name)+` `)])}),1),e._v(" "),a("keep-alive",[a(e.currentTab.component,{tag:"component",attrs:{viewInfo:e.getViewInfo(),"want-headers":""},on:{"add-to-queue":e.addToQueue,"change-search-tab":e.changeSearchTab}})],1)],1)])},__vue_staticRenderFns__$s=[];const __vue_inject_styles__$s=void 0,__vue_scope_id__$s=void 0,__vue_is_functional_template__$s=!1;function __vue_normalize__$s(e,n,a,r,i,s,l,c){const o=(typeof a=="function"?a.options:a)||{};return o.__file="Search.vue",o.render||(o.render=e.render,o.staticRenderFns=e.staticRenderFns,o._compiled=!0,i&&(o.functional=!0)),o._scopeId=r,o}var Search=__vue_normalize__$s({render:__vue_render__$s,staticRenderFns:__vue_staticRenderFns__$s},__vue_inject_styles__$s,__vue_script__$q,__vue_scope_id__$s,__vue_is_functional_template__$s),it$1=`<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-it" viewBox="0 0 640 480"> <g fill-rule="evenodd" stroke-width="1pt"> @@ -4623,4 +4623,4 @@ PERFORMANCE OF THIS SOFTWARE. `)]),e._v(" "),a("td",[e._v(e._s(r.artists[0].name))]),e._v(" "),a("td",[e._v(e._s(r.album.name))]),e._v(" "),a("td",[e._v(e._s(e.convertDuration(Math.floor(r.duration_ms/1e3))))]),e._v(" "),a("td",[a("input",{directives:[{name:"model",rawName:"v-model",value:r.selected,expression:"track.selected"}],staticClass:"clickable",attrs:{type:"checkbox"},domProps:{checked:Array.isArray(r.selected)?e._i(r.selected,null)>-1:r.selected},on:{change:function(s){var l=r.selected,c=s.target,o=!!c.checked;if(Array.isArray(l)){var u=null,d=e._i(l,u);c.checked?d<0&&e.$set(r,"selected",l.concat([u])):d>-1&&e.$set(r,"selected",l.slice(0,d).concat(l.slice(d+1)))}else e.$set(r,"selected",o)}}})])])})],2)]),e._v(" "),e.label?a("span",{staticStyle:{opacity:"0.4","margin-top":"8px",display:"inline-block","font-size":"13px"}},[e._v(e._s(e.label))]):e._e(),e._v(" "),a("footer",{staticClass:"bg-background-main"},[a("button",{staticClass:"mr-2 btn btn-primary",attrs:{"data-link":e.link},on:{click:function(r){return r.stopPropagation(),e.addToQueue(r)}}},[e._v(` `+e._s(""+e.$t("globals.download",{thing:e.$tc("globals.listTabs."+e.type,1)}))+` `)]),e._v(" "),a("button",{staticClass:"flex items-center btn btn-primary",attrs:{"data-link":e.selectedLinks()},on:{click:function(r){return r.stopPropagation(),e.addToQueue(r)}}},[e._v(` - `+e._s(e.$t("tracklist.downloadSelection"))),a("i",{staticClass:"ml-2 material-icons"},[e._v("file_download")])])])])},__vue_staticRenderFns__$v=[function(){var e=this,n=e.$createElement,a=e._self._c||n;return a("th",[a("i",{staticClass:"material-icons"},[e._v("music_note")])])},function(){var e=this,n=e.$createElement,a=e._self._c||n;return a("th",[a("i",{staticClass:"material-icons"},[e._v("timer")])])},function(){var e=this,n=e.$createElement,a=e._self._c||n;return a("td",[a("div",{staticClass:"table__cell-content table__cell-content--vertical-center",staticStyle:{opacity:"0.54"}},[a("i",{staticClass:"material-icons"},[e._v("album")])])])}];const __vue_inject_styles__$v=void 0,__vue_scope_id__$v=void 0,__vue_is_functional_template__$v=!1;function __vue_normalize__$v(e,n,a,r,i,s,l,c){const o=(typeof a=="function"?a.options:a)||{};return o.__file="Tracklist.vue",o.render||(o.render=e.render,o.staticRenderFns=e.staticRenderFns,o._compiled=!0,i&&(o.functional=!0)),o._scopeId=r,o}var Tracklist=__vue_normalize__$v({render:__vue_render__$v,staticRenderFns:__vue_staticRenderFns__$v},__vue_inject_styles__$v,__vue_script__$t,__vue_scope_id__$v,__vue_is_functional_template__$v);Vue.use(VueRouter);const routes=[{path:"/",name:"Home",component:Home,meta:{notKeepAlive:!0}},{path:"/tracklist/:type/:id",name:"Tracklist",component:Tracklist},{path:"/artist/:id",name:"Artist",component:Artist,meta:{notKeepAlive:!0}},{path:"/album/:id",name:"Album",component:Tracklist},{path:"/playlist/:id",name:"Playlist",component:Tracklist},{path:"/spotify-playlist/:id",name:"Spotify Playlist",component:Tracklist},{path:"/charts",name:"Charts",component:Charts,meta:{notKeepAlive:!0}},{path:"/favorites",name:"Favorites",component:Favorites,meta:{notKeepAlive:!0}},{path:"/errors",name:"Errors",component:Errors},{path:"/link-analyzer",name:"Link Analyzer",component:LinkAnalyzer},{path:"/about",name:"About",component:About},{path:"/info-arl",name:"ARL",component:InfoArl},{path:"/info-spotify",name:"Spotify Features",component:InfoSpotifyFeatures},{path:"/settings",name:"Settings",component:Settings},{path:"/search",name:"Search",component:Search},{path:"*",component:Home}],router=new VueRouter({mode:"history",routes,scrollBehavior(e,n,a){return{x:0,y:0}}});router.beforeEach((e,n,a)=>{let r=null;switch(e.name){case"Tracklist":r={type:e.params.type,id:e.params.id};break;case"Album":r={type:"album",id:e.params.id};break;case"Playlist":r={type:"playlist",id:e.params.id};break;case"Spotify Playlist":r={type:"spotifyplaylist",id:e.params.id};break}r&&socket.emit("getTracklist",r),a()});function startApp(){new Vue({store,router,i18n,render:e=>e(App)}).$mount("#app")}function initClient(){store.dispatch("setClientMode",!0),setClientModeKeyBindings()}document.addEventListener("DOMContentLoaded",startApp),window.addEventListener("pywebviewready",initClient),document.addEventListener("paste",e=>{if(e.target.localName==="input")return;let n=e.clipboardData.getData("Text");if(isValidURL(n))router.currentRoute.name==="Link Analyzer"?socket.emit("analyzeLink",n):sendAddToQueue(n);else{let a=document.querySelector("#searchbar");a.select(),a.setSelectionRange(0,99999)}});function setClientModeKeyBindings(){document.addEventListener("keyup",e=>{e.altKey&&e.key==="ArrowLeft"&&router.back(),e.altKey&&e.key==="ArrowRight"&&router.forward()})}socket.on("message",function(e){console.log(e)}),socket.on("logging_in",function(){toast(i18n.t("toasts.loggingIn"),"loading",!1,"login-toast")}),socket.on("init_autologin",function(){let e=localStorage.getItem("arl"),n=localStorage.getItem("accountNum");e&&(e=e.trim(),n!=0?socket.emit("login",e,!0,n):socket.emit("login",e))}),socket.on("logged_in",function(e){const{status:n,user:a}=e;switch(n){case 1:case 3:toast(i18n.t("toasts.loggedIn"),"done",!0,"login-toast"),store.dispatch("login",e);break;case 2:toast(i18n.t("toasts.alreadyLogged"),"done",!0,"login-toast"),store.dispatch("setUser",a);break;case 0:toast(i18n.t("toasts.loginFailed"),"close",!0,"login-toast"),store.dispatch("removeARL");break;case-1:toast(i18n.t("toasts.deezerNotAvailable"),"close",!0,"login-toast");return}}),socket.on("logged_out",function(){toast(i18n.t("toasts.loggedOut"),"done",!0,"login-toast"),store.dispatch("logout")}),socket.on("restoringQueue",function(){toast(i18n.t("toasts.restoringQueue"),"loading",!1,"restoring_queue")}),socket.on("cancellingCurrentItem",function(e){toast(i18n.t("toasts.cancellingCurrentItem"),"loading",!1,"cancelling_"+e)}),socket.on("currentItemCancelled",function(e){toast(i18n.t("toasts.currentItemCancelled"),"done",!0,"cancelling_"+e)}),socket.on("startAddingArtist",function(e){toast(i18n.t("toasts.startAddingArtist",{artist:e.name}),"loading",!1,"artist_"+e.id)}),socket.on("finishAddingArtist",function(e){toast(i18n.t("toasts.finishAddingArtist",{artist:e.name}),"done",!0,"artist_"+e.id)}),socket.on("startConvertingSpotifyPlaylist",function(e){toast(i18n.t("toasts.startConvertingSpotifyPlaylist"),"loading",!1,"spotifyplaylist_"+e)}),socket.on("finishConvertingSpotifyPlaylist",function(e){toast(i18n.t("toasts.finishConvertingSpotifyPlaylist"),"done",!0,"spotifyplaylist_"+e)}),socket.on("errorMessage",function(e){toast(e,"error")}),socket.on("queueError",function(e){e.errid?toast(e.link+" - "+i18n.t(`errors.ids.${e.errid}`),"error"):toast(e.link+" - "+e.error,"error")}),socket.on("alreadyInQueue",function(e){toast(i18n.t("toasts.alreadyInQueue",{item:e.title}),"playlist_add_check")}),socket.on("loginNeededToDownload",function(e){toast(i18n.t("toasts.loginNeededToDownload"),"report")}),socket.on("startGeneratingItems",function(e){toast(i18n.t("toasts.startGeneratingItems",{n:e.total}),"loading",!1,"batch_"+e.uuid)}),socket.on("finishGeneratingItems",function(e){toast(i18n.t("toasts.finishGeneratingItems",{n:e.total}),"done",!0,"batch_"+e.uuid)}); + `+e._s(e.$t("tracklist.downloadSelection"))),a("i",{staticClass:"ml-2 material-icons"},[e._v("file_download")])])])])},__vue_staticRenderFns__$v=[function(){var e=this,n=e.$createElement,a=e._self._c||n;return a("th",[a("i",{staticClass:"material-icons"},[e._v("music_note")])])},function(){var e=this,n=e.$createElement,a=e._self._c||n;return a("th",[a("i",{staticClass:"material-icons"},[e._v("timer")])])},function(){var e=this,n=e.$createElement,a=e._self._c||n;return a("td",[a("div",{staticClass:"table__cell-content table__cell-content--vertical-center",staticStyle:{opacity:"0.54"}},[a("i",{staticClass:"material-icons"},[e._v("album")])])])}];const __vue_inject_styles__$v=void 0,__vue_scope_id__$v=void 0,__vue_is_functional_template__$v=!1;function __vue_normalize__$v(e,n,a,r,i,s,l,c){const o=(typeof a=="function"?a.options:a)||{};return o.__file="Tracklist.vue",o.render||(o.render=e.render,o.staticRenderFns=e.staticRenderFns,o._compiled=!0,i&&(o.functional=!0)),o._scopeId=r,o}var Tracklist=__vue_normalize__$v({render:__vue_render__$v,staticRenderFns:__vue_staticRenderFns__$v},__vue_inject_styles__$v,__vue_script__$t,__vue_scope_id__$v,__vue_is_functional_template__$v);Vue.use(VueRouter);const routes=[{path:"/",name:"Home",component:Home,meta:{notKeepAlive:!0}},{path:"/tracklist/:type/:id",name:"Tracklist",component:Tracklist},{path:"/artist/:id",name:"Artist",component:Artist,meta:{notKeepAlive:!0}},{path:"/album/:id",name:"Album",component:Tracklist},{path:"/playlist/:id",name:"Playlist",component:Tracklist},{path:"/spotify-playlist/:id",name:"Spotify Playlist",component:Tracklist},{path:"/charts",name:"Charts",component:Charts,meta:{notKeepAlive:!0}},{path:"/favorites",name:"Favorites",component:Favorites,meta:{notKeepAlive:!0}},{path:"/errors",name:"Errors",component:Errors},{path:"/link-analyzer",name:"Link Analyzer",component:LinkAnalyzer},{path:"/about",name:"About",component:About},{path:"/info-arl",name:"ARL",component:InfoArl},{path:"/info-spotify",name:"Spotify Features",component:InfoSpotifyFeatures},{path:"/settings",name:"Settings",component:Settings},{path:"/search",name:"Search",component:Search,meta:{notKeepAlive:!0}},{path:"*",component:Home}],router=new VueRouter({mode:"history",routes,scrollBehavior(e,n,a){return{x:0,y:0}}});router.beforeEach((e,n,a)=>{let r=null;switch(e.name){case"Tracklist":r={type:e.params.type,id:e.params.id};break;case"Album":r={type:"album",id:e.params.id};break;case"Playlist":r={type:"playlist",id:e.params.id};break;case"Spotify Playlist":r={type:"spotifyplaylist",id:e.params.id};break}r&&socket.emit("getTracklist",r),a()});function startApp(){new Vue({store,router,i18n,render:e=>e(App)}).$mount("#app")}function initClient(){store.dispatch("setClientMode",!0),setClientModeKeyBindings()}document.addEventListener("DOMContentLoaded",startApp),window.addEventListener("pywebviewready",initClient),document.addEventListener("paste",e=>{if(e.target.localName==="input")return;let n=e.clipboardData.getData("Text");if(isValidURL(n))router.currentRoute.name==="Link Analyzer"?socket.emit("analyzeLink",n):sendAddToQueue(n);else{let a=document.querySelector("#searchbar");a.select(),a.setSelectionRange(0,99999)}});function setClientModeKeyBindings(){document.addEventListener("keyup",e=>{e.altKey&&e.key==="ArrowLeft"&&router.back(),e.altKey&&e.key==="ArrowRight"&&router.forward()})}socket.on("message",function(e){console.log(e)}),socket.on("logging_in",function(){toast(i18n.t("toasts.loggingIn"),"loading",!1,"login-toast")}),socket.on("init_autologin",function(){let e=localStorage.getItem("arl"),n=localStorage.getItem("accountNum");e&&(e=e.trim(),n!=0?socket.emit("login",e,!0,n):socket.emit("login",e))}),socket.on("logged_in",function(e){const{status:n,user:a}=e;switch(n){case 1:case 3:toast(i18n.t("toasts.loggedIn"),"done",!0,"login-toast"),store.dispatch("login",e);break;case 2:toast(i18n.t("toasts.alreadyLogged"),"done",!0,"login-toast"),store.dispatch("setUser",a);break;case 0:toast(i18n.t("toasts.loginFailed"),"close",!0,"login-toast"),store.dispatch("removeARL");break;case-1:toast(i18n.t("toasts.deezerNotAvailable"),"close",!0,"login-toast");return}}),socket.on("logged_out",function(){toast(i18n.t("toasts.loggedOut"),"done",!0,"login-toast"),store.dispatch("logout")}),socket.on("restoringQueue",function(){toast(i18n.t("toasts.restoringQueue"),"loading",!1,"restoring_queue")}),socket.on("cancellingCurrentItem",function(e){toast(i18n.t("toasts.cancellingCurrentItem"),"loading",!1,"cancelling_"+e)}),socket.on("currentItemCancelled",function(e){toast(i18n.t("toasts.currentItemCancelled"),"done",!0,"cancelling_"+e)}),socket.on("startAddingArtist",function(e){toast(i18n.t("toasts.startAddingArtist",{artist:e.name}),"loading",!1,"artist_"+e.id)}),socket.on("finishAddingArtist",function(e){toast(i18n.t("toasts.finishAddingArtist",{artist:e.name}),"done",!0,"artist_"+e.id)}),socket.on("startConvertingSpotifyPlaylist",function(e){toast(i18n.t("toasts.startConvertingSpotifyPlaylist"),"loading",!1,"spotifyplaylist_"+e)}),socket.on("finishConvertingSpotifyPlaylist",function(e){toast(i18n.t("toasts.finishConvertingSpotifyPlaylist"),"done",!0,"spotifyplaylist_"+e)}),socket.on("errorMessage",function(e){toast(e,"error")}),socket.on("queueError",function(e){e.errid?toast(e.link+" - "+i18n.t(`errors.ids.${e.errid}`),"error"):toast(e.link+" - "+e.error,"error")}),socket.on("alreadyInQueue",function(e){toast(i18n.t("toasts.alreadyInQueue",{item:e.title}),"playlist_add_check")}),socket.on("loginNeededToDownload",function(e){toast(i18n.t("toasts.loginNeededToDownload"),"report")}),socket.on("startGeneratingItems",function(e){toast(i18n.t("toasts.startGeneratingItems",{n:e.total}),"loading",!1,"batch_"+e.uuid)}),socket.on("finishGeneratingItems",function(e){toast(i18n.t("toasts.finishGeneratingItems",{n:e.total}),"done",!0,"batch_"+e.uuid)}); diff --git a/src/components/TheSearchBar.vue b/src/components/TheSearchBar.vue index c37a81f..724cbc2 100644 --- a/src/components/TheSearchBar.vue +++ b/src/components/TheSearchBar.vue @@ -14,7 +14,7 @@ :placeholder="$t('searchbar')" autofocus ref="searchbar" - @keyup="handleSearchBarKeyup($event)" + @keyup="performSearch($event)" /> <!-- @keyup.enter.exact="onEnter" @keyup.ctrl.enter="onCTRLEnter" --> @@ -98,14 +98,15 @@ input[type='search']::-webkit-search-cancel-button { </style> <script> +import { defineComponent, ref } from '@vue/composition-api' import { isValidURL } from '@/utils/utils' import { sendAddToQueue } from '@/utils/downloads' import { socket } from '@/utils/socket' -export default { - data() { +export default defineComponent({ + setup() { return { - lastTextSearch: '' + lastTextSearch: ref('') } }, created() { @@ -132,52 +133,49 @@ export default { }) }, methods: { - test() { - console.log('test passato') - }, - async handleSearchBarKeyup(keyEvent) { + async performSearch(keyEvent) { let isEnterPressed = keyEvent.keyCode === 13 - // If not enter do nothing if (!isEnterPressed) return let term = this.$refs.searchbar.value let isEmptySearch = term === '' - // If empty do nothing if (isEmptySearch) return let isSearchingURL = isValidURL(term) let isCtrlPressed = keyEvent.ctrlKey let isShowingAnalyzer = this.$route.name === 'Link Analyzer' let isShowingSearch = this.$route.name === 'Search' - let sameAsLastSearch = term === this.lastTextSearch + let isSameAsLastSearch = term === this.lastTextSearch if (isSearchingURL) { if (isCtrlPressed) { this.$root.$emit('QualityModal:open', term) - } else { - if (isShowingAnalyzer) { - socket.emit('analyzeLink', term) - } else { - // ? Open downloads tab ? - sendAddToQueue(term) - } - } - } else { - if (isShowingSearch && sameAsLastSearch) { - // ? Has this any sense since we're not performing any call? - // this.$root.$emit('mainSearch:updateResults', term) return } + if (isShowingAnalyzer) { + socket.emit('analyzeLink', term) + return + } + + // ? Open downloads tab maybe? + sendAddToQueue(term) + } else { + // The user is searching a normal string + if (isShowingSearch && isSameAsLastSearch) return + if (!isShowingSearch) { await this.$router.push({ - name: 'Search' + name: 'Search', + query: { + term + } }) } - if (!sameAsLastSearch) { + if (!isSameAsLastSearch) { this.$root.$emit('updateSearchLoadingState', true) this.lastTextSearch = term } @@ -186,7 +184,7 @@ export default { } } } -} +}) </script> diff --git a/src/components/pages/Search.vue b/src/components/pages/Search.vue index 6e11c8a..d47cb63 100644 --- a/src/components/pages/Search.vue +++ b/src/components/pages/Search.vue @@ -10,7 +10,7 @@ <BaseTab v-for="tab in tabs" :key="tab.name" - @click="currentTab = tab" + @click="changeSearchTab(tab.searchType)" :class="{ active: currentTab.name === tab.name }" > {{ tab.name }} @@ -45,10 +45,12 @@ import { numberWithDots, convertDuration } from '@/utils/utils' import { formatSingleTrack, formatAlbums, formatArtist, formatPlaylist } from '@/data/search' import { standardizeData } from '@/data/standardize' +import { computed, defineComponent, reactive, ref, toRefs, watch, watchEffect } from '@vue/composition-api' +import { useMainSearch } from '@/use/main-search' const resetObj = { data: [], next: 0, total: 0, hasLoaded: false } -export default { +export default defineComponent({ components: { BaseLoadingPlaceholder, BaseTabs, @@ -60,11 +62,8 @@ export default { required: false } }, - data() { - const $t = this.$t.bind(this) - const $tc = this.$tc.bind(this) - - return { + setup(props, ctx) { + const state = reactive({ currentTab: { name: '', searchType: '', @@ -72,6 +71,69 @@ export default { viewInfo: '', formatFunc: () => {} }, + results: { + query: '', + allTab: { + ORDER: [], + TOP_RESULT: [], + ALBUM: { + hasLoaded: false + }, + ARTIST: { + hasLoaded: false + }, + TRACK: { + hasLoaded: false + }, + PLAYLIST: { + hasLoaded: false + } + }, + trackTab: { ...resetObj }, + albumTab: { ...resetObj }, + artistTab: { ...resetObj }, + playlistTab: { ...resetObj } + } + }) + const { searchResult, performSearch } = useMainSearch() + + watch(searchResult, newValue => { + console.log('show main search results watcher') + // Hide loading placeholder + ctx.root.$emit('updateSearchLoadingState', false) + + state.results.query = searchResult.QUERY + + state.results.allTab = searchResult + state.results.allTab.TRACK.hasLoaded = true + state.results.allTab.ALBUM.hasLoaded = true + state.results.allTab.ARTIST.hasLoaded = true + state.results.allTab.PLAYLIST.hasLoaded = true + + state.results.trackTab = { ...resetObj } + state.results.albumTab = { ...resetObj } + state.results.artistTab = { ...resetObj } + state.results.playlistTab = { ...resetObj } + }) + + return { + ...toRefs(state), + searchResult, + performSearch + } + }, + data() { + const $t = this.$t.bind(this) + const $tc = this.$tc.bind(this) + + return { + // currentTab: { + // name: '', + // searchType: '', + // component: {}, + // viewInfo: '', + // formatFunc: () => {} + // }, tabs: [ { name: $t('globals.listTabs.all'), @@ -107,30 +169,30 @@ export default { viewInfo: 'playlistTab', formatFunc: formatPlaylist } - ], - results: { - query: '', - allTab: { - ORDER: [], - TOP_RESULT: [], - ALBUM: { - hasLoaded: false - }, - ARTIST: { - hasLoaded: false - }, - TRACK: { - hasLoaded: false - }, - PLAYLIST: { - hasLoaded: false - } - }, - trackTab: { ...resetObj }, - albumTab: { ...resetObj }, - artistTab: { ...resetObj }, - playlistTab: { ...resetObj } - } + ] + // results: { + // query: '', + // allTab: { + // ORDER: [], + // TOP_RESULT: [], + // ALBUM: { + // hasLoaded: false + // }, + // ARTIST: { + // hasLoaded: false + // }, + // TRACK: { + // hasLoaded: false + // }, + // PLAYLIST: { + // hasLoaded: false + // } + // }, + // trackTab: { ...resetObj }, + // albumTab: { ...resetObj }, + // artistTab: { ...resetObj }, + // playlistTab: { ...resetObj } + // } } }, computed: { @@ -158,7 +220,6 @@ export default { }, mounted() { this.$root.$on('mainSearch:showNewResults', this.checkIfPerformNewMainSearch) - this.$root.$on('mainSearch:updateResults', this.checkIfUpdateResults) socket.on('mainSearch', this.saveMainSearchResult) socket.on('search', this.handleSearch) @@ -190,12 +251,17 @@ export default { window.scrollTo(0, 0) this.currentTab = newTab + // this.lastTab = newTab }, checkIfPerformNewMainSearch(searchTerm) { - let needToPerformNewMainSearch = searchTerm !== this.results.query + const hasTermChanged = searchTerm !== this.results.query - if (needToPerformNewMainSearch) { - this.performNewMainSearch(searchTerm) + if (hasTermChanged) { + // this.performNewMainSearch(searchTerm) + this.$root.$emit('updateSearchLoadingState', true) + this.performSearch(searchTerm) + this.currentTab = this.tabs[0] + // this.currentTab = this.lastTab } }, performNewMainSearch(term) { @@ -205,15 +271,6 @@ export default { this.$root.$emit('updateSearchLoadingState', true) this.currentTab = this.tabs[0] }, - // ! Updates search only if the search term is the same as before AND we're not in the ALL tab. Wtf - checkIfUpdateResults(term) { - let needToUpdateSearch = term === this.results.query && this.currentTab.searchType !== 'all' - - if (needToUpdateSearch) { - this.results[this.currentTab.searchType + 'Tab'] = { ...resetObj } - this.search(this.currentTab.searchType) - } - }, search(type) { socket.emit('search', { term: this.results.query, @@ -233,6 +290,8 @@ export default { } }, saveMainSearchResult(searchResult) { + console.log('show main search results') + return // Hide loading placeholder this.$root.$emit('updateSearchLoadingState', false) @@ -287,8 +346,17 @@ export default { this.search(newTab.searchType) } + }, + beforeRouteEnter(to, from, next) { + next(vm => { + vm.checkIfPerformNewMainSearch(to.query.term) + }) + }, + beforeRouteUpdate(to, from, next) { + this.checkIfPerformNewMainSearch(to.query.term) + next() } -} +}) </script> <style> diff --git a/src/router.js b/src/router.js index e7e5473..96ea8d6 100644 --- a/src/router.js +++ b/src/router.js @@ -104,7 +104,10 @@ const routes = [ { path: '/search', name: 'Search', - component: Search + component: Search, + meta: { + notKeepAlive: true + } }, // 404 client side { diff --git a/src/use/main-search.js b/src/use/main-search.js new file mode 100644 index 0000000..3930079 --- /dev/null +++ b/src/use/main-search.js @@ -0,0 +1,47 @@ +import { ref, computed } from '@vue/composition-api' +import { socket } from '@/utils/socket' + +const searchResult = ref({}) +const lastTermSearched = ref(null) + +function performSearch(searchTerm) { + if (searchTerm === lastTermSearched.value) return + + // TODO Handle multiple, subsequent calls + // TODO Caching + socket.emit('mainSearch', { term: searchTerm }) + + socket.on('mainSearch', data => { + lastTermSearched.value = searchTerm + searchResult.value = data + + socket.off('mainSearch') + }) +} + +export function useMainSearch() { + return { + searchResult, + performSearch + } +} + +// socket.on('mainSearch', saveMainSearchResult) + +// saveMainSearchResult(searchResult) { +// // Hide loading placeholder +// this.$root.$emit('updateSearchLoadingState', false) + +// this.results.query = searchResult.QUERY + +// this.results.allTab = searchResult +// this.results.allTab.TRACK.hasLoaded = true +// this.results.allTab.ALBUM.hasLoaded = true +// this.results.allTab.ARTIST.hasLoaded = true +// this.results.allTab.PLAYLIST.hasLoaded = true + +// this.results.trackTab = { ...resetObj } +// this.results.albumTab = { ...resetObj } +// this.results.artistTab = { ...resetObj } +// this.results.playlistTab = { ...resetObj } +// },