smsb-web-develop/src/views/bigscreen/ast/core/base.js

import {
  getAssetUrl,
  getThumbnailUrl
} from '@/api/asset'
import { create } from './utils'

export default {
  provide () {
    return {
      control: this
    }
  },
  props: {
    program: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      scale: 100,
      minScale: 100,
      maxScale: 100,
      padding: 0,
      selectedWidgetIndex: -1,
      node: null,
      bgm: '',
      muted: true
    }
  },
  computed: {
    transformStyles () {
      return {
        transform: `scale(${this.scale / 100})`,
        'transform-origin': '0 0'
      }
    },
    styles () {
      if (this.node) {
        const { width, height, backgroundColor } = this.node
        return {
          width: `${width}px`,
          height: `${height}px`,
          color: backgroundColor
        }
      }
      return null
    },
    backgroundStyles () {
      if (this.node) {
        const { backgroundImage } = this.node
        return {
          'background-image': backgroundImage[0] ? `url("${getThumbnailUrl(backgroundImage[0])}")` : 'none'
        }
      }
      return null
    },
    widgets () {
      return this.node?.widgets || []
    },
    widget () {
      return this.widgets[this.selectedWidgetIndex] || this.node
    },
    hasAudio () {
      if (this.node) {
        if (this.node.bgm.length) {
          return true
        }
        return this.node.widgets.some(widget => widget.mute === 0 && (widget.sources?.length || widget.url))
      }
      return false
    },
    bgmUrl () {
      return this.bgm ? getAssetUrl(this.bgm) : ''
    },
    hasNext () {
      return !this.muted && this.node?.bgm.length > 1
    }
  },
  watch: {
    'node.bgm' () {
      this.setBgm()
    }
  },
  mounted () {
    this.initCanvas(this.program.detail)
    this.checkRatio()
    window.addEventListener('resize', this.checkRatio)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.checkRatio)
  },
  methods: {
    toggleMute () {
      this.muted = !this.muted
    },
    setBgm () {
      this.$bgmIndex = 0
      this.chooseBgm()
    },
    chooseBgm () {
      const { bgm, toggleType } = this.node
      const length = bgm.length

      if (length === 0) {
        this.bgm = ''
        return
      }

      if (length === 1) {
        this.bgm = bgm[0].keyName
        return
      }

      let index
      switch (toggleType) {
        case 'cycle':
          index = this.$bgmIndex
          this.$bgmIndex = (index + 1) % length
          break
        case 'random':
          index = Math.random() * length | 0
          if (bgm[index]?.keyName === this.bgm) {
            if (index === 0) {
              index += 1
            } else {
              index -= 1
            }
          }
          break
        default:
          return
      }
      this.bgm = bgm[index].keyName
    },
    onAudioEnded () {
      if (this.node.bgm.length > 1) {
        this.chooseBgm()
      }
      this.$refs.audio.play()
    },
    onAudioError (e) {
      console.warn('audio error', e)
      if (this.node?.bgm.length > 1) {
        this.chooseBgm()
      }
    },
    checkRatio () {
      const wrapper = this.$refs.wrapper
      if (wrapper && this.node) {
        const width = wrapper.offsetWidth - this.padding * 2
        const height = wrapper.offsetHeight - this.padding * 2
        const { width: cWidth, height: cHeight } = this.node
        const wScale = width / cWidth
        const hScale = height / cHeight
        if (cWidth > width || cHeight > height) {
          this.scale = Math.min(wScale, hScale) * 100 | 0
          this.maxScale = Math.max(1, wScale, hScale) * 100 | 0
        } else {
          this.scale = 100
          this.maxScale = Math.max(2, wScale, hScale) * 100 | 0
        }
        this.minScale = this.scale
        console.log('width: layout -> window', cWidth, '->', width, wScale)
        console.log('height: layout -> window', cHeight, '->', height, hScale)
        console.log(this.scale, this.maxScale)
      }
    },
    initCanvas (canvas) {
      this.node = create(canvas)
      console.log(this.node)
    }
  }
}