From afea5747dc5021491f03babb8fef9dd8a27b5143 Mon Sep 17 00:00:00 2001
From: vapormusic <vietanhfat@gmail.com>
Date: Sat, 18 Dec 2021 10:42:49 +0700
Subject: [PATCH] add context buttons to the squares

---
 .../cider-ui/views/components/lyrics-view.ejs |   1 -
 .../components/mediaitem-square-large.ejs     | 124 ++++++++++++++++-
 .../views/components/mediaitem-square-sp.ejs  | 126 +++++++++++++++++-
 resources/cider-ui/views/svg/more.svg         |   3 +
 4 files changed, 243 insertions(+), 11 deletions(-)
 create mode 100644 resources/cider-ui/views/svg/more.svg

diff --git a/resources/cider-ui/views/components/lyrics-view.ejs b/resources/cider-ui/views/components/lyrics-view.ejs
index ff8a7d13..5a6d9320 100644
--- a/resources/cider-ui/views/components/lyrics-view.ejs
+++ b/resources/cider-ui/views/components/lyrics-view.ejs
@@ -154,7 +154,6 @@
                 return relativeTime >= verseTime && relativeTime <= timeEnd - timeStart
             },
             getVerseLine(index) {
-
                 if (this.richlyrics[index] != null && this.richlyrics[index].l != null) {
                     return this.richlyrics[index].l
                 }
diff --git a/resources/cider-ui/views/components/mediaitem-square-large.ejs b/resources/cider-ui/views/components/mediaitem-square-large.ejs
index 76f235ff..dddc3836 100644
--- a/resources/cider-ui/views/components/mediaitem-square-large.ejs
+++ b/resources/cider-ui/views/components/mediaitem-square-large.ejs
@@ -1,8 +1,8 @@
 <script type="text/x-template" id="mediaitem-square-large">
     <template>
-        <div style="position: relative; display: inline-flex;">
+        <div ref="main" style="position: relative; display: inline-flex;"  @contextmenu="contextMenu">
             <div @click.self='app.routeView(item)'
-                 class="cd-mediaitem-square-large">
+                 class="cd-mediaitem-square-large" ref="main2">
                 <div class="artwork">
                     <mediaitem-artwork
                             :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
@@ -14,14 +14,25 @@
                     <div class="button" style="
                     border-radius: 50%;
                     background: rgba(50,50,50,0.7);"
-                         :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
+                         :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px','position': 'absolute',
                         width: '40px',
                         height: '40px',} :
-                        {margin: '35px',
+                        {margin: '35px', 'position': 'absolute',
                         width: '120px',
                         height: '120px',}]" @click="app.playMediaItem(item)">
                         <%- include("../svg/play.svg") %>
                     </div>
+                    <div class="button" style="
+                    border-radius: 50%;
+                    background: rgba(50,50,50,0.7);"
+                         :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'position': 'absolute','margin': '140px',
+                        width: '40px', 'margin-left': '10px',
+                        height: '40px',} :
+                        {display: 'none',margin: '35px',
+                        width: '120px',
+                        height: '120px',}]" @click="clickContext() ">
+                        <%- include("../svg/more.svg") %>
+                    </div>
                 </div>
                 <div class="title text-overflow-elipsis" @click='app.routeView(item)'>
                     {{ item.attributes.name ?? '' }}
@@ -43,6 +54,17 @@
                     height: '120px',}]" @click="app.playMediaItem(item)">
                     <%- include("../svg/play.svg") %>
                 </div>
+                <div class="button" style="
+                border-radius: 50%;
+                background: rgba(50,50,50,0.7);"
+                     :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'position': 'absolute','margin': '140px',
+                    width: '40px', 'margin-left': '10px',
+                    height: '40px',} :
+                    {display: 'none',margin: '35px',
+                    width: '120px',
+                    height: '120px',}]" @click="console.log('as');contextMenu()">
+                    <%- include("../svg/more.svg") %>
+                </div>
             </div>
         </div>
     </template>
