openhab · lo92fr · Apr 4, 2025 · Apr 8, 2025 · Apr 8, 2025 · Apr 9, 2025
@@ -54,6 +54,29 @@
             </template>
           </f7-list-item>
         </f7-list>
+
+        <f7-block-title>
+          {{ t('sidebar.media') }}
+        </f7-block-title>
+
+         <f7-list class="media-links">
+          <f7-list-item
+            link="/mediabrowser/"
+            :route-props="{ mediaBrowserMode: 'Global' }" 
+            :title="t('sidebar.mediaBrowser')"
+            view=".view-main"
+            panel-close
+            :class="{ currentsection: currentPath.about }">
+            <template #media>
+              <f7-icon
+                ios="f7:question_circle_fill"
+                aurora="f7:question_circle_fill"
+                md="material:help"
+                color="gray" />
+            </template>
+          </f7-list-item>
+        </f7-list>
+
         <f7-block-title
           v-if="userStore.isAdmin()">
           {{ t('sidebar.administration') }}

@@ -163,6 +163,7 @@ export const Categories = [
   'parents_6_6',
   'pie',
   'piggybank',
+  'mediabrowser',
   'player',
   'poweroutlet_au',
   'poweroutlet_eu',

@@ -57,6 +57,17 @@ export const OhColorpickerCardDefinition = () => new WidgetDefinition('oh-colorp
   .paramGroup(CardParameterGroup(), CardParameters())
   .paramGroup(pg('colorpicker', 'Color picker'), ColorPickerParameters())
 
+
+// OhMediaBrowserCard
+import MediaBrowserParameters from '../system/mediabrowser.js'
+export const OhMediaBrowserCardDefinition = () => new WidgetDefinition('oh-media-browser-card', 'Media Browser Card', 'Display media browser controls in a card')
+  .paramGroup(CardParameterGroup(), CardParameters())
+  .paramGroup(pg('media-browser', 'Media Browser Controls'), MediaBrowserParameters())
+  .paramGroup(pg('Current Track Info', 'Currently playing track information'), [
+    pi('artistItem', 'Artist Item', 'Item holding the artist name'),
+    pi('trackItem', 'Track Item', 'Item holding the track name')
+  ])
+
 // OhPlayerCard
 import PlayerParameters from '../system/player.js'
 export const OhPlayerCardDefinition = () => new WidgetDefinition('oh-player-card', 'Player Card', 'Display player controls in a card')

@@ -50,6 +50,17 @@ export const OhColorpickerItemDefinition = () => new WidgetDefinition('oh-colorp
   .paramGroup(ListItemParameterGroup(), ListItemParameters())
   .paramGroup(pg('colorpicker', 'Color picker'), ColorPickerParameters())
 
+// OhMediaBrowserItem
+import MediaBrowserParameters from '../system/mediabrowser.js'
+export const OhMediaBrowserItemDefinition = () => new WidgetDefinition('oh-media-browser-item', 'Media Browser List Item', 'Display media browser controls in a list')
+  .paramGroup(ListItemParameterGroup(), ListItemParameters())
+  .paramGroup(pg('media-browser', 'MediaBrowser Controls'), MediaBrowserParameters())
+  .paramGroup(pg('Current Track Info', 'Currently playing track information'), [
+    pi('artistItem', 'Artist Item', 'Item holding the artist name'),
+    pi('trackItem', 'Track Item', 'Item holding the track name')
+  ])
+
+
 // OhPlayerItem
 import PlayerParameters from '../system/player.js'
 export const OhPlayerItemDefinition = () => new WidgetDefinition('oh-player-item', 'Player List Item', 'Display player controls in a list')

@@ -60,6 +60,10 @@ import ListParameters from './list.js'
 export const OhListDefinition = () => new WidgetDefinition('oh-list', 'List', 'List control, hosts list items')
   .params(ListParameters())
 
+import MediaBrowserParameters from './mediabrowser.js'
+  export const OhMediaBrowserDefinition = () => new WidgetDefinition('oh-media-browser', 'Media browser', 'Media browser controls, with previous track/pause/play/next buttons/title selection')
+    .params(MediaBrowserParameters())
+
 import PlayerParameters from './player.js'
 export const OhPlayerDefinition = () => new WidgetDefinition('oh-player', 'Media player', 'Media player controls, with previous track/pause/play/next buttons')
   .params(PlayerParameters())

@@ -0,0 +1,6 @@
+import { pi, pb } from '../helpers.js'
+
+export default () => [
+  pi('item', 'Item', 'Media Browser item to control'),
+  pb('showRewindFFward', 'Rewind/Fast Forward', 'Show Rewind and Fast Forward buttons')
+]
@@ -45,6 +45,8 @@
   "sidebar.addOnStore": "Add-on Store",
   "sidebar.developerTools": "Developer Tools",
   "sidebar.helpAbout": "Help & About",
+  "sidebar.media": "Media",
+  "sidebar.mediaBrowser": "Browser",
   "sidebar.unlockAdmin": "Unlock Administration",
   "sidebar.tip.signIn": "Sign in as an administrator to access settings",
   "page.navbar.back": "Back",

@@ -49,5 +49,5 @@
   "error.communicationFailure": "Erreur de communication",
   "error.itemNotFound": "%s non trouvé",
   "error.notReachable.title": "openHAB est hors ligne",
-  "error.notReachable.msg": "Le serveur openHAB ne peut pas être atteint pour le moment. Veuillez vérifier votre connexion réseau et votre serveur."
+  "error.notReachable.msg": "Le serveur openHAB ne peut pas être atteint pour le moment. Veuillez vérifier votre connexion réseau et votre serveur."  
 }
@@ -0,0 +1,6 @@
+{
+  "media.title": "MediaBrowser",
+  "media.page.updated": "Media page updated",
+  "media.page.created": "Media page created",
+  "media.loading": "Loading..."
+}
@@ -0,0 +1,6 @@
+{
+  "media.title": "MediaBrowser",
+  "media.page.updated": "Media page updated",
+  "media.page.created": "Media page created",
+  "media.loading": "Loading..."
+}
@@ -1,4 +1,4 @@
-const SharedTypes = ['Call', 'Color', 'Contact', 'DateTime', 'Dimmer', 'Image', 'Location', 'Number', 'Player', 'Rollershutter', 'String', 'Switch']
+const SharedTypes = ['Call', 'Color', 'Contact', 'DateTime', 'Dimmer', 'Image', 'Location', 'MediaBrowser', 'Number', 'Player', 'Rollershutter', 'String', 'Switch']
 
 export const ItemTypes = SharedTypes.concat(['Group'])
 export const GroupTypes = ['None'].concat(SharedTypes)
@@ -80,6 +80,20 @@ export const LogicalOpenClosedFunctions = [{
   value: 'One CLOSED then OPEN else CLOSED'
 }]
 
+export const LogicalMediaBrowserFunctions = [{
+  name: 'AND_PLAY_PAUSE',
+  value: 'All PLAY then PLAY else PAUSE'
+}, {
+  name: 'AND_PAUSE_PLAY',
+  value: 'All PAUSE then PAUSE else PLAY'
+}, {
+  name: 'OR_PLAY_PAUSE',
+  value: 'One PLAY then PLAY else PAUSE'
+}, {
+  name: 'OR_PAUSE_PLAY',
+  value: 'One PAUSE then PAUSE else PLAY'
+}]
+
 export const LogicalPlayPauseFunctions = [{
   name: 'AND_PLAY_PAUSE',
   value: 'All PLAY then PLAY else PAUSE'

@@ -211,6 +211,8 @@ export default {
             return types.ArithmeticFunctions
           case 'Contact':
             return types.LogicalOpenClosedFunctions
+          case 'MediaBrowser':
+            return types.LogicalMediaBrowserFunctions
           case 'Player':
             return types.LogicalPlayPauseFunctions
           case 'DateTime':

@@ -70,7 +70,7 @@ export default function itemDefaultListComponent (item, footer) {
         component: 'oh-player-item'
       }
     }
-
+    
     if (item.type === 'Image') {
       component = {
         component: 'oh-list-item',

@@ -1,4 +1,5 @@
 <template>
+  <div>
   <f7-segmented v-bind="config"
                 round
                 outline
@@ -38,7 +39,27 @@
                icon-material="skip_next"
                icon-size="24"
                icon-color="gray" />
+
+
+    <f7-button color="blue"   			 
+    			large 
+    			icon-material="folder" 
+    			icon-size="24" 
+    			icon-color="gray"  
+    			@click="openBrowserPopup"/>
+    <f7-button color="blue"   					
+    			large 		
+    			icon-material="speaker"
+    			icon-size="24" 
+    			icon-color="gray"  
+    			@click="openDeviceSelectorPopup"/>
+
+  <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>
+
+
 </template>
 
 <style lang="stylus">
@@ -48,29 +69,76 @@
   .segmented-highlight
     display none
 .aurora .player-controls
-  .button
+  .button 
     height 37px
 </style>
 
 <script>
 import mixin from '../widget-mixin'
 import { OhPlayerDefinition } from '@/assets/definitions/widgets/system'
-
 import { useStatesStore } from '@/js/stores/useStatesStore'
+import MediaPopup from '@/pages/media/media-browser-popup.vue' 
+import MediaDevicePopup from '@/pages/media/media-device-selector-popup.vue'
 
 export default {
   mixins: [mixin],
   widget: OhPlayerDefinition,
   mounted () {
     delete this.config.value
   },
+  components: {        // ⚡ Ici on déclare le composant
+    MediaPopup,
+    MediaDevicePopup
+  },
+  data () {
+    return {
+      state: '',
+      device: '',
+      binding:'',
+      artistName: '',
+      trackName: '',
+      artUri: '',
+      trackPosition: 0,
+      trackDuration: 0,
+      volume: 0,
+      browserPopupOpened: false,
+      deviceSelectorPopupOpened: false
+    }
+  },
   computed: {
     isPlaying () {
-      const value = this.context.store[this.config.item].state
-      return value === 'PLAY'
+      this.decodeState()
+      return this.state === 'PLAY'
     }
   },
   methods: {
+    openBrowserPopup() {
+      this.browserPopupOpened = true
+    },
+    openDeviceSelectorPopup() {
+      this.deviceSelectorPopupOpened = true
+    },
+    decodeState () {
+      const value = this.context.store[this.config.item].state
+      if (!(value === undefined || value === null || value === '' || value==='-')) {
+        if (value.indexOf('{') === 0) {
+          let json = JSON.parse(value);
+          this.state = json.state;
+          this.device = json.device.value;
+          this.binding = json.binding.value;
+          this.artistName = json.currentPlayingArtistName.value;
+          this.trackName = json.currentPlayingTrackName.value;
+          this.artUri = json.currentPlayingArtUri.value;
+          this.trackPosition = json.currentPlayingTrackPosition.value;
+          this.trackDuration = json.currentPlayingTrackDuration.value;
+          this.volume = json.currentPlayingVolume.value;
+        } else {
+          console.log("===========value:" + value)
+          let components = value.split(',')
+          this.state = components[0]
+        }
+      }
+    },
     skipPrevious (value) {
       useStatesStore().sendCommand(this.config.item, 'PREVIOUS')
     },
@@ -85,6 +153,9 @@ export default {
     },
     skipNext (value) {
       useStatesStore().sendCommand(this.config.item, 'NEXT')
+    },
+    mediaChange (value) {
+      //useStatesStore().sendCommand(this.config.item, 'spotify:playlist:5Z4AD0u9fwnvtsj7ce5ZLS')
     }
   }
 }