fix media device selector

Signed-off-by: Laurent ARNAL <[email protected]>

Author: lo92fr

bundles/org.openhab.ui/web/src/components/widgets/system/oh-player-controls.vue

@@ -54,18 +54,8 @@
     			icon-color="gray"  
     			@click="openDeviceSelectorPopup"/>
 
-          
-  <!--    
-          <media-device-popup :opened="deviceSelectorPopupOpened"  :player-item="config.item"  @update:opened=""/>    
-	<media-popup :opened="browserPopupOpened"  :player-item="config.item"  @update:opened=""/>
-  
-    
-               -->
-
-               <!--
-  browserPopupOpened = $event
-  deviceSelectorPopupOpened = $event
-  -->
+  <media-popup :opened="browserPopupOpened"  :player-item="config.item"  @update:opened="browserPopupOpened = $event"/>        
+  <media-device-popup :opened="deviceSelectorPopupOpened"  :player-item="config.item"  @update:opened="deviceSelectorPopupOpened = $event"/>      
   </f7-segmented>
   </div>
 
@@ -165,7 +155,7 @@ export default {
       useStatesStore().sendCommand(this.config.item, 'NEXT')
     },
     mediaChange (value) {
-      // this.$store.dispatch('sendCommand', { itemName: this.config.item, cmd: 'spotify:playlist:5Z4AD0u9fwnvtsj7ce5ZLS' }
+      //useStatesStore().sendCommand(this.config.item, 'spotify:playlist:5Z4AD0u9fwnvtsj7ce5ZLS')
     }
   }
 }

bundles/org.openhab.ui/web/src/components/widgets/system/oh-simple-player-controls.vue

@@ -8,7 +8,7 @@
       <f7-button color="blue" @click.stop="skipNext()" large icon-material="skip_next" icon-size="24" icon-color="gray" style="vertical-align: middle;display: flex;"/>
 
       <f7-button color="blue" large icon-material="speaker" icon-size="24" icon-color="gray" @click="openDeviceSelectorPopup" style="vertical-align: middle;display: flex;"/>
-      <media-device-selector-popup :opened="deviceSelectorPopupOpened"  :player-item="currentPlayerItem"  @update:opened="deviceSelectorPopupOpened = $event"/>
+      <media-device-selector-popup :opened="deviceSelectorPopupOpened"  :player-item="currentPlayerItem"  @update:opened="deviceSelectorPopupOpened = $event" :f7route="f7route" :f7router="f7router"/>
 
       <f7-button color="blue" large icon-material="queue_music" icon-size="24" icon-color="gray" href="/mediabrowser/?path=/Root/CurrentQueue" style="vertical-align: middle;display: flex;"/>
     </f7-segmented>
@@ -36,6 +36,10 @@ import { useComponentsStore } from '@/js/stores/useComponentsStore'
 
 export default {
   mixins: [mixin],
+  props: {
+    f7route: Object, 
+    f7router: Object
+  },
   widget: OhPlayerDefinition,
   watch: {
     'useMediaStore().currentGlobalPlayerItem'(newVal) {

bundles/org.openhab.ui/web/src/js/routes.js

@@ -6,8 +6,8 @@ import PageViewPage from '../pages/page/page-view.vue'
 import AnalyzerPopup from '../pages/analyzer/analyzer-popup.vue'
 import MediaPopup from '../pages/media/media-browser-popup.vue'
 import MediaBrowser from '../pages/media/media-browser.vue'
-//import MediaDeviceSelectorPopup from '../pages/media/media-device-selector-popup.vue'
-//import MediaDeviceSelector from '../pages/media/media-device-selector.vue'
+import MediaDeviceSelectorPopup from '../pages/media/media-device-selector-popup.vue'
+import MediaDeviceSelector from '../pages/media/media-device-selector.vue'
 import { AddonTitles } from '@/assets/addon-store'
 
 const AboutPage = () => import(/* webpackChunkName: "about-page" */ '@/pages/about.vue')
@@ -566,23 +566,18 @@ export default [
       animate: false,
     }
   },
-  /*
   {
-    path: '/mediadeviceselectorpopup/',
+    path: '/mediadeviceselector/',
     popup: {
-      component: MediaDeviceSelectorPopup
+      component: MediaDeviceSelector
     }
   },
-  */
-  /*
   {
-    path: '/mediadeviceselector/',
-    component: MediaDeviceSelector,
-    options: {
-      transition: 'f7-dive',
-      animate: false,
+    path: '/mediadeviceselectorpopup/',
+    popup: {
+      component: MediaDeviceSelectorPopup
     }
-  },*/
+  },
   {
     path: '(.*)',
     component: NotFoundPage

bundles/org.openhab.ui/web/src/js/stores/useMediaStore.ts

@@ -51,5 +51,4 @@ export const useMediaStore = defineStore('media', {
       }
     }
   }
-
 })

