Merge branch 'preview' into upstream-develop

.github/workflows/main.yaml

@@ -0,0 +1,34 @@
+# This is a basic workflow to help you get started with Actions
+name: CI
+
+# Controls when the action will run.
+on:
+  # Triggers the workflow on push or pull request events but only for the develop branch
+  push:
+    branches: [ develop, preview ]
+  pull_request:
+    branches: [ develop, preview ]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  build:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - uses: actions/checkout@v2
+
+      - name: Create compose stack
+        run: docker-compose -f docker-compose.ci.yml up -d --build --force-recreate
+
+      - name: Compile and run tests
+        run: docker-compose -f docker-compose.ci.yml exec -T photoprism make all test install migrate
+
+      - name: Tear down stack
+        run: docker-compose -f docker-compose.ci.yml down

.github/workflows/release.yaml

@@ -0,0 +1,42 @@
+name: Deploy image
+
+on:
+  release:
+    types:
+      - published
+  push:
+    branches:
+      - preview
+
+env:
+  TAG: ${{ github.event_name == 'release' && github.event.release.tag_name || 'preview' }}
+  DOCKER_REPO: kvalev/photoprism
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: Login to DockerHub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Build and push
+        uses: docker/bake-action@master
+        with:
+          files: ./docker/docker-bake.hcl
+          push: true
+
+      - name: Create a push a multi-architecture manifest file
+        run: docker buildx imagetools create --tag ${DOCKER_REPO}:${TAG} ${DOCKER_REPO}:${TAG}-amd64 ${DOCKER_REPO}:${TAG}-arm64 ${DOCKER_REPO}:${TAG}-armv7

docker-compose.yml

@@ -66,6 +66,7 @@ services:
       # PHOTOPRISM_THUMB_SIZE: 4096                  # Retina 4K, DCI 4K (requires more storage); 7680 for 8K Ultra HD
       PHOTOPRISM_THUMB_SIZE_UNCACHED: 7680           # On-demand rendering size limit (default 7680, min 720, max 7680)
       PHOTOPRISM_JPEG_SIZE: 7680                     # Size limit for converted image files in pixels (720-30000)
+      PHOTOPRISM_ENABLE_EXPVAR: "true"               # Enable the expvar endpoint which can be used for monitoring.
       PHOTOPRISM_JPEG_QUALITY: 92                    # Set to 95 for high-quality thumbnails (25-100)
       TF_CPP_MIN_LOG_LEVEL: 0                        # Show TensorFlow log messages for development
       ## Enable TensorFlow AVX2 support for modern Intel CPUs (requires starting the container as root):

docker/docker-bake.hcl

@@ -0,0 +1,38 @@
+variable "TAG" {
+    default = "latest"
+}
+variable "DOCKER_REPO" {
+    default = "photoprism/photoprism"
+}
+
+group "default" {
+    targets = ["arm", "amd64"]
+}
+
+group "arm" {
+    targets = ["armv7", "arm64"]
+}
+
+target "armv7" {
+    dockerfile = "docker/photoprism/Dockerfile"
+    tags = ["${DOCKER_REPO}:${TAG}-armv7"]
+    platforms = ["linux/arm/v7"]
+    # No need, as this is done by the "--push" flag
+    # output = ["type=registry"]
+}
+
+target "arm64" {
+    dockerfile = "docker/photoprism/Dockerfile"
+    tags = ["${DOCKER_REPO}:${TAG}-arm64"]
+    platforms = ["linux/arm64"]
+    # No need, as this is done by the "--push" flag
+    # output = ["type=registry"]
+}
+
+target "amd64" {
+    dockerfile = "docker/photoprism/Dockerfile"
+    tags = ["${DOCKER_REPO}:${TAG}-amd64"]
+    platforms = ["linux/amd64"]
+    # No need, as this is done by the "--push" flag
+    # output = ["type=registry"]
+}

frontend/package.json

@@ -105,6 +105,7 @@
     "vue-loader": "^15.9.7",
     "vue-loader-plugin": "^1.3.0",
     "vue-luxon": "^0.10.0",
+    "vue-pannellum": "^0.5.3",
     "vue-router": "^3.5.2",
     "vue-style-loader": "^4.1.3",
     "vue-template-compiler": "^2.6.14",

frontend/src/app.vue

@@ -14,6 +14,7 @@
 
     <p-video-viewer></p-video-viewer>
     <p-photo-viewer></p-photo-viewer>
+    <p-sphere-viewer></p-sphere-viewer>
   </div>
 </template>
 

