diff --git a/assets/css/history.css b/assets/css/history.css deleted file mode 100644 index 7e8c00e..0000000 --- a/assets/css/history.css +++ /dev/null @@ -1,28 +0,0 @@ -.history { - flex-direction: column; - justify-content: flex-end; - height: 100%; -} - -.history.has-content { - justify-content: space-between; -} - -.history-content-title-wrapper { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} - -.history .scroll-view { - overflow-x: hidden; - overflow-y: auto; -} - -.history-content:hover .in-content-button { - opacity: 1; -} - -.history-content-title-wrapper .play-count { - margin-right: 4px; -} \ No newline at end of file diff --git a/assets/css/playlist-item.css b/assets/css/playlist-item.css new file mode 100644 index 0000000..2e4058c --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/assets/css/playlist.css b/assets/css/playlist.css index e4405dd..6970143 100644 --- 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 index 8a2ebc3..d7494a8 100644 --- a/assets/index.html +++ b/assets/index.html @@ -9,11 +9,11 @@ jukebox - + - + @@ -116,6 +116,7 @@

+ diff --git a/assets/js/history.js b/assets/js/history.js index c5215a4..3461426 100644 --- 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: `
- -
-
- -
-
- {{ content.playCount }} - {{ content.track.title }} -
-
- {{ humanizeTime(content.track.lengthSeconds) }} -
-
- -
-
- - library_add - -
-
- +
diff --git a/assets/js/playlist-item.js b/assets/js/playlist-item.js new file mode 100644 index 0000000..cf9fbf2 --- /dev/null +++ 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: ` + +
+
+ + equalizer + + +
+
+
+
+ {{ track.playCount }} +
+
+ {{ content.title }} +
+
+
+
+ {{ humanizeTime }} +
+
+ +
+
+ + library_add + + + + +
+
+ ` +}); diff --git a/assets/js/playlist.js b/assets/js/playlist.js index e1aa462..def4527 100644 --- 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: `
-
- - -
-
- - equalizer - - -
-
- {{ content.title }} -
-
- {{ humanizeTime(content.lengthSeconds) }} -
-
- -
-
- - - -
-
- - -
-
+ + + +
diff --git a/e2e/custom_assertions/currentTitleEquals.js b/e2e/custom_assertions/currentTitleEquals.js index 8de710f..e4a54cd 100644 --- 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 index 5970a29..faa14d8 100644 --- 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 index c6ce830..17324a1 100644 --- 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' ];