@@ -52,6 +74,98 @@
     Vue.component('mediaitem-square-large', {
         template: '#mediaitem-square-large',
         props: ['item'],
-        methods: {}
+        methods: { 
+             clickContext() {
+                var evt =  document.createEvent('MouseEvent');
+                var rect = this.$refs.main2.getBoundingClientRect();
+                evt.initMouseEvent(
+                    "contextmenu",
+                    true /* bubble */, true /* cancelable */,
+                    window, null,
+                    0, 0, rect.x + 100, rect.y +100,  /* coordinates */
+                    false, false, false, false, /* modifier keys */
+                    0 /*left*/, null
+                );
+                this.$refs.main.dispatchEvent(evt);
+             }
+            ,contextMenu(event) {
+                if (!event){event = this.$refs.main} else {console.log(event)}
+                let self = this
+                let useMenu = "normal"
+                if (app.selectedMediaItems.length <= 1) {
+                    app.selectedMediaItems = []
+                    app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid)
+                } else {
+                    useMenu = "multiple"
+                }
+                let menus = {
+                    multiple: {
+                        items: [
+                            {
+                                name: `Play ${app.selectedMediaItems.length} tracks next`,
+                                action: () => {
+                                    let itemsToPlay = {}
+                                    app.selectedMediaItems.forEach(item => {
+                                        if (!itemsToPlay[item.kind]) {
+                                            itemsToPlay[item.kind] = []
+                                        }
+                                        itemsToPlay[item.kind].push(item.id)
+                                    })
+                                    // loop through itemsToPlay
+                                    for (let kind in itemsToPlay) {
+                                        let ids = itemsToPlay[kind]
+                                        if (ids.length > 0) {
+                                            app.mk.playNext({[kind + "s"]: itemsToPlay[kind]})
+                                        }
+                                    }
+                                    console.log(itemsToPlay)
+                                    app.selectedMediaItems = []
+                                }
+                            },
+                            {
+                                name: `Play ${app.selectedMediaItems.length} tracks later`,
+                                action: () => {
+                                    let itemsToPlay = {}
+                                    app.selectedMediaItems.forEach(item => {
+                                        if (!itemsToPlay[item.kind]) {
+                                            itemsToPlay[item.kind] = []
+                                        }
+                                        itemsToPlay[item.kind].push(item.id)
+                                    })
+                                    // loop through itemsToPlay
+                                    for (let kind in itemsToPlay) {
+                                        let ids = itemsToPlay[kind]
+                                        if (ids.length > 0) {
+                                            app.mk.playLater({[kind + "s"]: itemsToPlay[kind]})
+                                        }
+                                    }
+                                    app.selectedMediaItems = []
+                                }
+                            },
+                        ]
+                    },
+                    normal: {
+                        items: [
+                            {
+                                "name": "Play Next",
+                                "action": function () {
+                                    app.mk.playNext({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id})
+                                    app.mk.queue._reindex()
+                                    app.selectedMediaItems = []
+                                }
+                            },
+                            {
+                                "name": "Play Later",
+                                "action": function () {
+                                    app.mk.playLater({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id})
+                                    app.mk.queue._reindex()
+                                    app.selectedMediaItems = []
+                                }
+                            },
+                        ]
+                    }
+                }
+                CiderContextMenu.Create(event, menus[useMenu])
+            },}
     });
 </script>
\ No newline at end of file
diff --git a/resources/cider-ui/views/components/mediaitem-square-sp.ejs b/resources/cider-ui/views/components/mediaitem-square-sp.ejs
index f070e9cd..b1a79d03 100644
--- a/resources/cider-ui/views/components/mediaitem-square-sp.ejs
+++ b/resources/cider-ui/views/components/mediaitem-square-sp.ejs
@@ -1,8 +1,8 @@
 <script type="text/x-template" id="mediaitem-square-sp">
     <template>
-        <div style="position: relative; display: inline-flex;">
+        <div ref="main" style="position: relative; display: inline-flex;" @contextmenu="contextMenu">
             <div @click.self='app.routeView(item)'
-                 class="cd-mediaitem-square-sp" :style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}">
+                 class="cd-mediaitem-square-sp"  ref="main2" :style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}">
                 <div class="artwork">
                     <mediaitem-artwork
                             :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
@@ -14,14 +14,25 @@
                     <div class="button" style="
                     border-radius: 50%;
                     background: rgba(50,50,50,0.7);"
-                         :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
+                         :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px','position': 'absolute',
                         width: '40px',
                         height: '40px',} :
-                        {margin: '35px',
+                        {margin: '35px','position': 'absolute',
                         width: '120px',
                         height: '120px',}]" @click="app.playMediaItem(item)">
                         <%- include("../svg/play.svg") %>
                     </div>
+                    <div class="button" style="
+                    border-radius: 50%;
+                    background: rgba(50,50,50,0.7);"
+                         :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'position': 'absolute','margin': '140px',
+                        width: '40px', 'margin-left': '10px',
+                        height: '40px',} :
+                        {display: 'none',margin: '35px',
+                        width: '120px',
+                        height: '120px',}]" @click="clickContext()">
+                        <%- include("../svg/more.svg") %>
+                    </div>
                 </div>
                 <div class="title text-overflow-elipsis"
                      :style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}" style="font-weight: 600">
@@ -49,7 +60,19 @@
                    height: '120px',}]" @click="app.playMediaItem(item)">
                     <%- include("../svg/play.svg") %>
                 </div>
+                <div class="button" style="
+                border-radius: 50%;
+                background: rgba(50,50,50,0.7);"
+                     :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'position': 'absolute','margin': '140px',
+                    width: '40px', 'margin-left': '10px',
+                    height: '40px',} :
+                    {display: 'none',margin: '35px',
+                    width: '120px',
+                    height: '120px',}]" @click="clickContext()">
+                    <%- include("../svg/more.svg") %>
+                </div>
             </div>
