@import './variables.module.scss';

.player-wrap {
  position: relative;
  overflow: hidden;
  background-color: #000;

  &.web-full-screen {
    z-index: 9999999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw !important;
    height: 100vh !important;
  }

  .player-video {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    font-size: 0;
    
    // 视频主体
    .player-video-main {
      width: 100%;
      height: 100%;
      transition: .2s;
      object-fit: cover; // 填充

      // 镜像效果
      &.video-mirror {
        transform: rotateY(180deg);
      }
    }
  }



  // 控制器
  .player-controller {
    position: absolute;
    bottom: 0;
    left: 0;
    height: $control-bar-height;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: all 0.3s ease;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    z-index: 2;
    transform: translateY(45px);
    padding: 0 15px;
    box-sizing: border-box;
    .control-progress {
      width: 100%;
      position: relative;
      height: $progress-bar-height-hover;
      cursor: pointer;

      .progress-bar {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        transition: height 0.1s;
        height: $progress-bar-height;
        z-index: 1;
      }

      &:hover {
        .progress-bar {
          height: 100%;

          :deep(.d-progress__bar::before) {
            transform: translateY(-50%) scale(1, 1) !important;
          }
        }
      }
    }

    .control-tool {
      position: absolute;
      padding: 0 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      top: 4px;
      left: 0;
      bottom: 0;
      width: 100%;
      box-sizing: border-box;
      

      .tool-bar {
        display: flex;
        height: 100%;
        align-items: center;
        
        .tool-item {
          position: relative;
          cursor: pointer;
          text-align: center;
          padding: 0 8px;
          // height: 100%;
          display: flex;
          align-items: center;
          font-size: 12px;
          font-weight: 600;
          color: rgba(255, 255, 255, 0.8);
          
          .play {
            font-size: 26px;
          }

          .sound {
            font-size: 26px;
          }

          .rotateHover {
            font-size: 20px;
          }

          .screenshot {
            font-size: 16px;
          }

          .tool-item-main {
            position: absolute;
            white-space: nowrap;
            z-index: 2;
            bottom: 98%;
            left: 50%;
            
            box-sizing: border-box;
            display: none;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 5px;
            transform: translateX(-50%);
            font-weight: 600;
            color: rgba(255, 255, 255, 0.8);

            li {
              font-weight: 600;
            }
          }

          .padding {
            padding: 6px 8px;
          }
          &:hover {
            .tool-item-main {
              display: flex;
            }
          }
        }

        // 音量图标
        .tool-sound{
          
          &:hover{
            :deep(.d-progress__runway) {
              width: 0 !important;
              height: 0 !important;
              .d-progress__bar {
                width: 0 !important;
                height: 0 !important;
              }
              .d-progress__bar::before {
                width: 0 !important;
                height: 0 !important;
              }
            }
          }
        }

        // 声音
        .volume-box {
          width: 32px;
          margin-left: -4px;
          height: $progress-bar-height;

          .progress-bar {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            transition: height 0.1s;
            height: $progress-bar-height;
            z-index: 1;
          }

          &:hover {
            .progress-bar {
              :deep(.d-progress__bar::before) {
                transform: translateY(-50%) scale(1, 1) !important;
              }
            }
          }

        }

        // 音量进度控制
        .is-muted {
          :deep(.d-progress__runway) {
            .d-progress__bar {
              width: 0 !important;
            }
          }
        }
      }

      // 时间
      .tool-time span {
        cursor: default;
        text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
        vertical-align: middle;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
        font-weight: 600;
      }

      .speed-main {
        // padding: 0 8px;

        li {
          cursor: pointer;
          line-height: 34px;
          font-size: 12px;
          color: #fff;
          padding: 0 8px;
          &:hover {
            opacity: .8;
            // color: $font-color;
            background-color: rgba(255, 255, 255, 0.1);
          }

          &.speed-active {
            color: rgba($font-color, 1);
            font-weight: bold;
          }
        }
      }
    }

    // 移动到控制器上显示，解决点击播放暂停按钮时，控制器消失的问题
    &:hover{
      transform: translateY(0px);
    }
  
  
  }

  // 控制器显示
  &.player-wrap-hover {
    .player-controller {
      transform: translateY(0px);
    }
  }
}

.player-state,
.player-input {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 1;
}

.player-input {
  width: 100%;
  border: none;
  opacity: 0;
  cursor: default;
  padding: 0;
}

.play-btn {
  width: 60px;
  height: 60px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, .4);
  border-radius: 50%;
  font-size: 40px;
  opacity: 0;
  pointer-events: none;
}

// 黑幕
.player-lightsOff {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, .9);
}

// 关灯模式
.is-lightsOff {
  z-index: 999998;
}

.dplayer-icons-right svg {
  font-size: 19px;
}

.bfullscreen{
  font-size: 17px;
}