frontend/src/common/viewer.js

@@ -59,6 +59,10 @@ class Viewer {
     Event.publish("player.open", params);
   }
 
+  showSphere(item) {
+    Event.publish("sphereviewer.open", item);
+  }
+
   show(items, index = 0) {
     if (!Array.isArray(items) || items.length === 0 || index >= items.length) {
       console.log("photo list passed to gallery was empty:", items);
@@ -136,12 +140,17 @@ class Viewer {
             ' <i aria-hidden="true" class="v-icon material-icons theme--dark" title="Play">play_circle_fill</i>';
         }
 
+        if (item.sphere) {
+          captionEl.children[0].innerHTML +=
+            ' <i aria-hidden="true" class="v-icon material-icons theme--dark" title="Show Photosphere">panorama_photosphere</i>';
+        }
+
         if (item.description) {
           captionEl.children[0].innerHTML +=
             '<br><span class="description">' + Util.encodeHTML(item.description) + "</span>";
         }
 
-        if (item.playable) {
+        if (item.playable || item.sphere) {
           captionEl.children[0].innerHTML =
             "<button>" + captionEl.children[0].innerHTML + "</button>";
         }

frontend/src/component/album/clipboard.vue

@@ -109,7 +109,7 @@ export default {
   },
   data() {
     return {
-      deletable: ["album", "moment", "state"],
+      deletable: ["album"],
       features: this.$config.settings().features,
       expanded: false,
       dialog: {

frontend/src/component/components.js

@@ -28,6 +28,8 @@ https://docs.photoprism.org/developer-guide/
 
 */
 
+import VuePannellum from "vue-pannellum";
+
 import PNotify from "./notify.vue";
 import PNavigation from "./navigation.vue";
 import PScrollTop from "./scroll-top.vue";
@@ -39,6 +41,7 @@ import PPhotoCards from "./photo/cards.vue";
 import PPhotoMosaic from "./photo/mosaic.vue";
 import PPhotoList from "./photo/list.vue";
 import PPhotoClipboard from "./photo/clipboard.vue";
+import PSphereViewer from "./sphere/viewer.vue";
 import PAlbumClipboard from "./album/clipboard.vue";
 import PAlbumToolbar from "./album/toolbar.vue";
 import PLabelClipboard from "./label/clipboard.vue";
@@ -60,12 +63,14 @@ components.install = (Vue) => {
   Vue.component("PPhotoMosaic", PPhotoMosaic);
   Vue.component("PPhotoList", PPhotoList);
   Vue.component("PPhotoClipboard", PPhotoClipboard);
+  Vue.component("PSphereViewer", PSphereViewer);
   Vue.component("PAlbumClipboard", PAlbumClipboard);
   Vue.component("PAlbumToolbar", PAlbumToolbar);
   Vue.component("PLabelClipboard", PLabelClipboard);
   Vue.component("PFileClipboard", PFileClipboard);
   Vue.component("PSubjectClipboard", PSubjectClipboard);
   Vue.component("PAboutFooter", PAboutFooter);
+  Vue.component("VPannellum", VuePannellum);
 };
 
 export default components;

frontend/src/component/navigation.vue

@@ -294,6 +294,15 @@
               </v-list-tile-title>
             </v-list-tile-content>
           </v-list-tile>
+
+          <v-list-tile to="/countries" class="nav-countries" @click.stop="">
+            <v-list-tile-content>
+              <v-list-tile-title :class="`p-flex-menuitem menu-item ${rtl ? '--rtl' : ''}`">
+                <translate key="Countries">Countries</translate>
+                <span v-show="config.count.countries > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.countries | abbreviateCount }}</span>
+              </v-list-tile-title>
+            </v-list-tile-content>
+          </v-list-tile>
         </v-list-group>
 
         <v-list-tile v-show="$config.feature('labels')" to="/labels" class="nav-labels" @click.stop="">
@@ -337,6 +346,19 @@
           </v-list-tile-content>
         </v-list-tile>
 
+        <v-list-tile to="/discover" class="nav-discover" @click.stop="">
+          <v-list-tile-action :title="$gettext('Discover')">
+            <!-- travel_explore seems to be a better icon, but it's not available -->
+            <v-icon>explore</v-icon>
+          </v-list-tile-action>
+
+          <v-list-tile-content>
+            <v-list-tile-title>
+              <translate key="Discover">Discover</translate>
+            </v-list-tile-title>
+          </v-list-tile-content>
+        </v-list-tile>
+
         <v-list-tile v-if="isMini && $config.feature('library')" to="/library" class="nav-library" @click.stop="">
           <v-list-tile-action :title="$gettext('Library')">
             <v-icon>camera_roll</v-icon>

frontend/src/component/photo/cards.vue

@@ -61,6 +61,7 @@
                    @click.stop.prevent="onOpen($event, index, true)">
               <v-icon color="white" class="default-hidden action-raw" :title="$gettext('RAW')">photo_camera</v-icon>
               <v-icon color="white" class="default-hidden action-live" :title="$gettext('Live')">$vuetify.icons.live_photo</v-icon>
+              <v-icon color="white" class="default-hidden action-sphere" :title="$gettext('Photosphere')">panorama_photosphere</v-icon>
               <v-icon color="white" class="default-hidden action-play" :title="$gettext('Video')">play_arrow</v-icon>
               <v-icon color="white" class="default-hidden action-stack" :title="$gettext('Stack')">burst_mode</v-icon>
             </v-btn>
@@ -89,7 +90,7 @@
               <v-icon color="white" class="select-on">lock</v-icon>
             </v-btn>
 
-            <v-btn :ripple="false"
+            <v-btn v-if="!disableSelection" :ripple="false"
                    icon flat absolute
                    class="input-select"
                    @touchstart.stop.prevent="input.touchStart($event, index)"
@@ -205,6 +206,7 @@ export default {
     filter: Object,
     context: String,
     selectMode: Boolean,
+    disableSelection: Boolean,
   },
   data() {
     return {

frontend/src/component/photo/clipboard.vue

@@ -121,6 +121,17 @@
         >
           <v-icon>eject</v-icon>
         </v-btn>
+        <v-btn
+            v-if="album && context !== 'archive'" fab dark
+            small
+            :title="$gettext('Set as cover')"
+            color="cover"
+            :disabled="selection.length != 1"
+            class="action-cover"
+            @click.stop="setCover"
+        >
+          <v-icon>insert_photo</v-icon>
+        </v-btn>
         <v-btn
             v-if="!album && context === 'archive' && features.delete" fab dark
             small
@@ -282,6 +293,15 @@ export default {
       this.dialog.share = false;
       this.clearClipboard();
     },
+    setCover() {
+      new Photo().find(this.selection[0]).then(p => {
+        Api.put(this.album.getEntityResource(), {Thumb: p.mainFileHash(), ThumbSrc: "cover"}).then(() => this.onSetCover());
+      });
+    },
+    onSetCover() {
+      Notify.success(this.$gettext("Cover has been updated"));
+      this.clearClipboard();
+    },
   }
 };
 </script>

frontend/src/component/photo/list.vue

@@ -52,13 +52,14 @@
               <v-icon color="white" class="select-on">check_circle</v-icon>
               <v-icon color="white" class="select-off">radio_button_off</v-icon>
             </v-btn>
-            <v-btn v-else-if="props.item.Type === 'video' || props.item.Type === 'live'"
+            <v-btn v-else-if="props.item.Type === 'video' || props.item.Type === 'live' || props.item.Type === 'sphere'"
                    :ripple="false"
                    flat icon large absolute class="input-open"
                    @click.stop.prevent="openPhoto(props.index, true)">
               <v-icon color="white" class="default-hidden action-live" :title="$gettext('Live')">
                 $vuetify.icons.live_photo
               </v-icon>
+              <v-icon color="white" class="default-hidden action-sphere" :title="$gettext('Photosphere')">panorama_photosphere</v-icon>
               <v-icon color="white" class="default-hidden action-play" :title="$gettext('Video')">play_arrow</v-icon>
             </v-btn>
           </v-img>

frontend/src/component/photo/mosaic.vue

@@ -60,6 +60,7 @@
                    @click.stop.prevent="onOpen($event, index, true)">
               <v-icon color="white" class="default-hidden action-raw" :title="$gettext('RAW')">photo_camera</v-icon>
               <v-icon color="white" class="default-hidden action-live" :title="$gettext('Live')">$vuetify.icons.live_photo</v-icon>
+              <v-icon color="white" class="default-hidden action-sphere" :title="$gettext('Photosphere')">panorama_photosphere</v-icon>
               <v-icon color="white" class="default-hidden action-play" :title="$gettext('Video')">play_arrow</v-icon>
               <v-icon color="white" class="default-hidden action-stack" :title="$gettext('Stack')">burst_mode</v-icon>
             </v-btn>