pixuireactcomponents 1.2.2 → 1.2.31

package/ui/components/bulletscreen/BulletItemAnimation.tsx

@@ -1,117 +0,0 @@
-import { createRef } from 'lib/preact/src/create-element';
-import { Component, CSSProperties } from 'preact';
-
-// 弹幕相关个性化信息
-export class BulletInfo {
-    key: number;
-    text: string;
-    channel: number;
-    color: string;
-    fontSize: number;
-
-    constructor(
-        key: number,
-        text: string,
-        channel: number,
-        color: string,
-        fontSize: number
-    ) {
-        this.key = key;
-        this.text = text;
-        this.channel = channel;
-        this.color = color;
-        this.fontSize = fontSize;
-    }
-}
-
-// 同一行弹幕的间距
-const BULLET_DISTANCE = 50;
-// 弹幕超出屏幕后滑行距离
-const BULLET_MAX_LEN = 400;
-
-// 弹幕相关配置信息
-export class BulletConfig {
-    screenWidth: number;           //弹幕宽度
-    channelHeight: number;         //弹幕高度
-    totalTime: number;             //单条弹幕滑行时间
-
-    constructor(
-        screenWidth: number,
-        channelHeight: number,
-        totalTime: number
-    ) {
-        this.screenWidth = screenWidth;
-        this.channelHeight = channelHeight;
-        this.totalTime = totalTime;
-    }
-}
-
-// 使用Animation
-export class BulletItemAnimation extends Component<
-    {
-        bulletInfo: BulletInfo;
-        bulletConfig: BulletConfig;
-        onItemFree: Function;
-        onChannelFree: Function;
-    }, {}>{
-
-    private freeChannelTimer: any = undefined;
-    private refText = createRef()
-
-    constructor(props) {
-        super(props);
-    }
-
-    componentDidMount() {
-        this.refText.current.addEventListener('animationstart', this.onAnimationStart);
-        this.refText.current.addEventListener('animationend', this.onAnimationEnd);
-
-        window.requestAnimationFrame(this.setFreeChannelTimer);
-    }
-
-    onAnimationStart = () => {
-    }
-
-    onAnimationEnd = () => {
-        this.props.onItemFree();
-    }
-
-    setFreeChannelTimer = () => {
-        let realWidthStr = window.getComputedStyle(this.refText.current, null).getPropertyValue('width');
-        let widthNum = parseInt(realWidthStr.substring(0, realWidthStr.length - 2));
-        this.freeChannelTimer = setTimeout(this.freeChannel, (widthNum + BULLET_DISTANCE) / (this.props.bulletConfig.screenWidth + BULLET_MAX_LEN) * this.props.bulletConfig.totalTime);
-    }
-
-    freeChannel = () => {
-        this.props.onChannelFree(this.props.bulletInfo.channel);
-        clearTimeout(this.freeChannelTimer);
-    }
-
-    render() {
-
-        let isMe = false;
-
-        const bulletStyle: CSSProperties = {
-            marginTop: (this.props.bulletInfo.channel * this.props.bulletConfig.channelHeight) + 'px',
-            height: this.props.bulletConfig.channelHeight + 'px',
-            left: this.props.bulletConfig.screenWidth + 'px',
-            animation: 'bulletKeyframe 10s linear 1',
-
-            position: 'absolute',
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'flex-start',
-            alignItems: 'center',
-            border: isMe ? '1px solid ' + this.props.bulletInfo.color : '',
-
-            fontSize: this.props.bulletInfo.fontSize + 'px', //'16px',
-            color: this.props.bulletInfo.color,
-        };
-
-        return (
-            <div ref={this.refText} style={bulletStyle}>
-                <text>{this.props.bulletInfo.text}</text>
-            </div>
-        );
-    }
-}

package/ui/components/bulletscreen/BulletScreenAnimation.tsx

