smsb-web-develop/src/views/bigscreen/viewer/index.vue

<template>
  <div
    ref="wrapper"
    v-loading.lock="loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    class="c-viewer"
  >
    <audio
      v-if="bgmUrl"
      ref="audio"
      :src="bgmUrl"
      :muted.prop="muted"
      autoplay
      @ended="onAudioEnded"
      @error="onAudioError"
    />
    <div
      v-if="hasAudio"
      class="l-flex--row c-tool"
    >
      <el-tooltip
        class="c-tool__item"
        content="音效"
        :hide-after="2000"
      >
        <div @click="toggleMute">
          <div
            class="o-wave"
            :class="{ muted }"
          >
            <span class="o-wave__line" />
            <span class="o-wave__line" />
            <span class="o-wave__line" />
            <span class="o-wave__line" />
          </div>
        </div>
      </el-tooltip>
      <el-tooltip
        v-if="hasNext"
        class="c-tool__item"
        content="切歌"
        :hide-after="2000"
      >
        <div @click="chooseBgm">
          <i class="o-next" />
        </div>
      </el-tooltip>
      <el-tooltip
        v-if="bgmUrl"
        class="c-tool__item"
        content="背景音乐"
        :hide-after="2000"
      >
        <div @click.stop="onClickWidget()">
          <svg-icon icon-class="list" />
        </div>
      </el-tooltip>
    </div>
    <div
      class="c-viewer__canvas has-bg"
      :style="[transformStyles, styles]"
    >
      <div
        class="c-viewer__background has-bg"
        :style="backgroundStyles"
      />
      <widget
        v-for="(item, index) in widgets"
        :key="`${item.type}${index}`"
        :node="item"
        @click.native.stop="onClickWidget(item)"
      />
    </div>
    <el-dialog
      title="数据"
      :visible.sync="dialogVisibleAssets"
      custom-class="c-dialog"
      :before-close="onCloseAssetsDialog"
    >
      <div
        v-if="sources"
        class="c-grid"
      >
        <div
          v-for="(source, index) in sources"
          :key="index"
          class="c-card u-pointer"
          @click="onView(source.keyName)"
        >
          <div class="c-card__content">
            <i
              v-if="isImage"
              class="o-image"
              :style="{ 'background-image': `url('${source.url}')` }"
            />
            <div
              v-else
              class="c-card__text u-ellipsis"
            >
              {{ source.name }}
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <preview ref="preview" />
  </div>
</template>

<script>
import { getThumbnailUrl } from '@/api/asset'
import { AssetType } from '@/constant'
import base from '../core/base'
import Widget from '../core/widget/WidgetViewer.vue'
import Preview from '@/components/Preview'

export default {
  name: 'BigScreenViewer',
  components: {
    Widget,
    Preview
  },
  mixins: [base],
  data () {
    return {
      dialogVisibleAssets: false,
      isImage: false,
      sources: null
    }
  },
  methods: {
    onLoaded () {
      this.$message({
        type: 'info',
        message: '点击组件可查看媒资列表'
      })
    },
    onClickWidget (item) {
      const sources = item ? item.sources : this.node.bgm
      if (sources?.length > 1) {
        this.$muted = this.muted
        this.isImage = item?.type === 'CImage'
        if (this.isImage) {
          this.sources = sources.map(source => {
            return {
              ...source,
              url: getThumbnailUrl(source.keyName)
            }
          })
        } else {
          this.sources = sources
          if (!this.muted) {
            this.muted = true
          }
        }
        this.dialogVisibleAssets = true
      }
    },
    onCloseAssetsDialog () {
      this.muted = this.$muted
      this.sources = null
      this.dialogVisibleAssets = false
    },
    onView (keyName) {
      this.$refs.preview.show({
        type: this.isImage ? AssetType.IMAGE : AssetType.VIDEO,
        keyName
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.c-viewer {
  height: 100%;
  overflow: hidden;

  &__canvas {
    position: relative;
    background-color: #000;
    overflow: hidden;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: currentColor;
      z-index: -1;
    }
  }

  &__background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
  }
}

.c-tool {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;

  &__item {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px 16px;
    color: $gray;
    font-size: 16px;
    cursor: pointer;

    &:hover {
      background-color: #191d22;
    }

    &:active {
      background-color: darken(#191d22, 5%);
    }
  }
}

.c-card {
  display: inline-block;
  position: relative;
  background-color: rgba(0, 0, 0, 0.8);

  &__content {
    position: relative;
    padding-top: 60%;
  }

  &__name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 4px 6px;
    color: $gray;
    font-size: 14px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6);
  }

  &__text {
    position: absolute;
    top: 50%;
    left: 8px;
    right: 8px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    transform: translateY(-50%);
  }
}

.o-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
</style>