Sync from bytedesk-private: update

This commit is contained in:
jack ning
2024-12-14 10:43:18 +08:00
parent 476eebb101
commit 5e082909e4
3421 changed files with 812709 additions and 0 deletions

View File

@@ -0,0 +1,4 @@
.ui-jessibuca {
width: 100%;
height: 100%;
}

View File

@@ -0,0 +1,106 @@
<template>
<div class="ui-jessibuca"></div>
</template>
<script>
export default {
name: 'ui-jessibuca',
props: {
videoUrl: {
type: String,
default: ''
},
showBandwidth: {
type: Boolean,
default: true
},
fullscreenFlag: {
type: Boolean,
default: true
},
screenshotFlag: {
type: Boolean,
default: true
},
playFlag: {
type: Boolean,
default: true
},
audioFlag: {
type: Boolean,
default: true
}
},
data () {
return {
jessibuca: null
}
},
watch: {
videoUrl: {
immediate: true,
handler (newVal, oldVal) {
if (newVal) {
this.init()
setTimeout(() => {
this.jessibuca.play(newVal)
}, 100)
} else if (this.jessibuca) {
this.jessibuca.destroy()
this.jessibuca = null
}
}
}
},
created () {},
mounted () {
this.init()
},
beforeDestroy () {
this.jessibuca && this.jessibuca.destroy()
},
methods: {
init () {
const that = this
if (!this.jessibuca && this.$el) {
this.jessibuca = new window.Jessibuca({
container: this.$el,
videoBuffer: 0.2, // 缓存时长
isResize: false,
text: '',
loadingText: '加载中',
debug: false,
useMSE: true, // 开启硬编码
showBandwidth: this.showBandwidth, // 显示网速
controlAutoHide: true,
operateBtns: {
fullscreen: this.fullscreenFlag,
screenshot: this.screenshotFlag,
play: this.playFlag,
audio: this.audioFlag
},
forceNoOffscreen: true,
isNotMute: false
})
this.jessibuca.on('error', function (error) {
console.log('error:', error)
})
this.jessibuca.on('fullscreen', function (flag) {
console.log('is fullscreen', flag)
that.$emit('fullscreen', flag)
})
this.jessibuca.on('webFullscreen', function (flag) {
console.log('is webFullscreen', flag)
that.$emit('webFullscreen', flag)
})
}
},
setFullscreen (flag) {
this.jessibuca.setFullscreen(flag)
}
}
}
</script>
<style src="./assets/css/index.scss" lang="scss"></style>

View File

@@ -0,0 +1,72 @@
.ui-scrollbar {
overflow: hidden;
position: relative;
&.child-over-width {
.ui-scrollbar__view {
max-width: 100%;
}
}
&:active > .ui-scrollbar__bar,
&:focus > .ui-scrollbar__bar,
&:hover > .ui-scrollbar__bar {
opacity: 1;
transition: opacity 0.34s ease-out;
}
}
.ui-scrollbar__wrap {
overflow: scroll;
height: 100%;
}
.ui-scrollbar__view {
display: inline-block;
vertical-align: middle;
min-width: 100%;
}
.ui-scrollbar__bar {
position: absolute;
right: 2px;
bottom: 2px;
z-index: 1;
border-radius: 4px;
opacity: 0;
-webkit-transition: opacity 120ms ease-out;
transition: opacity 120ms ease-out;
&.is-horizontal {
height: 6px;
left: 2px;
& > div {
height: 100%;
}
}
&.is-vertical {
width: 6px;
top: 2px;
& > div {
width: 100%;
}
}
}
.ui-scrollbar__thumb {
position: relative;
display: block;
width: 0;
height: 0;
cursor: pointer;
border-radius: inherit;
background-color: rgba(144, 147, 153, 0.3);
-webkit-transition: 0.3s background-color;
transition: 0.3s background-color;
&:hover {
background-color: hsla(220, 4%, 58%, 0.5);
}
}

View File

