Refresh current wallpaper data on load (Fixes #4)

main.py

@@ -22,5 +22,5 @@ def open_ui():
  )
 )
 
-open_ui()
-# icon.run()
+# open_ui()
+icon.run()

readme.md

@@ -8,4 +8,4 @@ This is a utility that will update your desktop wallpaper from your Google Photo
 - Filter photos that are too small, have a poor aspect ratio, or create a custom blacklist.
 - Previous, next, and random buttons to quickly change the wallpaper, or select one from the album list.
 
-![App screenshot](https://i.imgur.com/7xrrJTB.png)
+![App screenshot](https://i.imgur.com/t3tXbSW.png)

src/bridge.py

@@ -47,9 +47,9 @@ def get_album_media_items(album_id):
  return GoogleApi.get_album_media_items(album_id)
 
 @eel.expose
-def get_media_item(item_id):
+def get_media_item(media_item_id):
  # Retreive data for a media item
- return {}
+ return GoogleApi.get_media_item(media_item_id)
 
 
 @eel.expose

src/google_api.py

@@ -117,4 +117,9 @@ def get_album_media_items(cls, album_id):
  'albumId': album_id,
  'pageSize': 100
  }
- return cls.photos.mediaItems().search(body = body).execute()
+ return cls.photos.mediaItems().search(body = body).execute()
+
+ @classmethod
+ def get_media_item(cls, media_item_id):
+ cls.ensure_valid_token()
+ return cls.photos.mediaItems().get(mediaItemId = media_item_id).execute()

vue/src/App.vue

@@ -13,19 +13,21 @@
  v-row.mb-12.align-center
  v-col(cols='5')
  v-card.round(elevation='22')
- v-skeleton-loader(type='image' max-height='350' :value='!!currentWallpaper')
-  v-img.round(v-if='currentWallpaper' :src='currentWallpaper.baseUrl' max-height='350')
+ v-skeleton-loader(type='image' max-height='350' v-if='loadingCurrentWallpaper')
+ v-img.round(v-if='!loadingCurrentWallpaper' :src='currentWallpaper.baseUrl' max-height='350')
 
  //- Current item details
  v-col.pb-10(cols='7')
  .pa-5
- h3.headline.font-weight-bold Current wallpaper
- v-breadcrumbs.px-1.pt-1.pb-2(:items='breadcrumbs')
- template(v-slot:divider)
- v-icon mdi-chevron-right
- v-btn.ma-1(outlined) Previous
- v-btn.ma-1(outlined) Next
- v-btn.ma-1(outlined) Random
+ v-skeleton-loader(type='sentences, heading' v-if='loadingCurrentWallpaper')
+ div(v-if='!loadingCurrentWallpaper')
+ h3.headline.font-weight-bold Current wallpaper
+ v-breadcrumbs.px-1.pt-1.pb-2(:items='breadcrumbs')
+ template(v-slot:divider)
+ v-icon mdi-arrow-right
+ v-btn.ma-1(outlined) Previous
+ v-btn.ma-1(outlined) Next
+ v-btn.ma-1(outlined) Random
 
  //- Album list
  v-skeleton-loader(
@@ -78,22 +80,16 @@ export default {
  MediaItems
  },
 
- beforeCreate() {
- this.$store.dispatch('getCurrentWallpaper');
+ async beforeCreate() {
  this.$store.dispatch('getFavorites');
  this.$store.dispatch('getAlbums');
+ await this.$store.dispatch('getCurrentWallpaper');
+ this.loadingCurrentWallpaper = false;
  },
 
- methods: {
- preventExpansion: function(event) {
- // Disable click bubbling below an element on click event
- event.cancelBubble = true;
- },
- loadAlbum: function(albumId) {
- // TODO: Load next page of photos on scroll
- this.$store.dispatch('getAlbum', { albumId })
- },
- },
+ data: () => ({
+ loadingCurrentWallpaper: true
+ }),
 
  computed: {
  breadcrumbs: function() {
@@ -108,7 +104,18 @@ export default {
  'favorites',
  'albums' 
  ])
- }
+ },
+
+ methods: {
+ preventExpansion: function(event) {
+ // Disable click bubbling below an element on click event
+ event.cancelBubble = true;
+ },
+ loadAlbum: function(albumId) {
+ // TODO: Load next page of photos on scroll
+ this.$store.dispatch('getAlbum', { albumId })
+ },
+ },
 };
 </script>
 

vue/src/store/store.js

@@ -38,13 +38,22 @@ export const store = new Vuex.Store({
 
  actions: {
  getCurrentWallpaper ({ commit }) {
- window.eel.get_current_wallpaper()(mediaItem => {
- commit('setCurrentWallpaper', { mediaItem });
- });
+ return new Promise(( res ) => {
+ window.eel.get_current_wallpaper()(mediaItem => {
+
+ // Save source data from original object
+ let source = mediaItem.source;
+
+ // Retrieve mediaItem again to get new baseUrl
+ window.eel.get_media_item(mediaItem.id)(mediaItem => {
+ mediaItem.source = source;
+ commit('setCurrentWallpaper', { mediaItem });
+ res();
+ });
+ });
+ })
  },
  setWallpaper ({ commit }, { mediaItem }) {
- // Return a promise so the caller can know when the
- // wallpaper has finished downloading
  return new Promise(( res ) => {
  window.eel.set_wallpaper(mediaItem)(() => {
  commit('setCurrentWallpaper', { mediaItem });

web/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><script src=http:https://localhost:8686/eel.js></script><script>eel._host="http:https://localhost:8686"</script><title>photos</title><link href=/css/app.1401727d.css rel=preload as=style><link href=/css/chunk-vendors.81a54e38.css rel=preload as=style><link href=/js/app.96ee4101.js rel=preload as=script><link href=/js/chunk-vendors.b54d86e5.js rel=preload as=script><link href=/css/chunk-vendors.81a54e38.css rel=stylesheet><link href=/css/app.1401727d.css rel=stylesheet></head><body><noscript><strong>We're sorry but photos doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.b54d86e5.js></script><script src=/js/app.96ee4101.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><script src=http:https://localhost:8686/eel.js></script><script>eel._host="http:https://localhost:8686"</script><title>photos</title><link href=/css/app.1401727d.css rel=preload as=style><link href=/css/chunk-vendors.81a54e38.css rel=preload as=style><link href=/js/app.a12616fe.js rel=preload as=script><link href=/js/chunk-vendors.b54d86e5.js rel=preload as=script><link href=/css/chunk-vendors.81a54e38.css rel=stylesheet><link href=/css/app.1401727d.css rel=stylesheet></head><body><noscript><strong>We're sorry but photos doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.b54d86e5.js></script><script src=/js/app.a12616fe.js></script></body></html>