chat-panel-fit.js

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["live/chat-panel-fit"]=t():e["live/chat-panel-fit"]=t()}(globalThis,(()=>(()=>{var e,t,n={640:(e,t,n)=>{var r=n(218)((function(e){return e[1]}));r.push([e.id,"html.custom-width-dragging .player-full-win:not(.hide-aside-area) .player-ctnr {\n  z-index: 1001 !important;\n}\nhtml.custom-width-dragging .player-full-win:not(.hide-aside-area) .player-ctnr .head-info-section {\n  display: none !important;\n}\n.aside-area-toggle-btn {\n  height: 90px;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.chat-panel-fit-dragger {\n  pointer-events: none;\n  touch-action: none;\n  height: 100%;\n  width: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n  display: flex;\n  align-items: stretch;\n  flex-direction: column;\n}\n.player-full-win:not(.hide-aside-area) .chat-panel-fit-dragger {\n  pointer-events: initial;\n}\n.chat-panel-fit-dragger-bar {\n  opacity: 0;\n  cursor: ew-resize;\n  transition: opacity 0.2s ease-out;\n  flex-grow: 1;\n  width: 8px;\n  height: 100%;\n  background-color: var(--theme-color);\n  transform: translateX(-8px);\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n}\nhtml.custom-width-dragging .chat-panel-fit-dragger-bar, .chat-panel-fit-dragger-bar:hover {\n  opacity: 1;\n}\n.chat-panel-fit-dragger-preview-area {\n  opacity: 0;\n  display: flex;\n  align-items: stretch;\n  flex-direction: column;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  height: 100%;\n  font-size: 16px;\n  background-color: #fff;\n  color: #000;\n}\nbody.dark .chat-panel-fit-dragger-preview-area {\n  background-color: #222;\n  color: #eee;\n}\n.chat-panel-fit-dragger-preview-area-background {\n  flex-grow: 1;\n  background-color: var(--theme-color-10);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chat-panel-fit-dragger.dragging .chat-panel-fit-dragger-preview-area {\n  opacity: 1;\n}",""]),e.exports=r},50:(e,t,n)=>{var r=n(218)((function(e){return e[1]}));r.push([e.id,".player-full-win:not(.hide-aside-area) .live-room-app .aside-area {\n  width: var(--live-chat-panel-width, 302px) !important;\n}\n.player-full-win:not(.hide-aside-area) .live-room-app .player-section {\n  width: calc(100% - var(--live-chat-panel-width, 302px)) !important;\n}",""]),e.exports=r},218:e=>{"use strict";
// eslint-disable-next-line func-names
e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=e(t);return t[2]?"@media ".concat(t[2]," {").concat(n,"}"):n})).join("")},
// eslint-disable-next-line func-names
t.i=function(e,n,r){"string"==typeof e&&(
// eslint-disable-next-line no-param-reassign
e=[[null,e,""]]);var o={};if(r)for(var i=0;i<this.length;i++){
// eslint-disable-next-line prefer-destructuring
var a=this[i][0];null!=a&&(o[a]=!0)}for(var s=0;s<e.length;s++){var l=[].concat(e[s]);r&&o[l[0]]||(n&&(l[2]?l[2]="".concat(n," and ").concat(l[2]):l[2]=n),t.push(l))}},t}},272:(e,t,n)=>{"use strict";n.d(t,{W:()=>a,a:()=>i});var r=n(952),o=n(605);const i=190,a=(0,r.defineOptionsMetadata)({customWidth:{hidden:!0,defaultValue:0},maxWidth:{defaultValue:1e3,displayName:"侧边栏最大宽度 (px)",validator:(0,o.getNumberValidator)(i)}})},507:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>m});var r=function(){var e=this,t=e._self._c,n=e._self._setupProxy;return t("div",{ref:"draggerElement",staticClass:"chat-panel-fit-dragger",class:{dragging:n.isDragging},style:{transform:`translateX(${-n.movement}px)`},on:{pointerdown:n.startDragging,pointermove:n.handlePointerMove,dblclick:n.resetCustomWidth}},[t("div",{staticClass:"chat-panel-fit-dragger-bar"}),e._v(" "),t("div",{staticClass:"chat-panel-fit-dragger-preview-area",style:{width:`${n.previewWidth}px`}},[t("div",{staticClass:"chat-panel-fit-dragger-preview-area-background"},[e._v("\n      "+e._s(n.previewWidth.toFixed(1))+"px\n    ")])])])};r._withStripped=!0;const o=globalThis.Vue;var i=n(986),a=n(272);const s=(0,o.defineComponent)({__name:"ChatPanelFitDragger",setup(e){const t=(0,o.reactive)((0,i.getComponentSettings)("liveChatPanelFit").options);(0,o.onBeforeMount)((()=>{0!==t.customWidth&&document.documentElement.style.setProperty("--live-chat-panel-width",`${t.customWidth}px`)}));const n=()=>parseFloat(document.documentElement.style.getPropertyValue("--live-chat-panel-width")),r=(0,o.ref)(),s=(0,o.ref)(0),l=(0,o.ref)(0),d=(0,o.computed)((()=>t.customWidth?t.customWidth+l.value:n())),c=(0,o.ref)(!1);return{__sfc:!0,options:t,getAutoWidth:n,draggerElement:r,startPoint:s,movement:l,previewWidth:d,isDragging:c,resetCustomWidth:()=>{t.customWidth=0,window.dispatchEvent(new CustomEvent("customWidthReset"))},handlePointerMove:e=>{if(!c.value)return;const n=s.value-e.screenX;l.value=lodash.clamp(t.customWidth+n,a.a,t.maxWidth)-t.customWidth},startDragging:e=>{c.value=!0,s.value=e.screenX,0===t.customWidth&&(t.customWidth=n()),r.value.setPointerCapture(e.pointerId),document.documentElement.style.cursor="ew-resize",document.documentElement.classList.add("custom-width-dragging"),document.documentElement.addEventListener("pointerup",(()=>{if(document.documentElement.style.cursor="",document.documentElement.classList.remove("custom-width-dragging"),c.value=!1,s.value=0,!l.value)return;const e=d.value;t.customWidth=e,l.value=0,document.documentElement.style.setProperty("--live-chat-panel-width",`${e}px`)}),{once:!0})}}}}),l=s;var d=n(332),c=n.n(d),u=n(640),p=n.n(u),f={insert:"head",singleton:!1};c()(p(),f);p().locals;var h=function(e,t,n,r,o,i,a,s){var l,d="function"==typeof e?e.options:e;if(t&&(d.render=t,d.staticRenderFns=n,d._compiled=!0),r&&(d.functional=!0),i&&(d._scopeId="data-v-"+i),a?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),o&&o.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(a)},d._ssrRegister=l):o&&(l=s?function(){o.call(this,(d.functional?this.parent:this).$root.$options.shadowRoot)}:o),l)if(d.functional){d._injectStyles=l;var c=d.render;d.render=function(e,t){return l.call(t),c(e,t)}}else{var u=d.beforeCreate;d.beforeCreate=u?[].concat(u,l):[l]}return{exports:e,options:d}}(l,r,[],!1,null,null,null);const m=h.exports},332:(e,t,n)=>{"use strict";var r,o=function(){return void 0===r&&(
// @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
// @see https://github.com/webpack-contrib/style-loader/issues/177
r=Boolean(window&&document&&document.all&&!window.atob)),r},i=function(){var e={};return function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}e[t]=n}return e[t]}}(),a=[];function s(e){for(var t=-1,n=0;n<a.length;n++)if(a[n].identifier===e){t=n;break}return t}function l(e,t){for(var n={},r=[],o=0;o<e.length;o++){var i=e[o],l=t.base?i[0]+t.base:i[0],d=n[l]||0,c="".concat(l," ").concat(d);n[l]=d+1;var u=s(c),p={css:i[1],media:i[2],sourceMap:i[3]};-1!==u?(a[u].references++,a[u].updater(p)):a.push({identifier:c,updater:v(p,t),references:1}),r.push(c)}return r}function d(e){var t=document.createElement("style"),r=e.attributes||{};if(void 0===r.nonce){var o=n.nc;o&&(r.nonce=o)}if(Object.keys(r).forEach((function(e){t.setAttribute(e,r[e])})),"function"==typeof e.insert)e.insert(t);else{var a=i(e.insert||"head");if(!a)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");a.appendChild(t)}return t}var c,u=(c=[],function(e,t){return c[e]=t,c.filter(Boolean).join("\n")});function p(e,t,n,r){var o=n?"":r.media?"@media ".concat(r.media," {").concat(r.css,"}"):r.css;if(e.styleSheet)e.styleSheet.cssText=u(t,o);else{var i=document.createTextNode(o),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(i,a[t]):e.appendChild(i)}}function f(e,t,n){var r=n.css,o=n.media,i=n.sourceMap;if(o?e.setAttribute("media",o):e.removeAttribute("media"),i&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}var h=null,m=0;function v(e,t){var n,r,o;if(t.singleton){var i=m++;n=h||(h=d(t)),r=p.bind(null,n,i,!1),o=p.bind(null,n,i,!0)}else n=d(t),r=f.bind(null,n,t),o=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)};return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else o()}}e.exports=function(e,t){(t=t||{}).singleton||"boolean"==typeof t.singleton||(t.singleton=o());var n=l(e=e||[],t);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var r=0;r<n.length;r++){var o=s(n[r]);a[o].references--}for(var i=l(e,t),d=0;d<n.length;d++){var c=s(n[d]);0===a[c].references&&(a[c].updater(),a.splice(c,1))}n=i}}}},498:(e,t,n)=>{var r=n(50);r&&r.__esModule&&(r=r.default),e.exports="string"==typeof r?r:r.toString()},427:e=>{function t(e){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}t.keys=()=>[],t.resolve=t,t.id=427,e.exports=t},513:e=>{"use strict";e.exports="在直播网页全屏时, 自动调整侧边栏的宽度, 使得视频区域的比例和视频源相匹配, 达到无黑边的效果.\n如果在侧边栏的边缘拖动, 可以自定义侧边栏的固定宽度, 双击边缘可以还原到自动宽度.\n\n- `侧边栏最大宽度 (px)`: 限制侧边栏可被拉伸到的最大宽度. (最小宽度固定为 190px, 再小的话布局就要出问题了)\n\n> 注意, 由于有最大宽度和最小宽度的限制, 部分窗口尺寸下仍然无法做到无黑边.\n"},952:e=>{"use strict";e.exports=coreApis.componentApis.define},986:e=>{"use strict";e.exports=coreApis.settings},605:e=>{"use strict";e.exports=coreApis.utils}},r={};function o(e){var t=r[e];if(void 0!==t)return t.exports;var i=r[e]={id:e,exports:{}};return n[e](i,i.exports,o),i.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,o.t=function(n,r){if(1&r&&(n=this(n)),8&r)return n;if("object"==typeof n&&n){if(4&r&&n.__esModule)return n;if(16&r&&"function"==typeof n.then)return n}var i=Object.create(null);o.r(i);var a={};e=e||[null,t({}),t([]),t(t)];for(var s=2&r&&n;"object"==typeof s&&!~e.indexOf(s);s=t(s))Object.getOwnPropertyNames(s).forEach((e=>a[e]=()=>n[e]));return a.default=()=>n,o.d(i,a),i},o.d=(e,t)=>{for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return(()=>{"use strict";o.d(i,{component:()=>m});var e=o(952),t=o(986);const n=coreApis.spinQuery;var r=o(605);const a=coreApis.utils.log,s=coreApis.utils.urls;var l=o(272);const d="liveChatPanelFit",c=(0,a.useScopedConsole)(d),u=()=>{const{maxWidth:e,customWidth:n}=(0,t.getComponentSettings)(d).options;if(0!==n)return;const r=dq(".live-player-ctnr video");if(!r)return;const o=r.videoWidth,i=r.videoHeight;if(0===o||0===i)return;const{innerWidth:a,innerHeight:s}=window,u=a-o*s/i;c.log({liveChatPanelWidth:u}),document.documentElement.style.setProperty("--live-chat-panel-width",`${lodash.clamp(u,l.a,e)}px`)},p=lodash.debounce(u,200);let f;const h=async()=>{(0,t.addComponentListener)("liveChatPanelFit.targetRatio",u),(0,t.addComponentListener)("liveChatPanelFit.maxWidth",u),window.addEventListener("customWidthReset",u),window.addEventListener("resize",p);if(!await(0,n.sq)((()=>dq(".live-player-ctnr video")),(e=>null!==e&&e.readyState!==HTMLMediaElement.HAVE_NOTHING)))return void c.log("未找到 video 元素");u();const e=await(0,n.select)(".aside-area-toggle-btn");if(!e)return void c.log("未找到侧边栏按钮");const{default:i}=await Promise.resolve().then(o.bind(o,507));f=(0,r.mountVueComponent)(i),e.insertAdjacentElement("afterend",f.$el)},m=(0,e.defineComponentMetadata)({name:d,displayName:"直播间网页全屏自适应",tags:[componentsTags.live,componentsTags.style],urlInclude:[...s.liveUrls],entry:h,reload:h,unload:()=>{(0,t.removeComponentListener)("liveChatPanelFit.targetRatio",u),(0,t.removeComponentListener)("liveChatPanelFit.maxWidth",u),window.removeEventListener("customWidthReset",u),window.removeEventListener("resize",p),document.documentElement.style.removeProperty("--live-chat-panel-width"),f&&(f.$el.remove(),f.$destroy(),f=void 0)},instantStyles:[{name:d,style:()=>Promise.resolve().then(o.t.bind(o,498,23)),important:!0}],options:l.W,commitHash:"3d78bf7c9ed83833538171f09a159f6b91407440",coreVersion:"2.8.5",description:(()=>{const e=o(427);return{...Object.fromEntries(e.keys().map((t=>[t.match(/index\.(.+)\.md$/)[1],e(t)]))),"zh-CN":()=>Promise.resolve().then(o.t.bind(o,513,17)).then((e=>e.default))}})()})})(),i=i.component})()));