@@ -0,0 +1,104 @@
<script>
import { on, off, renderThumbStyle, BAR_MAP } from './util'
export default {
name: 'scrollbar-Bar',
props: {
vertical: Boolean,
size: String,
move: Number
},
computed: {
bar () {
return BAR_MAP[this.vertical ? 'vertical' : 'horizontal']
},
wrap () {
return this.$parent.wrap
}
},
destroyed () {
off(document, 'mouseup', this.mouseUpDocumentHandler)
},
methods: {
clickThumbHandler (e) {
// prevent click event of right button
if (e.ctrlKey || e.button === 2) {
return
}
this.startDrag(e)
this[this.bar.axis] =
e.currentTarget[this.bar.offset] -
(e[this.bar.client] -
e.currentTarget.getBoundingClientRect()[this.bar.direction])
},
clickTrackHandler (e) {
const offset = Math.abs(
e.target.getBoundingClientRect()[this.bar.direction] -
e[this.bar.client]
)
const thumbHalf = this.$refs.thumb[this.bar.offset] / 2
const thumbPositionPercentage =
((offset - thumbHalf) * 100) / this.$el[this.bar.offset]
this.wrap[this.bar.scroll] =
(thumbPositionPercentage * this.wrap[this.bar.scrollSize]) /
100
},
startDrag (e) {
e.stopImmediatePropagation()
this.cursorDown = true
on(document, 'mousemove', this.mouseMoveDocumentHandler)
on(document, 'mouseup', this.mouseUpDocumentHandler)
document.onselectstart = () => false
},
mouseMoveDocumentHandler (e) {
if (this.cursorDown === false) return
const prevPage = this[this.bar.axis]
if (!prevPage) return
const offset =
(this.$el.getBoundingClientRect()[this.bar.direction] -
e[this.bar.client]) *
-1
const thumbClickPosition =
this.$refs.thumb[this.bar.offset] - prevPage
const thumbPositionPercentage =
((offset - thumbClickPosition) * 100) /
this.$el[this.bar.offset]
this.wrap[this.bar.scroll] =
(thumbPositionPercentage * this.wrap[this.bar.scrollSize]) /
100
},
mouseUpDocumentHandler (e) {
this.cursorDown = false
this[this.bar.axis] = 0
off(document, 'mousemove', this.mouseMoveDocumentHandler)
document.onselectstart = null
}
},
render (h) {
const { size, move, bar } = this
return (
<div
class={['ui-scrollbar__bar', 'is-' + bar.key]}
onMousedown={this.clickTrackHandler}
>
<div
ref="thumb"
class="ui-scrollbar__thumb"
onMousedown={this.clickThumbHandler}
style={renderThumbStyle({ size, move, bar })}
></div>
</div>
)
}
}
</script>

View File

@@ -0,0 +1,174 @@
<script>
import { addResizeListener, removeResizeListener, toObject } from './util'
import scrollbarWidth from './scrollbar-width'
import Bar from './bar.vue'
require('./assets/css/index.scss')
export default {
name: 'ui-scrollbar',
components: { Bar },
props: {
native: Boolean,
childOverWidth: {
type: Boolean,
default: true
},
wrapStyle: {},
wrapClass: {},
viewClass: {},
viewStyle: {},
noresize: Boolean, // 如果 container 尺寸不会发生变化,最好设置它可以优化性能
tag: {
type: String,
default: 'div'
}
},
data () {
return {
sizeWidth: '0',
sizeHeight: '0',
moveX: 0,
moveY: 0,
scrollbarMiddle: 0
}
},
computed: {
wrap () {
return this.$refs.wrap
}
},
mounted () {
if (this.native) return
this.$nextTick(this.update)
!this.noresize && addResizeListener(this.$refs.resize, this.update)
!this.noresize && addResizeListener(this.$refs.wrap, this.update)
},
beforeDestroy () {
if (this.native) return
!this.noresize && removeResizeListener(this.$refs.resize, this.update)
!this.noresize && removeResizeListener(this.$refs.wrap, this.update)
},
methods: {
handleScroll () {
const wrap = this.wrap
this.moveY = (wrap.scrollTop * 100) / wrap.clientHeight
this.moveX = (wrap.scrollLeft * 100) / wrap.clientWidth
if (wrap.scrollTop + wrap.clientHeight === wrap.scrollHeight) {
this.$emit('scrollbottom')
}
if (wrap.scrollTop === 0) {
this.$emit('scrolltop')
}
this.$emit('scrollMove', {
moveX: wrap.scrollLeft,
moveY: wrap.scrollTop,
clientX: wrap.clientWidth,
clientY: wrap.clientHeight,
scrollHeight: wrap.scrollHeight,
scrollWidth: wrap.scrollWidth
})
},
update () {
let heightPercentage = null
let widthPercentage = null
const wrap = this.wrap
if (!wrap) return
heightPercentage = (wrap.clientHeight * 100) / wrap.scrollHeight
widthPercentage = (wrap.clientWidth * 100) / wrap.scrollWidth
this.sizeHeight = heightPercentage < 100 ? heightPercentage + '%' : ''
this.sizeWidth = widthPercentage < 100 ? widthPercentage + '%' : ''
},
continueScroll (rowNum) {
const wrap = this.wrap
if (this.scrollbarMiddle === 0) {
this.scrollbarMiddle = wrap.scrollTop / 2 + wrap.clientHeight / 2 - wrap.clientHeight / rowNum
}
wrap.scrollTop = this.scrollbarMiddle
}
},
render (h) {
const gutter = scrollbarWidth()
let style = this.wrapStyle
if (gutter) {
const gutterWith = `-${gutter}px`
let gutterStyle = ''
let overFlowXStr = ''
let overflowYStr = ''
if (style && style.length > 0) {
style.forEach((styleItem) => {
if (styleItem['overflow-x'] || styleItem.overflowX) {
overFlowXStr = styleItem['overflow-x'] || styleItem.overflowX
}
if (styleItem['overflow-y'] || styleItem.overflowY) {
overflowYStr = styleItem['overflow-y'] || styleItem.overflowY
}
})
}
if (overFlowXStr === 'hidden') {
gutterStyle = `margin-right: ${gutterWith};`
} else {
gutterStyle = `margin-bottom: ${gutterWith}; margin-right: ${gutterWith};`
}
if (Array.isArray(this.wrapStyle)) {
style = toObject(this.wrapStyle)
if (overFlowXStr !== 'hidden') {
style.marginBottom = gutterWith
}
if (overflowYStr !== 'hidden') {
style.marginRight = gutterWith
}
} else if (typeof this.wrapStyle === 'string') {
style += gutterStyle
} else {
style = gutterStyle
}
}
const view = h(
this.tag,
{
class: ['ui-scrollbar__view', this.viewClass],
style: this.viewStyle,
ref: 'resize'
},
this.$slots.default
)
const wrap = (
<div
ref="wrap"
style={style}
onScroll={this.handleScroll}
class={[this.wrapClass, 'ui-scrollbar__wrap', gutter ? '' : 'ui-scrollbar__wrap--hidden-default']}
>{[view]}</div>
)
let nodes
if (!this.native) {
nodes = [
wrap,
<Bar move={this.moveX} size={this.sizeWidth}></Bar>,
<Bar vertical move={this.moveY} size={this.sizeHeight}></Bar>
]
} else {
nodes = [
<div ref="wrap" class={[this.wrapClass, 'ui-scrollbar__wrap']} style={style}>{[view]}</div>
]
}
return h('div', { class: ['ui-scrollbar', { 'child-over-width': !this.childOverWidth }] }, nodes)
}
}
</script>

