NUXT_FRONTEND/components/Video/Article.vue

<template>
  <section class="video-alias section">
    <div class="video-alias__wrapper section-wrapper" v-if="videoItem">
      <div class="admin-button-in-news" v-if="userPermissionGroup == 3 || userPermissionGroup == 5">
        <a class="copy" :href="'/admin/publications/' + videoItem.id" target="_blank">Редактирование новости</a>
        <a class="inject" @click="inject(videoItem)">Инжект</a>
      </div>
      <div class="video-alias-header" v-if="videoItem.video">
        <div class="header-video">
          <iframe frameborder="0" :src="videoLink"></iframe>
        </div>

        <div class="header-bg">
          <img :src="require('~/assets/img/slider-video/bg.png')" />
        </div>
      </div>
      <div class="video-alias-body">
        <div class="video-alias-main">
          <div class="main-title">
            <h1 v-html="videoItem.title"></h1>
          </div>
          <div class="main-description" v-html="videoItem.description"></div>
            <aside class="detail-top__header-side">
              <div class="detail-top__actions">
                <div class="detail-top__share">
                  <div class="socials-share">
                    <ul class="socials-share__list">
                      <li class="socials-share__item">
                        <ShareNetwork
                          network="Odnoklassniki"
                          :url="'https://www.amic.ru' + $route.fullPath"
                          :title="videoItem.title"
                          class="socials-share__link"
                          :hashtags="
                            videoItem.hash_tags.length
                              ? videoItem.hash_tags.join(' ')
                              : ''
                          "
                        >
                          <BaseIcon :name="'ok'" clear
                        /></ShareNetwork>
                      </li>
                      <li class="socials-share__item">
                        <ShareNetwork
                          network="twitter"
                          :url="'https://www.amic.ru' + $route.fullPath"
                          :title="videoItem.title"
                          class="socials-share__link"
                          :hashtags="
                            videoItem.hash_tags.length
                              ? videoItem.hash_tags.join(' ')
                              : ''
                          "
                        >
                          <BaseIcon :name="'tw'" clear
                        /></ShareNetwork>
                      </li>
                      <li class="socials-share__item">
                        <ShareNetwork
                          network="vk"
                          :url="'https://www.amic.ru' + $route.fullPath"
                          :title="videoItem.title"
                          :description="videoItem.description"
                          class="socials-share__link"
                          :hashtags="
                            videoItem.hash_tags.length
                              ? videoItem.hash_tags.join(' ')
                              : ''
                          "
                        >
                          <BaseIcon :name="'vk'" clear
                        /></ShareNetwork>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <a
                class="
                  detail-top__action detail-top__comments-button
                  button button_grey-dark
                "
                href="#comment_form"
              >
                <span class="button__text">Комментировать</span>
              </a>
            </aside>
          <div class="main-content">
            <VideoContent :html="videoItem.content"></VideoContent>
            <div class="detail-main__properties mt-5">
                <span
                  v-for="property in properties"
                  :key="property.id"
                  :class="property.code"
                  :ref="property.code"
                >
                  {{ property.title }}
                </span>
            </div>
          </div>
          <div class="main-banner">
            <BannersW960H90 />
          </div>
          <div v-if="videoItem.show_pull" class="main-comments">
            <ArticleCommentsList
              :pull_id="videoItem.comment_pull_id"
              @commentResponse="commentResponseData"
              :newCommentsList="commentsList"
            />
            <ArticleCommentsForm
              :pull_id="videoItem.comment_pull_id"
              :response_user_name="comment.response_user_name"
              :response_user_id="comment.response_user_id"
              @clearCommentResponse="clearCommentResponse"
              @commentsResponseData="commentsResponseData"
            />
          </div>
        </div>
        <div class="video-alias-aside">
          <div class="aside-list" v-if="filteredVideos.length">
            <VideoItem
              class="aside-item"
              v-for="item in filteredVideos"
              :key="item.id"
              :item="item"
            ></VideoItem>
          </div>
          <div class="aside-banner">
            <BannersW240H400 />
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    videoItem: {
      type: Object,
      required: true
    },

    filteredVideos: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      userPermissionGroup: null,
      comment: {
        response_user_id: "",
        response_user_name: ""
      },
      commentsList: {}
    };
  },

  mounted() {
    if(this.$store.state.auth.user){
      this.userPermissionGroup = this.$store.state.auth.user.user_permission_group;
    }
  },

  methods: {
    commentResponseData(data) {
      this.comment.response_user_id = data.user_id;
      this.comment.response_user_name = data.user_name;
    },
    clearCommentResponse() {
      this.comment.response_user_id = "";
      this.comment.response_user_name = "";
    },
    inject(item) {
      let res = "##news_" + item.id + "##";
      this.$clipboard(res);
      alert('Инжект скопирован в буфер обмена');
    },
    commentsResponseData(data){
      this.commentsList = data;
    },
  },

  computed: {
    properties () {
      return Object.values(this.videoItem.properties).filter(property =>
        Number(property.value)
      )
    },
    videoLink() {
      if (this.videoItem.video.match("(www.)?youtube|youtu.be")) {
        const youtubeId = this.videoItem.video
          .split(/v\/|v=|youtu\.be\//)[1]
          .split(/[?&]/)[0];
        return `https://www.youtube.com/embed/${youtubeId}`;
      }

      return this.videoItem.video;
    }
  }
};
</script>

<style lang="less" scoped>
.section {
  padding-top: 20px;
}
.video-alias {
  padding-bottom: 50px;

  &-header {
    position: relative;
    box-shadow: 0px 26px 38px -11px rgba(255, 0, 214, 0.25);
  }
  &-body {
    margin-top: 80px;
    display: flex;
    justify-content: space-between;
    background: #8d9697;
    padding: 0 0 0 15px;
  }
  &-main {
    color: white;
    flex: 0 1 815px;
  }
  &-aside {
    margin-left: 10px;
    flex: 0 1 420px;
    max-width: 420px;
  }

  @media screen and(max-width: 1000px) {
    &-body {
      flex-direction: column;
      margin-top: 30px;
    }
    &-main {
      flex: auto;
    }
    &-aside {
      flex: auto;
      max-width: 100%;
      margin: 40px auto 0;
    }
  }
}

.header {
  &-video {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 16 / 9;

    iframe {
      width: 100%;
      height: 100%;
    }
  }
  &-bg {
    z-index: 0;
    position: absolute;
    bottom: 0;
    transform: translateY(50%);

    img {
      width: 100%;
      height: auto;
    }
  }
}

.main {
  &-title {
    h1 {
      font-size: 48px;
      line-height: 120%;
    }
  }

  &-description {
    margin-top: 20px;
    font-size: 24px;
  }

  @media screen and(max-width: 768px) {
    &-title {
      h1 {
        font-size: 22px;
      }
    }
    &-description {
      font-size: 18px;
    }
  }
}

.aside {
  &-list {
    display: flex;
    flex-direction: column;
  }

  &-item {
    margin-bottom: 28px;
  }
}
.socials-share__link .icon {
  html.dark-mode & {
    color: #fff;
    fill: #fff;
  }
}
.socials-share__link {
  html.dark-mode & {
    background-color: rgba(90, 116, 139, 0.5);
  }
}
.detail-top__header-side {
  html.dark-mode & {
    margin-top: 30px;
  }
}
.admin-button-in-news{
  margin-bottom: 30px;
  a{
    background-color: #000;
    color: #fff;
    font-size: 14px;
    padding: 8px 19px;
    cursor: pointer;
  }
  .inject{
    background-color: #1976d2;
  }
  .copy{
    background-color: #4caf50;
  }
}
</style>