unblee · sunya9 · Oct 8, 2017 · Oct 8, 2017 · Oct 8, 2017 · Oct 8, 2017
diff --git a/assets/css/history.css b/assets/css/history.css
diff --git a/assets/css/playlist-item.css b/assets/css/playlist-item.css
@@ -0,0 +1,20 @@
+.playlist-content {
+  overflow: hidden;
+}
+.playlist-content:last-child {
+  margin-bottom: -1px;
+}
+
+.playlist-content-title-wrapper {
+  padding-left: 0;
+  padding-right: 0;
+}
+.playlist-content-title {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.playlist-thumbnail {
+  vertical-align: middle;
+}
diff --git a/assets/css/playlist.css b/assets/css/playlist.css
@@ -43,12 +43,12 @@
 }
 
 .scroll-view {
-  overflow: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
   position: relative;
   flex: 1;
   border-right: 1px solid #dbdbdb;
   border-left: 1px solid #dbdbdb;
-  margin-bottom: -1px;
 }
 
 .scroll-view .panel-block {
@@ -66,19 +66,10 @@
   padding-bottom: 0;
 }
 
-.playlist-content-title-wrapper {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
 .playlist-border-top {
   border-top: 1px solid #dbdbdb;
 }
 
-.thumbnail-wrapper {
-  padding-right: 0;
-}
-
 .tab-with-icon {
   display: inline-flex;
   align-items: center;

diff --git a/assets/index.html b/assets/index.html
@@ -9,11 +9,11 @@
   <title>jukebox</title>
   <link rel="shortcut icon" href="/favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.min.css">
   <link rel="stylesheet" href="css/index.css">
   <link rel="stylesheet" href="css/player.css">
   <link rel="stylesheet" href="css/playlist.css">
-  <link rel="stylesheet" href="css/history.css">
+  <link rel="stylesheet" href="css/playlist-item.css">
   <link rel="stylesheet" href="css/links-sender.css">
   <link rel="stylesheet" href="css/animation-badge.css">
   <link rel="stylesheet" href="css/copy-link-button.css">
@@ -116,6 +116,7 @@ <h1 class="app-title">
   <script src="js/history.js"></script>
   <script src="js/playlist.js"></script>
   <script src="js/player.js"></script>
+  <script src="js/playlist-item.js"></script>
   <script src="js/links-sender.js"></script>
   <script src="js/index.js"></script>
 </body>

diff --git a/assets/js/history.js b/assets/js/history.js
@@ -1,49 +1,10 @@
 Vue.component('history', {
-  methods: {
-    humanizeTime(seconds) {
-      return Util.humanizeTimeFromSeconds(seconds);
-    },
-    async addFromHistory(idx) {
-      try {
-        this.addTracks([this.history[idx].track.link]);
-      } catch (e) {
-        console.error(e);
-      }
-    },
-    ...mapActions(['addTracks'])
-  },
-  computed: {
-    ...mapState(['history'])
-  },
-
+  computed: mapState(['history']),
   template: `
   <div class="scroll-view-wrapper history">
     <div class="scroll-view">
       <div class="tracks">
-        <a v-for="(content,idx) in history" class="panel-block history-content is-paddingless"
-          :title="content.track.title"
-          >
-          <div class="control columns is-marginless is-mobile">
-            <div class="column is-1 align-self-center has-text-centered is-paddingless-vertical thumbnail-wrapper">
-              <img :src="content.track.thumbnailLink" class="is-block">
-            </div>
-            <div class="column is-7 history-content-title-wrapper">
-              <span class="tag is-light play-count is-rounded">{{ content.playCount }}</span>
-              <span class="history-title">{{ content.track.title }}</span>
-            </div>
-            <div class="column has-text-centered is-2">
-              {{ humanizeTime(content.track.lengthSeconds) }}
-            </div>
-            <div class="column is-1 has-text-centered align-self-center is-paddingless-vertical">
-              <copy-link-button class="is-flex" :link="content.track.link" tooltip-duration="1000"></copy-link-button>
-            </div>
-            <div class="column is-1 has-text-centered align-self-center is-paddingless-vertical">
-              <a class="is-flex in-content-button add-content-button" @click.prevent.stop="addFromHistory(idx)">
-                <i class="material-icons icon" title="Add to Playlist">library_add</i>
-              </a>
-            </div>
-          </div>
-        </a>
+        <playlist-item v-for="(content, idx) in history" mode="history" :track="content" :idx="idx" />
       </div>
     </div>
   </div>

diff --git a/assets/js/playlist-item.js b/assets/js/playlist-item.js
@@ -0,0 +1,71 @@
+Vue.component('playlist-item', {
+  props: ['track', 'idx', 'mode'],
+  computed: {
+    humanizeTime() {
+      return Util.humanizeTimeFromSeconds(this.content.lengthSeconds);
+    },
+    historyMode() {
+      return this.mode === 'history';
+    },
+    playlistMode() {
+      return this.mode !== 'history';
+    },
+    content() {
+      return this.historyMode ? this.track.track : this.track;
+    },
+    ...mapGetters(['isNowPlayingIdx']),
+    ...mapState(['history'])
+  },
+  methods: {
+    ...mapActions(['deleteTrack', 'playMusic', 'addTracks']),
+    async addFromHistory() {
+      try {
+        this.addTracks([this.history[this.idx].track.link]);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  },
+
+  template: `
+    <a class="panel-block is-block playlist-content"
+    :class="{
+      'now-playing-content is-active':isNowPlayingIdx(idx),
+    }"
+    :title="content.title"
+    @click="() => playlistMode && playMusic(idx)"
+    >
+      <div class="columns is-mobile">
+        <div class="column is-1 align-self-center has-text-centered thumbnail-wrapper">
+          <span class="panel-icon" v-if="playlistMode && isNowPlayingIdx(idx)">
+            <i class="material-icons icon">equalizer</i>
+          </span>
+          <img :src="content.thumbnailLink" v-else class=" playlist-thumbnail">
+        </div>
+        <div class="column is-7">
+          <div class="columns is-mobile">
+            <div class="column is-2 has-text-centered play-count" v-if="historyMode">
+              <span class="tag is-light is-rounded">{{ track.playCount }}</span>
+            </div>
+            <div class="column playlist-content-title" :class="{'is-10': historyMode}">
+              {{ content.title }}
+            </div>
+          </div>
+        </div>
+        <div class="column has-text-centered is-2">
+          {{ humanizeTime }}
+        </div>
+        <div class="column is-1 has-text-centered align-self-center is-paddingless-vertical">
+          <copy-link-button class="is-flex" :link="content.link" tooltip-duration="1000"></copy-link-button>
+        </div>
+        <div class="column is-1 has-text-centered align-self-center is-paddingless-vertical">
+          <a class="is-flex in-content-button add-content-button" @click.prevent.stop="addFromHistory" v-if="historyMode">
+            <i class="material-icons icon" title="Add to Playlist">library_add</i>
+          </a>
+          <a class="is-flex in-content-button" @click.prevent.stop="deleteTrack(idx)" v-else>
+            <i class="material-icons icon" title="Delete">&#xE872;</i>
+          </a>
+        </div>
+      </div>
+    </a>`
+});
diff --git a/assets/js/playlist.js b/assets/js/playlist.js
@@ -1,12 +1,9 @@
 Vue.component('playlist', {
   methods: {
-    humanizeTime(seconds) {
-      return Util.humanizeTimeFromSeconds(seconds);
-    },
     openClearPlaylistModal() {
       this.$refs.clearPlaylistModal.open();
     },
-    ...mapActions(['deleteTrack', 'playMusic', 'moveTrack'])
+    ...mapActions(['moveTrack'])
   },
   computed: {
     ...mapState(['playlist']),
@@ -16,42 +13,13 @@ Vue.component('playlist', {
   template: `
   <div class="scroll-view-wrapper playlist">
     <div class="scroll-view">
-      <div class="tracks">
-        <draggable class="panel scroll-view"
-                  v-show="!isPlaylistEmpty"
-                  :list="playlist"
-                  @end="moveTrack">
-          <a v-for="(content,idx) in playlist" class="panel-block playlist-content is-paddingless"
-              :class="{'now-playing-content is-active':isNowPlayingIdx(idx)}"
-              :title="content.title"
-              @click="playMusic(idx)"
-              >
-              <div class="control columns is-marginless is-mobile">
-                <div class="column is-1 align-self-center has-text-centered is-paddingless-vertical thumbnail-wrapper">
-                  <span class="panel-icon" v-if="isNowPlayingIdx(idx)">
-                    <i class="material-icons icon">equalizer</i>
-                  </span>
-                  <img :src="content.thumbnailLink" v-else class="is-block">
-                </div>
-                <div class="column is-7 playlist-content-title-wrapper">
-                  {{ content.title }}
-                </div>
-                <div class="column has-text-centered is-2">
-                  {{ humanizeTime(content.lengthSeconds) }}
-                </div>
-                <div class="column is-1 has-text-centered align-self-center is-paddingless-vertical">
-                  <copy-link-button class="is-flex" :link="content.link" tooltip-duration="1000"></copy-link-button>
-                </div>
-                <div class="column is-1 has-text-centered align-self-center is-paddingless-vertical">
-                  <a class="is-flex in-content-button" @click.prevent.stop="deleteTrack(idx)">
-                    <i class="material-icons icon" title="Delete">&#xE872;</i>
-                  </a>
-                </div>
-              </div>
-            </a>
-          </draggable>
-        </div>
-      </div>
+      <draggable class="panel"
+                v-show="!isPlaylistEmpty"
+                :list="playlist"
+                @end="moveTrack">
+        <playlist-item v-for="(content,idx) in playlist" mode="playlist" :track="content" :idx="idx" />
+      </draggable>
+    </div>
     <div class="panel playlist-controller">
       <div class="panel">
         <div class="panel-block playlist-border-top">

diff --git a/e2e/custom_assertions/currentTitleEquals.js b/e2e/custom_assertions/currentTitleEquals.js
@@ -9,10 +9,7 @@ exports.assertion = function currentTitleEquals(num, msg) {
   this.command = function command(callback) {
     this.api.getTitle(title => {
       this.expected = title;
-      this.api.getText(
-        `.playlist-content:nth-child(${num}) .playlist-content-title-wrapper`,
-        callback
-      );
+      this.api.getText(`.playlist-content:nth-child(${num}) .playlist-content-title`, callback);
     });
   };
 };
diff --git a/e2e/tests/history_test.js b/e2e/tests/history_test.js
@@ -47,15 +47,15 @@ module.exports = {
       .index()
       .moveToElement('@playerBlock', 10, 10)
       .click('@playButton')
-      .waitForElementPresent('.history-content:nth-child(1)', PRESENT_WAIT_TIME)
+      .waitForElementPresent('.playlist-content:nth-child(1)', PRESENT_WAIT_TIME)
       .click('@nextButton')
-      .waitForElementPresent('.history-content:nth-child(2)', PRESENT_WAIT_TIME)
+      .waitForElementPresent('.playlist-content:nth-child(2)', PRESENT_WAIT_TIME)
       .click('@nextButton')
-      .waitForElementPresent('.history-content:nth-child(3)', PRESENT_WAIT_TIME)
-      .assert.elementPresent('.history-content:nth-child(3)')
-      .assert.containsText('.history-content:nth-child(1) .play-count', '1')
-      .assert.containsText('.history-content:nth-child(2) .play-count', '1')
-      .assert.containsText('.history-content:nth-child(3) .play-count', '1');
+      .waitForElementPresent('.playlist-content:nth-child(3)', PRESENT_WAIT_TIME)
+      .assert.elementPresent('.playlist-content:nth-child(3)')
+      .assert.containsText('.playlist-content:nth-child(1) .play-count', '1')
+      .assert.containsText('.playlist-content:nth-child(2) .play-count', '1')
+      .assert.containsText('.playlist-content:nth-child(3) .play-count', '1');
   },
 
   'Play prev music': browser => {
@@ -64,16 +64,16 @@ module.exports = {
       .click('@prevButton')
       .api.pause(WAIT_TIME)
       .page.index()
-      .assert.elementPresent('.history-content:nth-child(3)')
-      .assert.containsText('.history-content:nth-child(1) .play-count', '2') // sorted
-      .assert.containsText('.history-content:nth-child(2) .play-count', '1')
-      .assert.containsText('.history-content:nth-child(3) .play-count', '1');
+      .assert.elementPresent('.playlist-content:nth-child(3)')
+      .assert.containsText('.playlist-content:nth-child(1) .play-count', '2') // sorted
+      .assert.containsText('.playlist-content:nth-child(2) .play-count', '1')
+      .assert.containsText('.playlist-content:nth-child(3) .play-count', '1');
   },
 
   'Add music from history': browser => {
     browser.page
       .index()
-      .click('.history-content:nth-child(1) .add-content-button')
+      .click('.playlist-content:nth-child(1) .add-content-button')
       .click('@playlistTabButton')
       .waitForElementPresent('@playlist', PRESENT_WAIT_TIME)
       .waitForElementPresent('a.playlist-content:nth-child(6)', PRESENT_WAIT_TIME)

diff --git a/tests/helper/sample_urls.js b/tests/helper/sample_urls.js
@@ -2,6 +2,6 @@ module.exports = [
   'https://www.youtube.com/watch?v=P91pvMdoZ80',
   'https://www.youtube.com/watch?v=8yJZ22UZYVs',
   'https://www.youtube.com/watch?v=vn7vfza-6fQ',
-  'https://www.youtube.com/watch?v=UWn-EpzxsE0',
+  'https://www.youtube.com/watch?v=uky39d7tZZo',
   'https://www.youtube.com/watch?v=HLfZs-B_U6M'
 ];