diff --git a/plugin/think-plugs-static/stc/public/static/system.js b/plugin/think-plugs-static/stc/public/static/system.js index 34328dd31..5555359f6 100644 --- a/plugin/think-plugs-static/stc/public/static/system.js +++ b/plugin/think-plugs-static/stc/public/static/system.js @@ -1409,17 +1409,98 @@ $(function () { }); /*! 注册 data-video-player 事件行为 */ - $.base.onEvent('click', '[data-video-player]', function () { - let idx = $.msg.loading(), url = this.dataset.videoPlayer, name = this.dataset.title || '媒体播放器', payer; - $.module.use(['artplayer'], () => layer.open({ - title: name, type: 1, fixed: true, maxmin: false, - content: '
', - end: () => payer.destroy(), success: $ele => payer = new Artplayer({ - url: url, container: $ele.selector + ' .data-play-video', controls: [ - {html: '全屏播放', position: 'right', click: () => payer.fullscreen = !payer.fullscreen}, - ] - }, art => art.play(), $.msg.close(idx)) - })); + $.base.onEvent('click', '[data-video-player]', function (event) { + event.preventDefault(); + let idx = $.msg.loading(), url = this.dataset.videoPlayer, name = this.dataset.title || '媒体播放器', player; + let ext = String(url || '').split(/[?#]/)[0].split('.').pop().toLowerCase(); + let type = this.dataset.playerType || (/^(aac|flac|m4a|mp3|oga|ogg|wav|weba|wma)$/.test(ext) ? 'audio' : 'video'); + let viewWidth = Math.max(320, $(window).width()), viewHeight = Math.max(320, $(window).height()); + let titleHeight = 48, minWidth = type === 'audio' ? Math.min(420, Math.floor(viewWidth * 0.92)) : Math.min(640, Math.floor(viewWidth * 0.92)); + let mediaWidth = Math.max(minWidth, Math.min(type === 'audio' ? 640 : 960, Math.floor(viewWidth * 0.86))); + let mediaHeight = type === 'audio' ? 150 : Math.round(mediaWidth * 9 / 16); + let maxMediaHeight = Math.max(type === 'audio' ? 120 : 260, Math.floor(viewHeight * 0.82) - titleHeight); + if (mediaHeight > maxMediaHeight) { + mediaHeight = maxMediaHeight; + mediaWidth = type === 'audio' ? mediaWidth : Math.round(mediaHeight * 16 / 9); + } + + function ensurePlayerStyle() { + if (document.getElementById('ta-media-player-style')) return; + let style = document.createElement('style'); + style.id = 'ta-media-player-style'; + style.innerHTML = [ + '.ta-media-layer{border-radius:10px;overflow:hidden;background:#0f141a;box-shadow:0 12px 40px rgba(0,0,0,.28);}', + '.ta-media-layer .layui-layer-title{height:48px;line-height:48px;padding:0 52px 0 18px;border-bottom:1px solid #edf0f5;background:#fff;font-weight:600;}', + '.ta-media-layer .layui-layer-setwin{top:16px;right:16px;}', + '.ta-media-layer .layui-layer-content{overflow:hidden!important;background:#0f141a;}', + '.ta-media-wrap{width:100%;height:100%;background:#0f141a;display:flex;align-items:center;justify-content:center;}', + '.ta-media-wrap .data-play-media{width:100%;height:100%;background:#000;}', + '.ta-media-wrap.is-audio{background:#fff;}', + '.ta-media-wrap.is-audio .data-play-media{background:#fff;display:flex;align-items:center;justify-content:center;}', + '.ta-media-wrap audio{width:88%;}', + '.ta-media-empty{padding:30px;text-align:center;color:#333;}' + ].join(''); + document.head.appendChild(style); + } + + function showMessage($container, message) { + $container.empty().css({background: '#fff', color: '#333', display: 'flex', alignItems: 'center', justifyContent: 'center'}); + $container.append($('
').append( + $('

').text(message), + $('').attr('href', url).text('打开文件') + )); + } + + function nativePlayer($container) { + let $media = $(type === 'audio' ? '' : ''); + $container.empty().css({background: type === 'audio' ? '#fff' : '#000', display: 'flex', alignItems: 'center', justifyContent: 'center'}); + $media.attr('src', url).css(type === 'audio' ? {width: '90%'} : {width: '100%', height: '100%', background: '#000'}); + $media.one('error', function () { + showMessage($container, '当前媒体无法预览，可尝试打开文件。'); + }); + $container.append($media); + } + + $.module.use(['artplayer'], function (Artplayer) { + ensurePlayerStyle(); + layer.open({ + title: name, type: 1, fixed: true, maxmin: true, resize: false, skin: 'ta-media-layer', + area: [mediaWidth + 'px', (mediaHeight + titleHeight) + 'px'], + content: '
', + end: function () { + if (player && typeof player.destroy === 'function') player.destroy(); + }, + success: function ($ele) { + $.msg.close(idx); + let $wrap = $ele.find('.ta-media-wrap'), $container = $ele.find('.data-play-media'), container = $container.get(0), Player = Artplayer || window.Artplayer; + $wrap.height(mediaHeight); + if (!container) return $.msg.tips('播放器容器初始化失败！'); + if (type === 'audio' || typeof Player !== 'function') return nativePlayer($container); + try { + player = new Player({ + url: url, container: container, autoplay: true, autoSize: true, volume: 0.7, theme: '#16baaa', + hotkey: true, pip: true, screenshot: true, setting: true, playbackRate: true, aspectRatio: true, + fullscreen: true, fullscreenWeb: true, mutex: true, miniProgressBar: true, + moreVideoAttr: {controls: false, preload: 'metadata', playsInline: true} + }, function (art) { + let ret = art.play(); + if (ret && typeof ret.catch === 'function') ret.catch(function () { + }); + }); + player.on('video:error', function () { + showMessage($container, '当前视频无法预览，可尝试打开文件。'); + }); + } catch (e) { + console.error(e); + nativePlayer($container); + } + } + }); + }).catch(function (error) { + $.msg.close(idx); + console.error(error); + $.msg.tips('播放器组件加载失败！'); + }); }); /*! 注册 data-icon 事件行为 */ diff --git a/plugin/think-plugs-system/src/builder/SystemTablePreset.php b/plugin/think-plugs-system/src/builder/SystemTablePreset.php index 59026cd4b..98182f41c 100644 --- a/plugin/think-plugs-system/src/builder/SystemTablePreset.php +++ b/plugin/think-plugs-system/src/builder/SystemTablePreset.php @@ -138,10 +138,10 @@ function (d) { return '
'; } if (typeof d.mime === 'string' && /^video\//.test(d.mime)) { - return '
'; + return '
'; } if (typeof d.mime === 'string' && /^audio\//.test(d.mime)) { - return '
'; + return '
'; } return '
'; } diff --git a/public/static/system.js b/public/static/system.js index 34328dd31..5555359f6 100644 --- a/public/static/system.js +++ b/public/static/system.js @@ -1409,17 +1409,98 @@ $(function () { }); /*! 注册 data-video-player 事件行为 */ - $.base.onEvent('click', '[data-video-player]', function () { - let idx = $.msg.loading(), url = this.dataset.videoPlayer, name = this.dataset.title || '媒体播放器', payer; - $.module.use(['artplayer'], () => layer.open({ - title: name, type: 1, fixed: true, maxmin: false, - content: '
', - end: () => payer.destroy(), success: $ele => payer = new Artplayer({ - url: url, container: $ele.selector + ' .data-play-video', controls: [ - {html: '全屏播放', position: 'right', click: () => payer.fullscreen = !payer.fullscreen}, - ] - }, art => art.play(), $.msg.close(idx)) - })); + $.base.onEvent('click', '[data-video-player]', function (event) { + event.preventDefault(); + let idx = $.msg.loading(), url = this.dataset.videoPlayer, name = this.dataset.title || '媒体播放器', player; + let ext = String(url || '').split(/[?#]/)[0].split('.').pop().toLowerCase(); + let type = this.dataset.playerType || (/^(aac|flac|m4a|mp3|oga|ogg|wav|weba|wma)$/.test(ext) ? 'audio' : 'video'); + let viewWidth = Math.max(320, $(window).width()), viewHeight = Math.max(320, $(window).height()); + let titleHeight = 48, minWidth = type === 'audio' ? Math.min(420, Math.floor(viewWidth * 0.92)) : Math.min(640, Math.floor(viewWidth * 0.92)); + let mediaWidth = Math.max(minWidth, Math.min(type === 'audio' ? 640 : 960, Math.floor(viewWidth * 0.86))); + let mediaHeight = type === 'audio' ? 150 : Math.round(mediaWidth * 9 / 16); + let maxMediaHeight = Math.max(type === 'audio' ? 120 : 260, Math.floor(viewHeight * 0.82) - titleHeight); + if (mediaHeight > maxMediaHeight) { + mediaHeight = maxMediaHeight; + mediaWidth = type === 'audio' ? mediaWidth : Math.round(mediaHeight * 16 / 9); + } + + function ensurePlayerStyle() { + if (document.getElementById('ta-media-player-style')) return; + let style = document.createElement('style'); + style.id = 'ta-media-player-style'; + style.innerHTML = [ + '.ta-media-layer{border-radius:10px;overflow:hidden;background:#0f141a;box-shadow:0 12px 40px rgba(0,0,0,.28);}', + '.ta-media-layer .layui-layer-title{height:48px;line-height:48px;padding:0 52px 0 18px;border-bottom:1px solid #edf0f5;background:#fff;font-weight:600;}', + '.ta-media-layer .layui-layer-setwin{top:16px;right:16px;}', + '.ta-media-layer .layui-layer-content{overflow:hidden!important;background:#0f141a;}', + '.ta-media-wrap{width:100%;height:100%;background:#0f141a;display:flex;align-items:center;justify-content:center;}', + '.ta-media-wrap .data-play-media{width:100%;height:100%;background:#000;}', + '.ta-media-wrap.is-audio{background:#fff;}', + '.ta-media-wrap.is-audio .data-play-media{background:#fff;display:flex;align-items:center;justify-content:center;}', + '.ta-media-wrap audio{width:88%;}', + '.ta-media-empty{padding:30px;text-align:center;color:#333;}' + ].join(''); + document.head.appendChild(style); + } + + function showMessage($container, message) { + $container.empty().css({background: '#fff', color: '#333', display: 'flex', alignItems: 'center', justifyContent: 'center'}); + $container.append($('
').append( + $('

').text(message), + $('').attr('href', url).text('打开文件') + )); + } + + function nativePlayer($container) { + let $media = $(type === 'audio' ? '' : ''); + $container.empty().css({background: type === 'audio' ? '#fff' : '#000', display: 'flex', alignItems: 'center', justifyContent: 'center'}); + $media.attr('src', url).css(type === 'audio' ? {width: '90%'} : {width: '100%', height: '100%', background: '#000'}); + $media.one('error', function () { + showMessage($container, '当前媒体无法预览，可尝试打开文件。'); + }); + $container.append($media); + } + + $.module.use(['artplayer'], function (Artplayer) { + ensurePlayerStyle(); + layer.open({ + title: name, type: 1, fixed: true, maxmin: true, resize: false, skin: 'ta-media-layer', + area: [mediaWidth + 'px', (mediaHeight + titleHeight) + 'px'], + content: '
', + end: function () { + if (player && typeof player.destroy === 'function') player.destroy(); + }, + success: function ($ele) { + $.msg.close(idx); + let $wrap = $ele.find('.ta-media-wrap'), $container = $ele.find('.data-play-media'), container = $container.get(0), Player = Artplayer || window.Artplayer; + $wrap.height(mediaHeight); + if (!container) return $.msg.tips('播放器容器初始化失败！'); + if (type === 'audio' || typeof Player !== 'function') return nativePlayer($container); + try { + player = new Player({ + url: url, container: container, autoplay: true, autoSize: true, volume: 0.7, theme: '#16baaa', + hotkey: true, pip: true, screenshot: true, setting: true, playbackRate: true, aspectRatio: true, + fullscreen: true, fullscreenWeb: true, mutex: true, miniProgressBar: true, + moreVideoAttr: {controls: false, preload: 'metadata', playsInline: true} + }, function (art) { + let ret = art.play(); + if (ret && typeof ret.catch === 'function') ret.catch(function () { + }); + }); + player.on('video:error', function () { + showMessage($container, '当前视频无法预览，可尝试打开文件。'); + }); + } catch (e) { + console.error(e); + nativePlayer($container); + } + } + }); + }).catch(function (error) { + $.msg.close(idx); + console.error(error); + $.msg.tips('播放器组件加载失败！'); + }); }); /*! 注册 data-icon 事件行为 */