@@ -1,278 +0,0 @@
-/* eslint-disable linebreak-style */
-import { Component, CSSProperties } from 'preact';
-import { BulletInfo, BulletConfig, BulletItemAnimation } from './BulletItemAnimation';
-import { Logger } from './../../../tools/Logger';
-// item数据类型
-// {
-//     key : number,
-//     value : '人闲桂花落', string
-//     channel : number
-// }
-let bulletDataList: Array<BulletInfo> = [];
-
-// 弹幕组件相关初始化信息
-export class BulletScreenAnimationData {
-    generateCycle: number;             //弹幕生成的周期
-    channelHeight: number;             //每行弹幕的高度
-    screenWidth: number;               //弹幕区域宽度
-    screenHeight: number;              //弹幕区域高度
-    totalTime: number;                 //单条弹幕的滑行时间 单位ms
-
-    constructor(
-        generateCycle: number,
-        channelHeight: number,
-        screenWidth: number,
-        screenHeight: number,
-        totalTime: number
-    ) {
-        this.generateCycle = generateCycle;
-        this.channelHeight = channelHeight;
-        this.screenWidth = screenWidth;
-        this.screenHeight = screenHeight;
-        this.totalTime = totalTime;
-    }
-}
-
-
-// 使用Animaiton
-export class BulletScreenAnimation extends Component<
-    {
-        screenData: BulletScreenAnimationData;
-        getBulletText: Function;
-        isRun: boolean;    //暂停生产弹幕,
-        screenWidth: number;
-        screenHeight: number;
-    },
-    {
-        refreshIndex: number;
-    }>{
-
-    private positionSize = 0;
-    private hasPosition: Array<boolean> = [];
-
-    private bulletIndex = 0;
-    private consumeBulletTimer: any = undefined;
-    private isStart = false;  //弹幕是否开始播放
-    private isScreenSizeChanging = false; // 弹幕屏幕尺寸是否在改变中
-
-    constructor(props) {
-        super(props);
-        this.setState({
-            refreshIndex: 0
-        });
-
-        this.initChannels();
-
-        this.consumeBulletTimer = setInterval(() => {
-            let curChannel = -1;
-            if ((curChannel = this.getChannel()) != -1) {
-                if (!this.isStart) return;
-                if (this.isScreenSizeChanging) return;
-
-                let bulletText = this.props.getBulletText();
-                if (bulletText == undefined) return;     //没有弹幕
-
-                if (!this.props.isRun) return;     //弹幕开关关闭
-
-                bulletDataList.push(this.generateNewBulletInfo(bulletText, curChannel));
-                this.hasPosition[curChannel] = false;
-
-                let newIndex = this.state.refreshIndex + 1;
-                this.setState({
-                    refreshIndex: newIndex
-                });
-
-            }
-        }, this.props.screenData.generateCycle);
-    }
-
-    generateNewBulletInfo = (text, channel) => {
-        let _fontSize = 20;
-        let _transparencyPercent = 0;
-        // console.warn("_________________fontSize:", _fontSize)
-        let _color = `rgba(255,255,255,${1 - _transparencyPercent / 100})`;
-        return new BulletInfo(this.bulletIndex++, text, channel, _color, _fontSize);
-    }
-
-    componentWillUnmount() {
-        if (this.consumeBulletTimer != undefined) {
-            clearInterval(this.consumeBulletTimer);
-            this.consumeBulletTimer = undefined;
-        }
-    }
-
-    // 首字母大写表示可供外部调用
-    // 开始播放弹幕
-    StartRunBullets = () => {
-        this.isStart = true;
-    }
-
-    // 停止播放弹幕
-    StopRunBullets = () => {
-        this.isStart = false;
-    }
-
-    // 清空屏幕上的弹幕
-    ClearScreenBullets = () => {
-        bulletDataList = [];
-        this.initChannels();
-
-        let newIndex = this.state.refreshIndex + 1;
-        this.setState({
-            refreshIndex: newIndex
-        });
-    }
-
-    SetScreenSizeChanging = () => {
-        this.isScreenSizeChanging = true;
-    }
-
-    setScreenSizeChanged = () => {
-        this.isScreenSizeChanging = false;
-    }
-
-    componentWillReceiveProps(nextProps) {
-        // Logger.ObjectPrinter(nextProps, "# nextProps #")
-        if (this.isScreenSizeSame(this.props, nextProps)) return;
-
-        console.log('ScreenSizeChanged, generate new Animation!!!============');
-        Logger.ObjectPrinter(nextProps, '# nextProps #');
-
-        this.generateTargetAnimation(nextProps);
-        this.initChannels(nextProps);
-        this.setScreenSizeChanged();
-    }
-
-    generateTargetAnimation = (currentProps) => {
-        this.generateDynamicAnimation('bulletKeyframe',
-            `from{
-                left: ${currentProps.screenWidth}px
-            }
-            to{
-                left: -400px;
-            }`
-        );
-    }
-
-    isScreenSizeSame = (oldProps, newProps) => {
-        if (oldProps.screenWidth == newProps.screenWidth &&
-            oldProps.screenHeight == newProps.screenHeight) {
-            return true;
-        }
-        return false;
-    }
-
-    generateDynamicAnimation = (name, styles) => {
-        console.log('&&&&&&&&&&&&&&&&&&&&&&=====================================');
-
-        let css = `@keyframes ${name}{${styles}}`;
-        let head = document.getElementsByTagName('head')[0];
-        let style: any = document.createElement('style');
-        style.type = 'text/css';
-        if (style.styleSheet) {
-            style.styleSheet.cssText = css;
-        } else {
-            style.appendChild(document.createTextNode(css));
-        }
-        head.appendChild(style);
-    }
-
-    initChannels(currentProps = this.props) {
-        this.positionSize = Math.floor(currentProps.screenHeight / currentProps.screenData.channelHeight);
-        this.hasPosition = [];
-
-        //初始化 所有信道当前可用;每个信道都有一个缓存池;
-        for (let index = 0; index < this.positionSize; index++) {
-            this.hasPosition[index] = true;
-        }
-        console.warn('position:', this.hasPosition.length);
-    }
-
-    //先尝试随机取3次位置，取不到可用位置就从头开始遍历位置
-    getChannel = () => {
-        let tryCount = 3;
-
-        while (tryCount > 0) {
-            let channel = this.getRandomChannelByPosition();
-            if (this.hasPosition[channel]) {
-                return channel;
-            }
-            tryCount--;
-        }
-
-        return this.getAvailableChannelByPosition();
-    }
-
-    getRandomChannelByPosition = () => {
-        // 根据position 配置，决定随机的位置
-        let _random;
-        // if(Settings.bulletSettings.position == BulletPositon.TopHalf){
-        //     let _topHalfsize = Math.floor(this.positionSize / 2)
-        //     _random = Math.random() * _topHalfsize
-        // }
-        // else if(Settings.bulletSettings.position == BulletPositon.BottomHalf){
-        //     let _topHalfsize = Math.floor(this.positionSize / 2)
-        //     _random = Math.random() * (this.positionSize - _topHalfsize) + _topHalfsize
-        // }
-        // else{ //Settings.bulletSettings.position == BulletPositon.Full
-        _random = Math.random() * this.positionSize;
-        // }
-
-        return Math.floor(_random);
-    }
-
-    getAvailableChannelByPosition = () => {
-        let start, end; //闭区间
-        // if(Settings.bulletSettings.position == BulletPositon.TopHalf){
-        //     let _topHalfsize = Math.floor(this.positionSize / 2)
-        //     start = 0
-        //     end = _topHalfsize - 1
-        // }
-        // else if(Settings.bulletSettings.position == BulletPositon.BottomHalf){
-        //     let _topHalfsize = Math.floor(this.positionSize / 2)
-        //     start = _topHalfsize
-        //     end = this.positionSize - 1
-        // }
-        // else{ //Settings.bulletSettings.position == BulletPositon.Full
-        start = 0;
-        end = this.positionSize - 1;
-        // }
-
-        for (let index = start; index <= end; index++) {
-            if (this.hasPosition[index]) {
-                return index;
-            }
-        }
-
-        return -1;
-    }
-
-    onItemFree = () => {
-        bulletDataList.shift();
-    }
-
-    onChannelFree = (channel) => {
-        this.hasPosition[channel] = true;
-    }
-
-    render() {
-        let container: CSSProperties = {
-            width: this.props.screenWidth + 'px',
-            height: this.props.screenHeight + 'px',
-            position: 'absolute',
-            overflow: 'hidden',
-            // backgroundColor: '#00FFFF66'
-        };
-
-        let screenData = this.props.screenData;
-        let commonInfo = new BulletConfig(this.props.screenWidth, screenData.channelHeight, screenData.totalTime);
-
-        return (
-            <div style={container}>
-                {bulletDataList.map((value, index) => {
-                    return (<BulletItemAnimation key={value.key} bulletInfo={value} bulletConfig={commonInfo}
-                        onItemFree={this.onItemFree} onChannelFree={this.onChannelFree} />);
-                })}
-            </div>);
-    }
-}