+
         </div>
     </template>
 </script>
@@ -58,6 +81,99 @@
     Vue.component('mediaitem-square-sp', {
         template: '#mediaitem-square-sp',
         props: ['item'],
-        methods: {}
+        methods: { clickContext() {
+                var evt =  document.createEvent('MouseEvent');
+                var rect = this.$refs.main2.getBoundingClientRect();
+                evt.initMouseEvent(
+                    "contextmenu",
+                    true /* bubble */, true /* cancelable */,
+                    window, null,
+                    0, 0, rect.x + 100, rect.y +100,  /* coordinates */
+                    false, false, false, false, /* modifier keys */
+                    0 /*left*/, null
+                );
+                this.$refs.main.dispatchEvent(evt);
+             }
+            ,contextMenu(event) {
+                if (!event){event = this.$refs.main} else {console.log(event)}
+                let self = this
+                let useMenu = "normal"
+                if (app.selectedMediaItems.length <= 1) {
+                    app.selectedMediaItems = []
+                    app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid)
+                } else {
+                    useMenu = "multiple"
+                }
+                let menus = {
+                    multiple: {
+                        items: [
+                            {
+                                name: `Play ${app.selectedMediaItems.length} tracks next`,
+                                action: () => {
+                                    let itemsToPlay = {}
+                                    app.selectedMediaItems.forEach(item => {
+                                        if (!itemsToPlay[item.kind]) {
+                                            itemsToPlay[item.kind] = []
+                                        }
+                                        itemsToPlay[item.kind].push(item.id)
+                                    })
+                                    // loop through itemsToPlay
+                                    for (let kind in itemsToPlay) {
+                                        let ids = itemsToPlay[kind]
+                                        if (ids.length > 0) {
+                                            app.mk.playNext({[kind + "s"]: itemsToPlay[kind]})
+                                        }
+                                    }
+                                    console.log(itemsToPlay)
+                                    app.selectedMediaItems = []
+                                }
+                            },
+                            {
+                                name: `Play ${app.selectedMediaItems.length} tracks later`,
+                                action: () => {
+                                    let itemsToPlay = {}
+                                    app.selectedMediaItems.forEach(item => {
+                                        if (!itemsToPlay[item.kind]) {
+                                            itemsToPlay[item.kind] = []
+                                        }
+                                        itemsToPlay[item.kind].push(item.id)
+                                    })
+                                    // loop through itemsToPlay
+                                    for (let kind in itemsToPlay) {
+                                        let ids = itemsToPlay[kind]
+                                        if (ids.length > 0) {
+                                            app.mk.playLater({[kind + "s"]: itemsToPlay[kind]})
+                                        }
+                                    }
+                                    app.selectedMediaItems = []
+                                }
+                            },
+                        ]
+                    },
+                    normal: {
+                        items: [
+                            
+                            {
+                                "name": "Play Next",
+                                "action": function () {
+                                    app.mk.playNext({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id})
+                                    app.mk.queue._reindex()
+                                    app.selectedMediaItems = []
+                                }
+                            },
+                            {
+                                "name": "Play Later",
+                                "action": function () {
+                                    app.mk.playLater({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id})
+                                    app.mk.queue._reindex()
+                                    app.selectedMediaItems = []
+                                }
+                            },
+                            
+                        ]
+                    }
+                }
+                CiderContextMenu.Create(event, menus[useMenu])
+            },}
     });
 </script>
\ No newline at end of file
diff --git a/resources/cider-ui/views/svg/more.svg b/resources/cider-ui/views/svg/more.svg
new file mode 100644
index 00000000..8abcf599
--- /dev/null
+++ b/resources/cider-ui/views/svg/more.svg
@@ -0,0 +1,3 @@
+<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph">
+    <path d="M8.89547677 13.5330073c0-1.1057457-.97371638-2.0959657-2.09596577-2.0959657-1.13875305 0-2.0794621.99022-2.0794621 2.0959657 0 1.1222494.94070905 2.0794621 2.0794621 2.0794621 1.12224939 0 2.09596577-.9572127 2.09596577-2.0794621zm6.68398533 0c0-1.1057457-.9572127-2.0959657-2.0794621-2.0959657-1.1222494 0-2.0794621.99022-2.0794621 2.0959657 0 1.1222494.9572127 2.0794621 2.0794621 2.0794621 1.1222494 0 2.0794621-.9572127 2.0794621-2.0794621zm6.700489 0c0-1.1057457-.940709-2.0959657-2.0794621-2.0959657-1.1222494 0-2.0959658.99022-2.0959658 2.0959657 0 1.1222494.9737164 2.0794621 2.0959658 2.0794621 1.1387531 0 2.0794621-.9572127 2.0794621-2.0794621z"></path>
+</svg>
\ No newline at end of file