Nuxt.js와 Buefy로 Youtube 플레이어 만들기 메모

요전날의 해커슨에서 이런 것을 만들어 보았습니다. 자신의 메모입니다.

htps: //d 쥬코. cf



Youtube를 재생하면서 목록을 오른쪽에 표시합니다.

결국 이런 느낌 목록 자동 선택까지



덧붙여서 Youtube 플레이어는 이쪽을 그대로 이용

참고 : Nuxt.js 2에서 Youtube 플레이어 포함

Buefy의 Table(b-table)을 이용

이번 create-nuxt-app로 앱을 만들 때 CSS 프레임워크에서 Buerfy

htps : //////> 오 rg / 도쿠 멘 타치 온 / 타 b ぇ # 세이 c 치온

b-table 라는 컴퍼넌트가 준비되어 있어 이것이 상당히 편리했기 때문에 이용해 보았습니다.

간단한 사용

심플한 이용이라면 이런 느낌

Player.vue

<template>
//省略

<b-table
  :data="data"
  :columns="columns"
  ></b-table>

//省略
</template>

<script>
//省略
  data(){
    return{
      //省略

      data: <再生リスト>,
      columns: [
        {
            field: 'rank',
            label: 'DAM RANK/DAY',
            numeric: true,
        },
        {
            field: 'title',
            label: 'TITLE',
        },
      ],
    }
  }
//省略
</script>

깨끗하게 표시됩니다.

다만, 이것만이라면 단지의 표이므로 현재 무엇이 재생되고 있는지의 선택이 되어 있지 않기 때문에, 플레이어적으로는 부족합니다.

선택 사용

selected.sync 라는 속성을 사용해 봅니다.



어디가 재생되고 있는지 알게 되었습니다.
this.selected 에 재생 중인 음악 데이터를 넣으려고 하면 b-tabel측에서 선택 상태가 됩니다. 여기의 로직 부분은 Youtube Player API측의 설명이 길어질 것 같기 때문에 컷.

Player.vue

<template>

//省略
<b-table
  :data="data"
  :columns="columns"
  :selected.sync="selected"
  ></b-table>

//省略

</template>

<script>
//省略
  data(){
    return{
      //省略

      data: <再生リスト>,
      columns: [
        {
            field: 'rank',
            label: 'DAM RANK/DAY',
            numeric: true,
        },
        {
            field: 'title',
            label: 'TITLE',
        },
      ],
      selected: {}, //再生中の音楽データ
    }
  }
//省略
</script>

테이블의 스크롤에 대응(stickyHeaders)

이대로라면 이런 느낌으로 재생 목록이 길어졌을 때 페이지가 굉장히 길어져 버려 조작이 힘들어집니다.

이것을


↓

이렇게

sticky-header 속성을 활성화합니다.<template> 측에서는 :sticky-header="stickyHeaders" 를 추가, <script> 측에서는 data 에 stickyHeaders: true 를 추가합니다.

Player.vue

<template>

//省略
<b-table
  :data="data"
  :columns="columns"
  :selected.sync="selected"
  :sticky-header="stickyHeaders"
  ></b-table>

//省略

</template>

<script>
//省略
  data(){
    return{
      //省略

      data: <再生リスト>,
      columns: [
        {
            field: 'rank',
            label: 'DAM RANK/DAY',
            numeric: true,
        },
        {
            field: 'title',
            label: 'TITLE',
        },
      ],
      selected: {}, //再生中の音楽データ
      stickyHeaders: true //スクロール対応
    }
  }
//省略
</script>

자동으로 스크롤

여기에서 b-table 이야기보다는 Vue.js와 JavaScript 이야기

현재라면, 스크롤 대응은 할 수 있습니다만, 가능하면 페이지를 열 때에 자동적으로 그 요소를 표시시키고 싶네요.

이런 느낌


여기가 상당히 정보가 없어서 힘들었습니다.

1. 선택되는 요소 식별

2. 지정된 요소로 스크롤

결과 이 두 단계로 구현할 수 있었습니다.

1. 선택되는 요소 식별

Vue.js라면 this.$el 에서 가상 DOM의 요소 액세스를 할 수있는 것 같습니다.
(인식이 잘못되면 코멘트해 주세요.)

참고 : DOM 요소에 해당하는 vue.js 구성 요소를 찾으려면

b-table에서 선택 중인 클래스는 .b-table 와 .is-selected 의 클래스에서 검색할 수 있으므로 이런 식으로 검색할 수 있습니다.

this.$el.querySelector('.b-table .is-selected');

2. 특정 요소로 스크롤

scrollIntoView() 를 사용하여 구현할 수있었습니다. 이것은 보통의 JS의 메소드입니다만, 별로 사용한 적이 없었기 때문에 존재를 처음으로 알았습니다.

참고 : 잘 알려지지 않은 메서드 element.scrollIntoView()

정리해보기

이런 느낌입니다. 이번 내 구현이라면, 재생 후에 셀렉션을 하고 있으므로, 그대로 쓰면 절묘한 타이밍으로 is-selectedクラス 가 부여되지 않고 잘 스크롤되지 않았기 때문에 setTimeout() 로 약간 타이밍을 어긋나고 있습니다.

  //スクロール
  setTimeout(()=>{
    const nowVideoElm = this.$el.querySelector('.b-table .is-selected');
    nowVideoElm.scrollIntoView({
      behavior: 'smooth',
      block: 'center',
    });
  },100);

behavior: 'smooth' 로 설정하면 애니메이션이 좋은 느낌이네요.

요약

b-table , scrollIntoView() , this.$el 등을 조합해 사용해 보았습니다만 꽤 편리하고 유스 케이스 있을지도 모르겠네요.

비교적이 애니메이션을 좋아합니다.

htps: //d 쥬코. cf