package/ui/components/bulletscreen/bullet.less

@@ -1,17 +0,0 @@
-.bullet_animation{
-    animation-name: barrage;
-    animation-duration: 10s;
-    animation-timing-function: linear;
-    animation-iteration-count: 1
-    // background-color: aqua;
-}
-
-@keyframes barrage{
-    from{
-        left: 1334px
-    }
-
-    to{
-        left: -400px;
-    }
-}

package/ui/components/button/Button.tsx

@@ -1,18 +0,0 @@
-import { h, Component, CSSProperties } from "preact";
-
-export class Button extends Component<any, any>
-{
-    private btnImg
-    render(props) {
-        return (
-            <div
-                onClick = {()=>{ if(this.props.clickEvent){if(this.props.clickArr) this.props.clickEvent(...props.clickArr); else this.props.clickEvent()}}}
-                onMouseDown={() => {(this.btnImg as HTMLImageElement).src = this.props.pic_yaxia }}
-                onMouseUp={() => { (this.btnImg as HTMLImageElement).src = this.props.pic_xuanfu }}
-                onMouseOver={() => { (this.btnImg as HTMLImageElement).src = this.props.pic_xuanfu; }}
-                onMouseOut={() => { (this.btnImg as HTMLImageElement).src = this.props.pic_changtai; }}>
-                <img ref = {(img)=>{this.btnImg = img}} src={this.props.pic_changtai}></img>
-            </div>
-        )
-    }
-}