From de5e8951e4f399c54b41faaf20fdab7c096632e7 Mon Sep 17 00:00:00 2001 From: Hamm Date: Tue, 11 May 2021 23:26:02 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=9E=E9=80=80=20'Pull=20Request=20!4=20:?= =?UTF-8?q?=20=E6=B7=BB=E5=8A=A0=E9=A2=91=E8=B0=B1=E6=98=BE=E7=A4=BA'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 84 ++----- src/assets/Spectrum.js | 409 ------------------------------- src/components/SystemSetting.vue | 50 +--- 3 files changed, 27 insertions(+), 516 deletions(-) delete mode 100644 src/assets/Spectrum.js diff --git a/src/App.vue b/src/App.vue index 308926d..45a899b 100755 --- a/src/App.vue +++ b/src/App.vue @@ -246,7 +246,6 @@ -
引用回复
@@ -398,8 +397,6 @@ import Login from './components/Login.vue'; - import Spectrum from './assets/Spectrum' - export default { components: { @@ -442,8 +439,6 @@ isEnableAtNotification: true, isEnableSendMessage: false, isEmojiBoxShow: false, - isSpectrumSwitch: false, - isSpectrumSwitchType: 0, messageList: [], // 消息最大允许保留 @@ -663,7 +658,7 @@ /** * @description: 获取URL参数 * @param {string} 参数名称 - * @return {string|null} + * @return {string|null} */ getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); @@ -721,32 +716,6 @@ } this.$forceUpdate(); }, - /** - * @description: 设置开启频谱 - * @param {bool} 是否开启频谱 - * @return {null} - */ - updateSpectrumSwitch(spectrumSwitch) { - this.$nextTick(() => { - if(spectrumSwitch){ - Spectrum.on(this.$refs.audio); - this.isSpectrumSwitchType = localStorage.getItem('isSpectrumSwitchType'); - this.updateSpectrumSwitchType(this.isSpectrumSwitchType) - }else{ - Spectrum.off(); - } - }) - }, - /** - * @description: 设置频谱类型 - * @param {int} 频谱类型 - * @return {null} - */ - updateSpectrumSwitchType(spectrumSwitchType) { - this.$nextTick(() => { - Spectrum.changeType(spectrumSwitchType); - }) - }, /** * @description: 读取本地配置 * @param {null} @@ -757,8 +726,6 @@ this.isEnableNotification = localStorage.getItem('isEnableNotification') != 1 ? true : false; this.isEnableTouchNotice = localStorage.getItem('isEnableTouchNotice') != 1 ? true : false; this.isEnableAtNotification = localStorage.getItem('isEnableAtNotification') != 1 ? true : false; - this.isSpectrumSwitch = localStorage.getItem('isSpectrumSwitch') != 1 ? true : false; - this.isSpectrumSwitchType = localStorage.getItem('isSpectrumSwitchType'); }, /** * @description: 显示右键菜单 @@ -1176,13 +1143,11 @@ }, /** * @description: 可以播放事件 开始播放 - * @param {null} - * @return {null} + * @param {null} + * @return {null} */ canplay() { this.$refs.audio.play(); - this.isSpectrumSwitch = localStorage.getItem('isSpectrumSwitch') != 1 ? true : false; - this.updateSpectrumSwitch(this.isSpectrumSwitch) }, /** * @description: 获取引用消息的标签 @@ -1678,7 +1643,7 @@ /** * @description: 输入框获取焦点 * @param {null} - * @return {null} + * @return {null} */ focusInput() { const textarea = document.querySelector(".bbug_main_chat_input_message"); @@ -1687,7 +1652,7 @@ /** * @description: at用户 * @param {null} - * @return {null} + * @return {null} */ atUser() { if (this.global.atUserInfo) { @@ -1699,7 +1664,7 @@ /** * @description: 摸一摸指定用户 * @param {int} 用户ID - * @return {null} + * @return {null} */ doTouch(user_id) { let that = this; @@ -1717,7 +1682,7 @@ /** * @description: 撤回消息 * @param {obj} 消息体 - * @return {null} + * @return {null} */ sendBackMessage(message) { let that = this; @@ -1732,7 +1697,7 @@ /** * @description: 引用消息 * @param {obj} 消息体 - * @return {null} + * @return {null} */ quotMessage(message) { let that = this; @@ -1748,7 +1713,7 @@ /** * @description: 用户头像下拉点击回调 * @param {obj} 命令对象 - * @return {null} + * @return {null} */ commandUserHead(cmd) { let that = this; @@ -1825,7 +1790,7 @@ /** * @description: 显示指定用户主页 * @param {int} 用户ID - * @return {null} + * @return {null} */ showUserPage(user_id) { let that = this; @@ -1839,7 +1804,7 @@ /** * @description: 显示在线列表 * @param {null} - * @return {null} + * @return {null} */ showOnlineList() { if (this.dialog.OnlineList) { @@ -1852,7 +1817,7 @@ /** * @description: 自动滚动到底部 * @param {null} - * @return {null} + * @return {null} */ autoScroll() { let that = this; @@ -1868,7 +1833,7 @@ /** * @description: 获取房间信息 * @param {bool} 是否重新连接(默认true) - * @return {null} + * @return {null} */ getRoomInfo(reConnect = true) { let that = this; @@ -1951,7 +1916,7 @@ /** * @description: 更新剪切板数据 * @param {null} - * @return {null} + * @return {null} */ updateCopyData() { let that = this; @@ -1968,7 +1933,7 @@ /** * @description: 切掉当前播放的歌曲 * @param {null} - * @return {null} + * @return {null} */ passTheSong() { let that = this; @@ -1992,7 +1957,7 @@ /** * @description: 收藏当前播放的歌曲 * @param {null} - * @return {null} + * @return {null} */ loveTheSong() { let that = this; @@ -2010,7 +1975,7 @@ /** * @description: 获取当前的websocket连接地址 * @param {null} - * @return {null} + * @return {null} */ getWebsocketUrl() { let that = this; @@ -2672,16 +2637,7 @@ overflow: hidden; overflow-y: scroll; padding-bottom: 30px; - z-index: 1; - } - - .bbbug_main_spectrum { - position: absolute; - left: 0; - right: 0; - height: 100px; - bottom: 150px; - z-index: 0; + z-index: 0; } .bbbug_main_chat_system { @@ -3105,4 +3061,4 @@ overflow: hidden; text-overflow: ellipsis; } - + \ No newline at end of file diff --git a/src/assets/Spectrum.js b/src/assets/Spectrum.js deleted file mode 100644 index dd4061e..0000000 --- a/src/assets/Spectrum.js +++ /dev/null @@ -1,409 +0,0 @@ -let Spectrum = { - type: 0, - audio: null, - audioCtx: null, - mediaElementSource: null, - analyser: null, - status: 1, //flag for sound is playing 1 or stopped 0 - animationId: null, - allCapsReachBottom: false, - $parentCont: null, - $cont: null, - $canvas: null, - _init: function (audio) { - try { - let userAgent = navigator.userAgent; - if (!/windows/i.test(userAgent) || (userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1)) { - return; - } - //下面这些是为了统一Chrome和Firefox的AudioContext - window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext; - window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame; - window.cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.msCancelAnimationFrame; - - let _this = this; - _this.audio = audio; - _this.$parentCont = document.getElementById('spectrumCont'); - if (!_this.$parentCont) { - return; - } - _this.audio.crossOrigin = 'anonymous'; - - _this.audioCtx = new window.AudioContext(); - - _this.audio.addEventListener('play', (e) => { - _this.on(); - }); - _this.audio.addEventListener('pause', (e) => { - _this.off(); - }); - - _this.audio.addEventListener('timeupdate', (e) => { - if (!_this.mediaElementSource) { - _this.on(); - } - }); - - function onResizeFunction() { - _this.on(); - } - - document.body.removeEventListener("resize", onResizeFunction); - document.body.addEventListener("resize", onResizeFunction); - window.removeEventListener("resize", onResizeFunction); - window.addEventListener("resize", onResizeFunction); - - } catch (e) { - console.error(e); - } - }, - on: function (audio) { - let _this = this; - if (_this.audioCtx && _this.audioCtx.state === 'running') { - if (!_this.mediaElementSource) { - _this.mediaElementSource = _this.audioCtx.createMediaElementSource(_this.audio); - _this.analyser = _this.audioCtx.createAnalyser(); - _this.mediaElementSource.connect(_this.analyser); - _this.analyser.connect(_this.audioCtx.destination); - } - _this.status = 1; - _this._render(_this.type); - } else if (audio) { - _this._init(audio); - } else if (_this.audio) { - _this._init(_this.audio); - } else { - _this.off(); - } - }, - off: function () { - let _this = this; - if (_this.audioCtx && _this.audioCtx.state === 'running') { - let _this = this; - // _this.analyser && _this.analyser.disconnect(_this.audioCtx.destination); - _this.status = 0; - } - }, - changeType(type) { - if (isNaN(type)) { - return; - } - type = type * 1; - let _this = this; - if (_this.audioCtx && _this.audioCtx.state === 'running') { - cancelAnimationFrame(_this.animationId); //since the sound is stoped and animation finished, stop the requestAnimation to prevent potential memory leak,THIS IS VERY IMPORTANT! - _this.$cont && _this.$cont.remove(); - _this._render(type); - } - }, - _render: function (type) { - let _this = this; - var refContWidth = _this.$parentCont.clientWidth; - var refContHeight = _this.$parentCont.clientHeight; - - let setting = { - width: refContWidth, - height: refContHeight * 1, - top: refContHeight * 1 - }; - - _this.$cont && _this.$cont.remove(); - - _this.$cont = document.createElement('div'); - _this.$cont.style.width = setting.width; - _this.$cont.style.height = setting.height; - _this.$cont.style.position = 'absolute'; - _this.$cont.style.top = setting.top; - _this.$cont.style.zIndex = 99; - - _this.$canvas = document.createElement('canvas'); - _this.$canvas.width = setting.width; - _this.$canvas.style.width = setting.width; - _this.$canvas.height = setting.height; - _this.$canvas.style.height = setting.height; - - _this.$cont.append(_this.$canvas); - _this.$parentCont.append(_this.$cont); - - - function contClickFunction() { - _this.changeType(_this.type + 1); - } - - _this.$cont.removeEventListener('click', contClickFunction) - _this.$cont.addEventListener('click', contClickFunction) - - let fftSize = 0; - let cavWidth = _this.$canvas.width; - for (let i = 3; i < 16; i++) { - fftSize = Math.pow(2, i); - if (cavWidth < fftSize) { - break; - } - } - if (!_this.analyser) { - return; - } - _this.analyser.fftSize = fftSize; - - // let bufferLength = analyser.frequencyBinCount; - // let dataArray = new Uint8Array(bufferLength); - - _this._draw(type); - }, - _draw: function (type) { - let _this = this; - //颜色数组 - let colorArray = ['#f82466', '#00FFFF', '#AFFF7C', '#FFAA6A', '#6AD5FF', '#D26AFF', '#FF6AE6', '#FF6AB8', '#FF6A6A']; - //颜色随机数 - let colorRandom = Math.floor(Math.random() * colorArray.length); - //效果随机数 - let effectRandom = Math.floor(Math.random() * 1); - //随机选取颜色 - let color = colorArray[colorRandom]; - //随机选取效果 - switch (type) { - case 0: - //条形 - _this.type = type; - _this._draw_bar(color); - break; - case 1: - _this.type = type; - _this._draw_bar2(color); - break; - case 2: - _this.type = type; - _this._draw_line(color); - break; - default: - //条形 - _this.type = 0; - _this._draw_bar(color); - break; - } - }, - _draw_line: function (color) { - let _this = this; - let analyser = _this.analyser; - let canvas = _this.$canvas; - let width = canvas.width; - let height = canvas.height; - let canvasCtx = canvas.getContext('2d'); - - const bufferLength = this.analyser.fftSize; // 默认为2048 - const dataArray = new Uint8Array(bufferLength); - - let _draw_meter = function () { - analyser.getByteTimeDomainData(dataArray);// 将音频信息存储在长度为2048（默认）的类型数组（dataArray） - - if (_this.status === 0) { - //fix when some sounds end the value still not back to zero - for (let i = dataArray.length - 1; i >= 0; i--) { - dataArray[i] = 0; - } - _this.allCapsReachBottom = true; - for (let i = dataArray.length - 1; i >= 0; i--) { - _this.allCapsReachBottom = _this.allCapsReachBottom && (dataArray[i] === 0); - } - if (_this.allCapsReachBottom) { - cancelAnimationFrame(_this.animationId); //since the sound is stoped and animation finished, stop the requestAnimation to prevent potential memory leak,THIS IS VERY IMPORTANT! - _this.$cont && _this.$cont.remove(); - return; - } - } - - canvasCtx.clearRect(0, 0, width, height); - // canvasCtx.fillStyle = 'rgba(255, 255, 255, 0)';//background color - // canvasCtx.fillRect(0, 0, width, height); - canvasCtx.lineWidth = 2; - //['#f82466', '#00FFFF', '#AFFF7C', '#ffaa6a', '#6AD5FF', '#D26AFF', '#FF6AE6', '#FF6AB8', '#FF6A6A'] - canvasCtx.strokeStyle = '#6AD5FF';//colorArray[Math.floor(Math.random() * 10)];//'#dc143c'; - canvasCtx.beginPath(); - - const sliceWidth = Number(width) / bufferLength; - let x = 0; - canvasCtx.moveTo(x, height / 2); - for (let i = 0; i < bufferLength; i++) { - const v = dataArray[i] / 128.0; - const y = v * height / 2; - canvasCtx['lineTo'](x, y); - x += sliceWidth; - } - canvasCtx.lineTo(width, height / 2); - canvasCtx.stroke(); - - _this.animationId = window.requestAnimationFrame(_draw_meter); // 定时动画 - }; - - _this.animationId = window.requestAnimationFrame(_draw_meter); // 定时动画 - }, - _draw_bar: function (color) { - let _this = this; - - // let colorArray = ['#f82466', '#00FFFF', '#AFFF7C', '#ffaa6a', '#6AD5FF', '#D26AFF', '#FF6AE6', '#FF6AB8', '#FF6A6A']; - - let analyser = _this.analyser; - let canvas = _this.$canvas; - let cwidth = canvas.width, - cheight = canvas.height; - - // console.log(cheight); - - analyser.fftSize = 1024; - var bufferLength = analyser.frequencyBinCount; - let dataArray = new Uint8Array(bufferLength); - let slowDownDataArray = []; - - let canvasCtx = canvas.getContext('2d'); - let linearGradient = canvasCtx.createLinearGradient(0, 0, 0, cheight); - linearGradient.addColorStop(1, 'rgb(175,255,124)'); - linearGradient.addColorStop(0.3, 'rgb(255,170,106,1)'); - linearGradient.addColorStop(0, 'rgb(248,36,102,1)'); - - canvasCtx.clearRect(0, 0, cwidth, cheight); - - let _draw_meter = function () { - - analyser.getByteFrequencyData(dataArray); - - if (_this.status === 0) { - //fix when some sounds end the value still not back to zero - for (let i = dataArray.length - 1; i >= 0; i--) { - dataArray[i] = 0; - } - _this.allCapsReachBottom = true; - for (let i = slowDownDataArray.length - 1; i >= 0; i--) { - _this.allCapsReachBottom = _this.allCapsReachBottom && (slowDownDataArray[i] === 0); - } - if (_this.allCapsReachBottom) { - cancelAnimationFrame(_this.animationId); //since the sound is stoped and animation finished, stop the requestAnimation to prevent potential memory leak,THIS IS VERY IMPORTANT! - _this.$cont && _this.$cont.remove(); - return; - } - } - - // let backgroundColor = '#292a2d';//document.body.style.backgroundColor || 'rgb(255,255,255)'; - // canvasCtx.fillStyle = 'rgb()'; - // canvasCtx.fillRect(0, 0, cwidth, cheight); - canvasCtx.clearRect(0, 0, cwidth, cheight); - - let barWidth = (cwidth / bufferLength) * 2.5; - let barHeight; - let x = 0; - - for (let i = 0; i < bufferLength; i++) { - - barHeight = cheight * Number.parseFloat(dataArray[i] / 255.00).toFixed(2); - - if (slowDownDataArray.length < Math.round(bufferLength)) { - slowDownDataArray.push(barHeight); - } - - //['#f82466', '#00FFFF', '#AFFF7C', '#ffaa6a', '#6AD5FF', '#D26AFF', '#FF6AE6', '#FF6AB8', '#FF6A6A'] - canvasCtx.fillStyle = '#6AD5FF';//colorArray[Math.floor(Math.random() * 10)];//'#dc143c'; - //draw the cap, with transition effect - if (barHeight < slowDownDataArray[i]) { - canvasCtx.fillRect(x, cheight - (--slowDownDataArray[i]), barWidth, 2); - } else { - canvasCtx.fillRect(x, cheight - barHeight, barWidth, 2); - slowDownDataArray[i] = barHeight; - } - - canvasCtx.fillStyle = linearGradient; - canvasCtx.fillRect(x, cheight - barHeight + 4, barWidth, barHeight); - - x += barWidth + 1; - } - - _this.animationId = requestAnimationFrame(_draw_meter); - - }; - _this.animationId = requestAnimationFrame(_draw_meter); - - }, - _draw_bar2: function (color) { - let _this = this; - - // let colorArray = ['#f82466', '#00FFFF', '#AFFF7C', '#ffaa6a', '#6AD5FF', '#D26AFF', '#FF6AE6', '#FF6AB8', '#FF6A6A']; - - let analyser = _this.analyser; - let canvas = _this.$canvas; - let cwidth = canvas.width, - cheight = canvas.height; - - // console.log(cheight); - - // analyser.fftSize = 256; - var bufferLength = analyser.frequencyBinCount; - let dataArray = new Uint8Array(bufferLength); - let slowDownDataArray = []; - - let canvasCtx = canvas.getContext('2d'); - let linearGradient = canvasCtx.createLinearGradient(0, 0, 0, cheight); - linearGradient.addColorStop(1, 'rgb(175,255,124)'); - linearGradient.addColorStop(0.3, 'rgb(255,170,106,1)'); - linearGradient.addColorStop(0, 'rgb(248,36,102,1)'); - - canvasCtx.clearRect(0, 0, cwidth, cheight); - - let _draw_meter = function () { - - analyser.getByteFrequencyData(dataArray); - - if (_this.status === 0) { - //fix when some sounds end the value still not back to zero - for (let i = dataArray.length - 1; i >= 0; i--) { - dataArray[i] = 0; - } - _this.allCapsReachBottom = true; - for (let i = slowDownDataArray.length - 1; i >= 0; i--) { - _this.allCapsReachBottom = _this.allCapsReachBottom && (slowDownDataArray[i] === 0); - } - if (_this.allCapsReachBottom) { - cancelAnimationFrame(_this.animationId); //since the sound is stoped and animation finished, stop the requestAnimation to prevent potential memory leak,THIS IS VERY IMPORTANT! - _this.$cont && _this.$cont.remove(); - return; - } - } - - // let backgroundColor = '#292a2d';//document.body.style.backgroundColor || 'rgb(255,255,255)'; - // canvasCtx.fillStyle = backgroundColor; - // canvasCtx.fillRect(0, 0, cwidth, cheight); - canvasCtx.clearRect(0, 0, cwidth, cheight); - - let barWidth = (cwidth / bufferLength) * 2.5; - let barHeight; - let x = 0; - - for (let i = 0; i < bufferLength; i++) { - barHeight = cheight * Number.parseFloat(dataArray[i] / 255.00).toFixed(2); - - if (slowDownDataArray.length < Math.round(bufferLength)) { - slowDownDataArray.push(barHeight); - } - - //['#f82466', '#00FFFF', '#AFFF7C', '#ffaa6a', '#6AD5FF', '#D26AFF', '#FF6AE6', '#FF6AB8', '#FF6A6A'] - canvasCtx.fillStyle = '#6AD5FF';//colorArray[Math.floor(Math.random() * 10)];//'#dc143c'; - //draw the cap, with transition effect - if (barHeight < slowDownDataArray[i]) { - canvasCtx.fillRect(x, cheight - (--slowDownDataArray[i]), barWidth, 2); - } else { - canvasCtx.fillRect(x, cheight - barHeight, barWidth, 2); - slowDownDataArray[i] = barHeight; - } - - canvasCtx.fillStyle = linearGradient; - canvasCtx.fillRect(x, cheight - barHeight + 4, barWidth, barHeight); - - x += barWidth - 1; - } - - _this.animationId = requestAnimationFrame(_draw_meter); - - }; - _this.animationId = requestAnimationFrame(_draw_meter); - - }, -}; -export default Spectrum; diff --git a/src/components/SystemSetting.vue b/src/components/SystemSetting.vue index c0db1de..50dfa20 100755 --- a/src/components/SystemSetting.vue +++ b/src/components/SystemSetting.vue @@ -20,16 +20,6 @@ - - - - - - 柱 - 面 - 线 - -
@@ -46,9 +36,7 @@ isEnableNotification: true, isEnableTouchNotice: true, isEnableAtNotification: true, - isDarkModelTemp: false, - isSpectrumSwitch: false, - isSpectrumSwitchType: 0 + isDarkModelTemp: false } }, created() { @@ -59,13 +47,11 @@ this.isEnableTouchNotice = localStorage.getItem('isEnableTouchNotice') != 1 ? true : false; this.isEnableAtNotification = localStorage.getItem('isEnableAtNotification') != 1 ? true : false; this.isDarkModelTemp = this.$parent.isDarkModel; - this.isSpectrumSwitch = localStorage.getItem('isSpectrumSwitch') != 1 ? true : false; - this.isSpectrumSwitchType = localStorage.getItem('isSpectrumSwitchType'); }, methods: { /** * @description: @通知切换事件 - * @param {null} + * @param {null} * @return {null} */ isEnableAtNotificationChanged() { @@ -74,7 +60,7 @@ }, /** * @description: 声音切换事件 - * @param {null} + * @param {null} * @return {null} */ isEnableNoticePlayerChanged() { @@ -83,7 +69,7 @@ }, /** * @description: 通知切换事件 - * @param {null} + * @param {null} * @return {null} */ isEnableNotificationChanged() { @@ -92,7 +78,7 @@ }, /** * @description: 摸一摸通知切换事件 - * @param {null} + * @param {null} * @return {null} */ isEnableTouchNoticeChanged() { @@ -101,29 +87,11 @@ }, /** * @description: 暗黑模式切换事件 - * @param {null} + * @param {null} * @return {null} */ isDarkModelChanged() { this.$parent.updateDarkModel(this.isDarkModelTemp); - }, - /** - * @description: 频谱开关切换事件 - * @param {null} - * @return {null} - */ - isSpectrumSwitchChanged() { - localStorage.setItem('isSpectrumSwitch', this.isSpectrumSwitch ? 0 : 1); - this.$parent.updateSpectrumSwitch(this.isSpectrumSwitch); - }, - /** - * @description: 频谱类型切换事件 - * @param {null} - * @return {null} - */ - isSpectrumSwitchTypeChanged(){ - localStorage.setItem('isSpectrumSwitchType', this.isSpectrumSwitchType); - this.$parent.updateSpectrumSwitchType(this.isSpectrumSwitchType); } }, } @@ -142,10 +110,6 @@ overflow-y: auto; } - .bbbug_my_setting__form_spectrum_switch .el-radio-button__inner{ - padding: 5px 10px; - } - .el-select { display: block; } @@ -171,4 +135,4 @@ .bbbug_my_setting__clear_button:active { background-color: red; } - + \ No newline at end of file -- Gitee