From 58296533e7b66092422f446528c73314fed0b189 Mon Sep 17 00:00:00 2001 From: sunya9 Date: Sun, 8 Oct 2017 18:46:28 +0900 Subject: [PATCH 1/7] upgrade bulma to 0.5.3 --- assets/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/index.html b/assets/index.html index 8a2ebc3..236ed51 100644 --- a/assets/index.html +++ b/assets/index.html @@ -9,7 +9,7 @@ jukebox - + From 1434401de68b2466c085f8184b59d56cc3cbe70a Mon Sep 17 00:00:00 2001 From: sunya9 Date: Sun, 8 Oct 2017 18:49:54 +0900 Subject: [PATCH 2/7] Remove history css --- assets/css/history.css | 28 ---------------------------- assets/index.html | 1 - 2 files changed, 29 deletions(-) delete mode 100644 assets/css/history.css 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/index.html b/assets/index.html index 236ed51..b1ca480 100644 --- a/assets/index.html +++ b/assets/index.html @@ -13,7 +13,6 @@ - From db212bfb9a7deb9422557f5becb91e15a5236af1 Mon Sep 17 00:00:00 2001 From: sunya9 Date: Sun, 8 Oct 2017 18:50:21 +0900 Subject: [PATCH 3/7] Add playlist-item component --- assets/css/playlist-item.css | 24 ++++++++++++ assets/index.html | 2 + assets/js/playlist-item.js | 71 ++++++++++++++++++++++++++++++++++++ 3 files changed, 97 insertions(+) create mode 100644 assets/css/playlist-item.css create mode 100644 assets/js/playlist-item.js diff --git a/assets/css/playlist-item.css b/assets/css/playlist-item.css new file mode 100644 index 0000000..a119046 --- /dev/null +++ b/assets/css/playlist-item.css @@ -0,0 +1,24 @@ +.play-count { + width: 3rem; +} + +.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/index.html b/assets/index.html index b1ca480..d7494a8 100644 --- a/assets/index.html +++ b/assets/index.html @@ -13,6 +13,7 @@ + @@ -115,6 +116,7 @@

+ diff --git a/assets/js/playlist-item.js b/assets/js/playlist-item.js new file mode 100644 index 0000000..ff2f4ac --- /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 + + + + +
+
+
+ ` +}); From 1fcef93105adb52de998278f551a9707321a61f3 Mon Sep 17 00:00:00 2001 From: sunya9 Date: Sun, 8 Oct 2017 18:50:47 +0900 Subject: [PATCH 4/7] Fix layouts --- assets/css/playlist.css | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) 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; From 57668aad561ef5d246603fa900dc9931ecf4a330 Mon Sep 17 00:00:00 2001 From: sunya9 Date: Sun, 8 Oct 2017 18:51:41 +0900 Subject: [PATCH 5/7] Refactoring by using playlist-item component --- assets/js/history.js | 43 ++------------------------------------ assets/js/playlist.js | 48 ++++++++----------------------------------- 2 files changed, 10 insertions(+), 81 deletions(-) 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.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) }} -
-
- -
-
- - - -
-
- - -
-
+ + + +
From b9edd7bc9a8727e9cff30bbb4a873a43a366ccf3 Mon Sep 17 00:00:00 2001 From: sunya9 Date: Sun, 8 Oct 2017 19:20:44 +0900 Subject: [PATCH 6/7] Change an URL because removed --- tests/helper/sample_urls.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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' ]; From fdf78d48f39e8b1992a01f59ec8a1d89d09ab2e4 Mon Sep 17 00:00:00 2001 From: sunya9 Date: Sun, 8 Oct 2017 19:21:12 +0900 Subject: [PATCH 7/7] Fix for tests --- assets/css/playlist-item.css | 4 -- assets/js/playlist-item.js | 64 ++++++++++----------- e2e/custom_assertions/currentTitleEquals.js | 5 +- e2e/tests/history_test.js | 24 ++++---- 4 files changed, 45 insertions(+), 52 deletions(-) diff --git a/assets/css/playlist-item.css b/assets/css/playlist-item.css index a119046..2e4058c 100644 --- a/assets/css/playlist-item.css +++ b/assets/css/playlist-item.css @@ -1,7 +1,3 @@ -.play-count { - width: 3rem; -} - .playlist-content { overflow: hidden; } diff --git a/assets/js/playlist-item.js b/assets/js/playlist-item.js index ff2f4ac..cf9fbf2 100644 --- a/assets/js/playlist-item.js +++ b/assets/js/playlist-item.js @@ -28,43 +28,43 @@ Vue.component('playlist-item', { }, template: ` - -
-
-
- - equalizer - - -
-
-
-
- {{ track.playCount }} -
-
- {{ content.title }} -
+
+
+ + equalizer + + +
+
+
+
+ {{ track.playCount }} +
+
+ {{ content.title }}
-
- {{ humanizeTime }} -
-
- -
-
- - library_add - - - - -
+
+
+ {{ humanizeTime }} +
+
+ +
+
+ + library_add + + + +
` 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)