bundles/org.openhab.ui/web/src/pages/media/media-browser.vue

@@ -198,8 +198,7 @@
           -->
           <div>
             <div style="width:300px;padding:20px;padding-left: 140px;">
-            
-              <oh-simple-player-controls />
+              <oh-simple-player-controls :f7route="f7route" :f7router="f7router"/>
             </div>
           </div>
           <!--

bundles/org.openhab.ui/web/src/pages/media/media-device-selector-popup.vue

@@ -3,7 +3,7 @@
             :closeByBackdropClick="true" class="popup">
     <f7-view class="view-sheet-modal" url="/mediadeviceselector/" :animate="false">
       <f7-page>
-        <media-device-selector @navigate="$emit('navigate', $event)" :player-item="playerItem"  />
+            <media-device-selector @navigate="$emit('navigate', $event)" :player-item="playerItem" :f7route="f7route" :f7router="f7router"/>
       </f7-page>
     </f7-view>
   </f7-popup>
@@ -25,7 +25,9 @@ export default {
     playerItem: {
       type: String,
       required: false
-    }
+    },
+    f7route: Object, 
+    f7router: Object
   },
   methods: {
   }

bundles/org.openhab.ui/web/src/pages/media/media-device-selector.vue

@@ -10,7 +10,8 @@
 
     <!--
     currentPlayerItem: {{  currentPlayerItem }}
-    -->
+    -->    
+
     <div v-if="node">
       <f7-list form>
         <f7-list-item v-for="item in node.childs" 
@@ -33,41 +34,69 @@
 </template>
 
 <script>
+import { ref, onMounted, getCurrentInstance, computed } from 'vue'
+import { useStatesStore } from '@/js/stores/useStatesStore'
+import { useComponentsStore } from '@/js/stores/useComponentsStore'
+import { useMediaStore } from '@/js/stores/useMediaStore'
+
+
 export default {
-  name: 'MediaBrowser',
+  name: 'MediaDeviceSelector',
   props: 
   {
+    f7route: Object,
+    f7router: Object,
     playerItem: {
       type: String,
       required: false
     }
   },
+  setup(props) {
+    const path = ref('');
+    const query = ref('');
+
+    const { proxy } = getCurrentInstance(); // pour accéder à this.$f7route, this.$f7, etc.
+
+    onMounted(() => {
+      const route = props.f7route;
+      console.log('f7route1:', route);
+      console.log('f7route2:', route.query);
+      console.log('f7route3:', route.query?.path);
+
+      if (route.query?.path && !route.query.path.startsWith('/page/')) {
+        path.value = route.query.path;
+      }
+
+      if (route.query?.query) {
+        query.value = route.query.query;
+      }
+    });
+
+    return { path, query };
+  },
   data () {
     let currentPlayerItem = this.playerItem
     console.log("p0:" + currentPlayerItem);
 
     
     if (currentPlayerItem === undefined || currentPlayerItem === null || currentPlayerItem === '') {
       console.log("p1");
-      currentPlayerItem = this.$store.state.media.playerItem
+      currentPlayerItem = useMediaStore().playerItem
     }
     console.log("p2");
     if (currentPlayerItem === undefined || currentPlayerItem === null || currentPlayerItem === '') {
       console.log("p3");
-      currentPlayerItem = this.$store.state.media.currentGlobalPlayerItem
+      currentPlayerItem =  useMediaStore().currentGlobalPlayerItem
     }
+    
 
-    this.$store.commit('setPlayerItem', currentPlayerItem)
-
+    useMediaStore().setCurrentGlobalPlayerItem(currentPlayerItem)
+    
     this.path = '/Root'
 
-    if (this.$f7route.query.path && !this.$f7route.query.path.startsWith('/page/')) {
-      this.path = this.$f7route.query.path
-    }
-
     console.log('MediaBrowser path: ' + this.path)
-
     let selectedOption= ""
+    
     this.$oh.api.get('/rest/media/sinks').then((data) => {
       data.childs = data.childs.sort((a, b) => {
         if (a.binding < b.binding) return -1
@@ -92,7 +121,7 @@ export default {
 
       this.node = data
     })
-
+    
     return {
       currentPlayerItem: currentPlayerItem,
       node: this.node,