Merge branch 'develop' into preview

README.md

@@ -65,7 +65,7 @@ We currently have the following sponsorship options:
 - [GitHub Sponsors](https://github.com/sponsors/photoprism) is priced in USD and also offers [one-time donations](https://github.com/sponsors/photoprism?frequency=one-time)
 - [Patreon](https://www.patreon.com/photoprism) is priced in Euro and also offers yearly payments
 - Stripe will be available in early 2022, so you can sign up directly in the app without having a Patreon or GitHub account
-- you are welcome to [contact us](https://photoprism.app/contact) for [crypto donations](SPONSORS.md#crypto-donations) and other options
+- you are welcome to [contact us](https://photoprism.app/contact) for [crypto donations](https://photoprism.app/crypto-donations) and other options
 
 Also, please [leave a star](https://github.com/photoprism/photoprism/stargazers) on GitHub if you like this project.
 It provides additional motivation to keep going.

SPONSORS.md

@@ -9,7 +9,7 @@ We currently have the following sponsorship options:
 - [Patreon](https://www.patreon.com/photoprism) is priced in Euro and also offers yearly payments
 - Stripe will be available in early 2022, so you can sign up directly in the app without having a Patreon or GitHub
   account
-- you are welcome to [contact us](https://photoprism.app/contact) for [other options](#crypto-wallets)
+- you are welcome to [contact us](https://photoprism.app/contact) for [crypto donations](https://photoprism.app/crypto-donations) and other options
 
 Visit [docs.photoprism.app/funding](https://docs.photoprism.app/funding/) to learn more.
 
@@ -71,13 +71,3 @@ William Kray, Ovace Mamnoon, Clément Caplain Moreau, The Gordon Project, [@pluj
 [@swingstate](https://github.com/photoprism/photoprism/issues/808#issuecomment-997467377)
 
 [Learn more about one-time donation options through GitHub Sponsors.](https://github.com/sponsors/photoprism?frequency=one-time)
-
-## Crypto Donations ##
-
-Donations in Monero (XMR) and IOTA (MIOTA) can be made to the following wallet addresses:
-
-| Monero    | `474qhuQzC59g4i7cn8mN9VeRGRJHvChmUhL5Fh53hntah63QzB7ERxEb5woVvJkc1KZuGZ3GsGh7d5w9d6SUBHmrUzGeEWT` |
-|-----------|---------------------------------------------------------------------------------------------------|
-| IOTA      | `iota1qrcspztm2v2nldpuysq5j5fydn8ulyrnhr86qjymxwmmvzax8zlw7g0jyww`                                |
-
-Please [contact us by email](https://photoprism.app/contact) with a reference to the transaction so we can help you unlock additional features and provide technical support. Thank You! :)

docker-compose.yml

@@ -11,7 +11,7 @@ services:
   ## Includes test certificates for https://*.traefik.net/
   ## Docs: https://doc.traefik.io/traefik/
   traefik:
-    image: photoprism/traefik:20211218
+    image: photoprism/traefik:20220205
     ports:
       # - "80:80" # HTTP (redirects to HTTPS)
       - "443:443" # HTTPS (required)
@@ -141,7 +141,7 @@ services:
   ## Test Admin: admin / photoprism
   ## Docs: https://www.keycloak.org/getting-started/getting-started-docker
   keycloak:
-    image: quay.io/keycloak/keycloak:16.0.0
+    image: quay.io/keycloak/keycloak:16.1.1
     links:
       - "traefik:photoprism.traefik.net"
     labels:

docker/demo/docker-compose.yml

@@ -28,7 +28,7 @@ services:
 
   traefik:
     restart: always
-    image: traefik:v2.5
+    image: traefik:v2.6
     container_name: traefik
     ports:
       - "80:80"

docker/examples/cloud/docker-compose.yml

@@ -169,7 +169,7 @@ services:
   ## see https://docs.photoprism.app/getting-started/proxies/traefik/
   traefik:
     restart: always
-    image: traefik:v2.5
+    image: traefik:v2.6
     container_name: traefik
     ports:
       - "80:80"

frontend/package.json

@@ -71,7 +71,7 @@
     "karma-verbose-reporter": "^0.0.8",
     "karma-webpack": "^5.0.0",
     "luxon": "^2.3.0",
-    "mapbox-gl": "^1.13.2",
+    "maplibre-gl": "^2.1.1",
     "material-design-icons-iconfont": "^6.1.1",
     "mini-css-extract-plugin": "^2.5.3",
     "minimist": ">=1.2.5",

frontend/src/app.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="photoprism" :class="'theme-' + $config.themeName">
+  <div id="photoprism" :class="[isRtl ? 'is-rtl' : '', 'theme-' + themeName]">
     <p-loading-bar height="4"></p-loading-bar>
 
     <p-notify></p-notify>
@@ -25,6 +25,9 @@ export default {
   name: 'PhotoPrism',
   data() {
     return {
+      isRtl: this.$config.rtl(),
+      themeName: this.$config.themeName,
+      subscriptions: [],
       touchStart: 0,
     };
   },
@@ -32,13 +35,21 @@ export default {
   created() {
     window.addEventListener('touchstart', (e) => this.onTouchStart(e), {passive: true});
     window.addEventListener('touchmove', (e) => this.onTouchMove(e), {passive: true});
+    this.subscriptions['view.refresh'] = Event.subscribe("view.refresh", (ev, data) => this.onRefresh(data));
     this.$config.setVuetify(this.$vuetify);
   },
   destroyed() {
+    for (let i = 0; i < this.subscriptions.length; i++) {
+      Event.unsubscribe(this.subscriptions[i]);
+    }
     window.removeEventListener('touchstart', (e) => this.onTouchStart(e), false);
     window.removeEventListener('touchmove', (e) => this.onTouchMove(e), false);
   },
   methods: {
+    onRefresh(config) {
+      this.isRtl = config.rtl();
+      this.themeName = config.themeName;
+    },
     onTouchStart(e) {
       this.touchStart = e.touches[0].pageY;
     },

frontend/src/common/config.js

@@ -286,11 +286,7 @@ export default class Config {
   setTheme(name) {
     this.themeName = name;
 
-    const el = document.getElementById("photoprism");
-
-    if (el) {
-      el.className = "theme-" + name;
-    }
+    Event.publish("view.refresh", this);
 
     this.theme = themes[name] ? themes[name] : themes["default"];
 

frontend/src/common/maptiler-lang.js

@@ -2,7 +2,7 @@
  * https://github.com/klokantech/openmaptiles-language
  * (c) 2018 Klokan Technologies GmbH
  */
-import mapboxgl from "mapbox-gl";
+import maplibregl from "maplibre-gl";
 import { config } from "../session";
 
 const langFallbackDecorate = function (style, cfg) {
@@ -56,8 +56,8 @@ const langFallbackDecorate = function (style, cfg) {
 let langEnabled = true;
 
 let setStyleMutex = false;
-let origSetStyle = mapboxgl.Map.prototype.setStyle;
-mapboxgl.Map.prototype.setStyle = function () {
+let origSetStyle = maplibregl.Map.prototype.setStyle;
+maplibregl.Map.prototype.setStyle = function () {
   origSetStyle.apply(this, arguments);
 
   if (langEnabled && !setStyleMutex) {
@@ -75,11 +75,11 @@ mapboxgl.Map.prototype.setStyle = function () {
   }
 };
 
-mapboxgl.Map.prototype.setLanguageEnabled = function (enable) {
+maplibregl.Map.prototype.setLanguageEnabled = function (enable) {
   langEnabled = enable;
 };
 
-mapboxgl.Map.prototype.setLanguage = function (language, noAlt) {
+maplibregl.Map.prototype.setLanguage = function (language, noAlt) {
   this.languageOptions = {
     language: language,
     noAlt: noAlt,
@@ -162,13 +162,13 @@ mapboxgl.Map.prototype.setLanguage = function (language, noAlt) {
   setStyleMutex = false;
 };
 
-mapboxgl.Map.prototype.autodetectLanguage = function (opt_fallback) {
+maplibregl.Map.prototype.autodetectLanguage = function (opt_fallback) {
   this.setLanguage(config.values.settings.ui.language.split("-")[0] || opt_fallback || "native");
 };
 
-// See https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-rtl-text/
-mapboxgl.setRTLTextPlugin(
-  `${config.staticUri}/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js`,
+// Add plugin to support right-to-left languages such as Arabic and Hebrew.
+maplibregl.setRTLTextPlugin(
+  `${config.staticUri}/plugins/maplibre-gl-rtl-text/v0.2.3/maplibre-gl-rtl-text.js`,
   null,
   true // Lazy load the plugin
 );

frontend/src/css/app.css

@@ -30,7 +30,7 @@ https://docs.photoprism.app/developer-guide/
 
 @import url("../../node_modules/material-design-icons-iconfont/dist/material-design-icons.css");
 @import url("../../node_modules/vuetify/dist/vuetify.min.css");
-@import url("../../node_modules/mapbox-gl/dist/mapbox-gl.css");
+@import url("../../node_modules/maplibre-gl/dist/maplibre-gl.css");
 @import url("themes.css");
 @import url("animate.css");
 @import url("splash.css");
@@ -204,4 +204,51 @@ main {
 }
 .lh-20 {
     line-height: 2.0rem !important;
+}
+
+/* RTL alignments */
+
+#photoprism.is-rtl .text-xs-left,
+#photoprism.is-rtl .text-sm-left {
+    text-align: right!important;
+}
+
+#photoprism.is-rtl .text-xs-right,
+#photoprism.is-rtl .text-sm-right {
+    text-align: left!important;
+}
+
+#photoprism.is-rtl .v-text-field .v-input__prepend-inner {
+    margin-left: auto;
+    padding-left: 4px;
+    padding-right: 0;
+}
+
+#photoprism.is-rtl .v-toolbar.page-toolbar .v-text-field .v-input__slot {
+    padding-left: 12px;
+    padding-right: 0;
+}
+
+#photoprism.is-rtl .card-details button {
+    text-align: right;
+}
+
+#photoprism.is-rtl .p-flex-menuitem .nav-count {
+    margin-left: 48px;
+    margin-right: 8px;
+}
+
+#photoprism.is-rtl .v-list__group__header .p-flex-menuitem .nav-count {
+    margin-left: 0;
+}
+
+#photoprism.is-rtl .v-toolbar__content>:last-child.v-btn--icon,
+#photoprism.is-rtl .v-toolbar__extension>:last-child.v-btn--icon {
+    margin-left: -6px;
+    margin-right: 6px;
+}
+
+ol, ul {
+    padding-left: 24px;
+    padding-right: 24px;
 }

frontend/src/css/maps.css

@@ -1,11 +1,16 @@
-#photoprism .p-map-control {
-    position: fixed;
+#photoprism .map-control {
+    position: absolute;
     background: transparent;
     bottom: 35px;
     right: 30px;
     z-index: 2;
 }
 
+#photoprism.is-rtl .map-control {
+    right: auto;
+    left: 30px;
+}
+
 #photoprism #map .marker {
     box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !important;
     background-color: rgba(0, 0, 0, 0.3);
@@ -16,6 +21,6 @@
     cursor: pointer;
 }
 
-#photoprism .mapboxgl-ctrl-attrib-inner a {
+#photoprism .maplibregl-ctrl-attrib-inner a {
     color: #333 !important;
 }

frontend/src/pages/places.vue

@@ -1,8 +1,8 @@
 <template>
   <v-container fluid fill-height class="pa-0 p-page p-page-places">
     <div id="map" style="width: 100%; height: 100%;">
-      <div class="p-map-control">
-        <div class="mapboxgl-ctrl mapboxgl-ctrl-group">
+      <div class="map-control">
+        <div class="maplibregl-ctrl maplibregl-ctrl-group">
           <v-text-field v-model="filter.q"
                         class="pa-0 ma-0 input-search"
                         single-line
@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import mapboxgl from "mapbox-gl";
+import maplibregl from "maplibre-gl";
 import Api from "common/api";
 import Thumb from "model/thumb";
 
@@ -290,17 +290,19 @@ export default {
       });
     },
     renderMap() {
-      this.map = new mapboxgl.Map(this.options);
+      this.map = new maplibregl.Map(this.options);
       this.map.setLanguage(this.$config.values.settings.ui.language.split("-")[0]);
 
-      this.map.addControl(new mapboxgl.NavigationControl({showCompass: true}, 'top-right'));
-      this.map.addControl(new mapboxgl.FullscreenControl({container: document.querySelector('body')}));
-      this.map.addControl(new mapboxgl.GeolocateControl({
+      const controlPos = this.$rtl ? 'top-left' : 'top-right';
+
+      this.map.addControl(new maplibregl.NavigationControl({showCompass: true}), controlPos);
+      this.map.addControl(new maplibregl.FullscreenControl({container: document.querySelector('body')}), controlPos);
+      this.map.addControl(new maplibregl.GeolocateControl({
         positionOptions: {
           enableHighAccuracy: true
         },
         trackUserLocation: true
-      }));
+      }), controlPos);
 
       this.map.on("load", () => this.onMapLoad());
     },
@@ -326,7 +328,7 @@ export default {
           el.style.height = '50px';
 
           el.addEventListener('click', () => this.openPhoto(props.UID));
-          marker = this.markers[id] = new mapboxgl.Marker({
+          marker = this.markers[id] = new maplibregl.Marker({
             element: el
           }).setLngLat(coords);
         } else {

frontend/src/share.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="photoprism" :class="'theme-' + $config.themeName">
+  <div id="photoprism" :class="[isRtl ? 'is-rtl' : '', 'theme-' + themeName]">
     <p-loading-bar height="4"></p-loading-bar>
 
     <p-notify></p-notify>
@@ -22,9 +22,12 @@ import "./css/app.css";
 import Event from "pubsub-js";
 
 export default {
-  name: 'Photoprism',
+  name: "PhotoPrism",
   data() {
     return {
+      isRtl: this.$config.rtl(),
+      themeName: this.$config.themeName,
+      subscriptions: [],
       touchStart: 0,
     };
   },
@@ -32,13 +35,21 @@ export default {
   created() {
     window.addEventListener('touchstart', (e) => this.onTouchStart(e), {passive: true});
     window.addEventListener('touchmove', (e) => this.onTouchMove(e), {passive: true});
+    this.subscriptions['view.refresh'] = Event.subscribe("view.refresh", (ev, data) => this.onRefresh(data));
     this.$config.setVuetify(this.$vuetify);
   },
   destroyed() {
+    for (let i = 0; i < this.subscriptions.length; i++) {
+      Event.unsubscribe(this.subscriptions[i]);
+    }
     window.removeEventListener('touchstart', (e) => this.onTouchStart(e), false);
     window.removeEventListener('touchmove', (e) => this.onTouchMove(e), false);
   },
   methods: {
+    onRefresh(config) {
+      this.isRtl = config.rtl();
+      this.themeName = config.themeName;
+    },
     onTouchStart(e) {
       this.touchStart = e.touches[0].pageY;
     },