View File

@@ -0,0 +1,29 @@
import Vue from 'vue'
let scrollBarWidth
export default function () {
if (Vue.prototype.$isServer) return 0
if (scrollBarWidth !== undefined) return scrollBarWidth
const outer = document.createElement('div')
outer.className = 'ui-scrollbar__wrap'
outer.style.visibility = 'hidden'
outer.style.width = '100px'
outer.style.position = 'absolute'
outer.style.top = '-9999px'
document.body.appendChild(outer)
const widthNoScroll = outer.offsetWidth
outer.style.overflow = 'scroll'
const inner = document.createElement('div')
inner.style.width = '100%'
outer.appendChild(inner)
const widthWithScroll = inner.offsetWidth
outer.parentNode.removeChild(outer)
scrollBarWidth = widthNoScroll - widthWithScroll
return scrollBarWidth
};

View File

@@ -0,0 +1,120 @@
import ResizeObserver from 'resize-observer-polyfill'
export const BAR_MAP = {
vertical: {
offset: 'offsetHeight',
scroll: 'scrollTop',
scrollSize: 'scrollHeight',
size: 'height',
key: 'vertical',
axis: 'Y',
client: 'clientY',
direction: 'top'
},
horizontal: {
offset: 'offsetWidth',
scroll: 'scrollLeft',
scrollSize: 'scrollWidth',
size: 'width',
key: 'horizontal',
axis: 'X',
client: 'clientX',
direction: 'left'
}
}
export function renderThumbStyle ({ move, size, bar }) {
const style = {}
const translate = `translate${bar.axis}(${move}%)`
style[bar.size] = size
style.transform = translate
style.msTransform = translate
style.webkitTransform = translate
return style
};
const isServer = typeof window === 'undefined'
/* istanbul ignore next */
const resizeHandler = function (entries) {
for (const entry of entries) {
const listeners = entry.target.__resizeListeners__ || []
if (listeners.length) {
listeners.forEach(fn => {
fn()
})
}
}
}
/* istanbul ignore next */
export const addResizeListener = function (element, fn) {
if (isServer) return
if (!element.__resizeListeners__) {
element.__resizeListeners__ = []
element.__ro__ = new ResizeObserver(resizeHandler)
element.__ro__.observe(element)
}
element.__resizeListeners__.push(fn)
}
/* istanbul ignore next */
export const removeResizeListener = function (element, fn) {
if (!element || !element.__resizeListeners__) return
element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1)
if (!element.__resizeListeners__.length) {
element.__ro__.disconnect()
}
}
function extend (to, _from) {
for (const key in _from) {
to[key] = _from[key]
}
return to
};
export function toObject (arr) {
const res = {}
for (let i = 0; i < arr.length; i++) {
if (arr[i]) {
extend(res, arr[i])
}
}
return res
};
export const on = (function () {
if (!isServer && document.addEventListener) {
return function (element, event, handler) {
if (element && event && handler) {
element.addEventListener(event, handler, false)
}
}
} else {
return function (element, event, handler) {
if (element && event && handler) {
element.attachEvent('on' + event, handler)
}
}
}
})()
/* istanbul ignore next */
export const off = (function () {
if (!isServer && document.removeEventListener) {
return function (element, event, handler) {
if (element && event) {
element.removeEventListener(event, handler, false)
}
}
} else {
return function (element, event, handler) {
if (element && event) {
element.detachEvent('on' + event, handler)
}
}
}
})()