Front end prototype. Need to figure out how to get album id from photo id, currently set to album id 3 for proof of concept.

api/graphql/generated.go

@@ -1789,7 +1789,7 @@ type Mutation {
   changeUserPreferences(language: String): UserPreferences! @isAuthorized
 
   "Assign a cover image to an album, set coverID to -1 to remove the current one"
-  setAlbumCoverID(albumID: ID!, coverID: Int): Album!
+  setAlbumCoverID(albumID: ID!, coverID: Int): Album! @isAuthorized
 
   "Assign a label to a face group, set label to null to remove the current one"
   setFaceGroupLabel(faceGroupID: ID!, label: String): FaceGroup! @isAuthorized
@@ -5973,8 +5973,28 @@ func (ec *executionContext) _Mutation_setAlbumCoverID(ctx context.Context, field
 	}
 	fc.Args = args
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Mutation().SetAlbumCoverID(rctx, args["albumID"].(int), args["coverID"].(*int))
+		directive0 := func(rctx context.Context) (interface{}, error) {
+			ctx = rctx // use context from middleware stack in children
+			return ec.resolvers.Mutation().SetAlbumCoverID(rctx, args["albumID"].(int), args["coverID"].(*int))
+		}
+		directive1 := func(ctx context.Context) (interface{}, error) {
+			if ec.directives.IsAuthorized == nil {
+				return nil, errors.New("directive isAuthorized is not implemented")
+			}
+			return ec.directives.IsAuthorized(ctx, nil, directive0)
+		}
+
+		tmp, err := directive1(rctx)
+		if err != nil {
+			return nil, graphql.ErrorOnPath(ctx, err)
+		}
+		if tmp == nil {
+			return nil, nil
+		}
+		if data, ok := tmp.(*models.Album); ok {
+			return data, nil
+		}
+		return nil, fmt.Errorf(`unexpected type %T from directive, should be *github.com/photoview/photoview/api/graphql/models.Album`, tmp)
 	})
 	if err != nil {
 		ec.Error(ctx, err)

api/graphql/schema.graphql

@@ -135,7 +135,7 @@ type Mutation {
   changeUserPreferences(language: String): UserPreferences! @isAuthorized
 
   "Assign a cover image to an album, set coverID to -1 to remove the current one"
-  setAlbumCoverID(albumID: ID!, coverID: Int): Album! 
+  setAlbumCoverID(albumID: ID!, coverID: Int): Album! @isAuthorized
 
   "Assign a label to a face group, set label to null to remove the current one"
   setFaceGroupLabel(faceGroupID: ID!, label: String): FaceGroup! @isAuthorized

ui/package.json

@@ -71,6 +71,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.1.9",
+    "apollo": "^2.33.4",
     "husky": "^6.0.0",
     "i18next-parser": "^4.2.0",
     "lint-staged": "^11.0.1",

ui/src/Pages/LoginPage/__generated__/CheckInitialSetup.ts

@@ -8,10 +8,13 @@
 // ====================================================
 
 export interface CheckInitialSetup_siteInfo {
-  __typename: "SiteInfo";
-  initialSetup: boolean;
+  __typename: 'SiteInfo'
+  /**
+   * Whether or not the initial setup wizard should be shown
+   */
+  initialSetup: boolean
 }
 
 export interface CheckInitialSetup {
-  siteInfo: CheckInitialSetup_siteInfo;
+  siteInfo: CheckInitialSetup_siteInfo
 }

ui/src/__generated__/globalTypes.ts

@@ -14,12 +14,12 @@ export enum LanguageTranslation {
   German = 'German',
   Italian = 'Italian',
   Polish = 'Polish',
+  Portuguese = 'Portuguese',
   Russian = 'Russian',
+  SimplifiedChinese = 'SimplifiedChinese',
   Spanish = 'Spanish',
   Swedish = 'Swedish',
   TraditionalChinese = 'TraditionalChinese',
-  SimplifiedChinese = 'SimplifiedChinese',
-  Portuguese = 'Portuguese',
 }
 
 export enum MediaType {

ui/src/components/layout/__generated__/faceDetectionEnabled.ts

@@ -0,0 +1,20 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+// ====================================================
+// GraphQL query operation: faceDetectionEnabled
+// ====================================================
+
+export interface faceDetectionEnabled_siteInfo {
+  __typename: 'SiteInfo'
+  /**
+   * Whether or not face detection is enabled and working
+   */
+  faceDetectionEnabled: boolean
+}
+
+export interface faceDetectionEnabled {
+  siteInfo: faceDetectionEnabled_siteInfo
+}

ui/src/components/sidebar/AlbumCovers.tsx

@@ -0,0 +1,124 @@
+import React from 'react'
+import { useMutation, gql } from '@apollo/client'
+import { useTranslation } from 'react-i18next'
+
+import { SidebarSection, SidebarSectionTitle } from './SidebarComponents'
+
+import {
+  setAlbumCoverID,
+  setAlbumCoverIDVariables,
+} from './__generated__/setAlbumCoverID'
+
+const SET_ALBUM_COVER_ID_MUTATION = gql`
+  mutation setAlbumCoverID($albumID: ID!, $coverID: Int!) {
+    setAlbumCoverID(albumID: $albumID, coverID: $coverID) {
+      id
+      coverID
+    }
+  }
+`
+
+type SidebarPhotoCoverProps = {
+  id: string
+  cover_id: string
+}
+
+export const SidebarPhotoCover = ({ id, cover_id }: SidebarPhotoCoverProps) => {
+  const { t } = useTranslation()
+
+  const [setAlbumCoverID, { loading }] = useMutation<
+    setAlbumCoverID,
+    setAlbumCoverIDVariables
+  >(SET_ALBUM_COVER_ID_MUTATION, {
+    variables: {
+      albumID: id,
+      coverID: cover_id,
+    },
+  })
+
+  return (
+    <SidebarSection>
+      <SidebarSectionTitle>
+        {t('sidebar.album.cover_photo', 'Cover Photo')}
+      </SidebarSectionTitle>
+      <div>
+        <table className="border-collapse w-full">
+          <tfoot>
+            <tr className="text-left border-gray-100 border-b border-t">
+              <td colSpan={2} className="pl-4 py-2">
+                <button
+                  className="text-green-500 font-bold uppercase text-xs"
+                  disabled={loading}
+                  onClick={() => {
+                    setAlbumCoverID({
+                      variables: {
+                        albumID: id,
+                        coverID: cover_id,
+                      },
+                    })
+                  }}
+                >
+                  <span>
+                    {t('sidebar.album.set_cover', 'Set as album cover photo')}
+                  </span>
+                </button>
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+    </SidebarSection>
+  )
+}
+
+type SidebarAlbumCoverProps = {
+  id: string
+}
+
+export const SidebarAlbumCover = ({ id }: SidebarAlbumCoverProps) => {
+  const { t } = useTranslation()
+
+  const [setAlbumCoverID, { loading }] = useMutation<
+    setAlbumCoverID,
+    setAlbumCoverIDVariables
+  >(SET_ALBUM_COVER_ID_MUTATION, {
+    variables: {
+      albumID: id,
+      coverID: '-1',
+    },
+  })
+
+  return (
+    <SidebarSection>
+      <SidebarSectionTitle>
+        {t('sidebar.album.album_cover', 'Album cover')}
+      </SidebarSectionTitle>
+      <div>
+        <table className="border-collapse w-full">
+          <tfoot>
+            <tr className="text-left border-gray-100 border-b border-t">
+              <td colSpan={2} className="pl-4 py-2">
+                <button
+                  className="text-red-500 font-bold uppercase text-xs"
+                  disabled={loading}
+                  onClick={() => {
+                    setAlbumCoverID({
+                      variables: {
+                        albumID: id,
+                        coverID: '-1',
+                      },
+                    })
+                  }}
+                >
+                  <span>
+                    {t('sidebar.album.reset_cover', 'Reset cover photo')}
+                  </span>
+                </button>
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+    </SidebarSection>
+  )
+}

ui/src/components/sidebar/AlbumSidebar.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { useQuery, gql } from '@apollo/client'
 import { SidebarAlbumShare } from './Sharing'
+import { SidebarAlbumCover } from './AlbumCovers'
 import { useTranslation } from 'react-i18next'
 import SidebarHeader from './SidebarHeader'
 import {
@@ -46,6 +47,10 @@ const AlbumSidebar = ({ albumId }: AlbumSidebarProps) => {
         {/* <h1 className="text-3xl font-semibold">{data.album.title}</h1> */}
         <SidebarAlbumShare id={albumId} />
       </div>
+      <div className="mt-8">
+        {/* <h1 className="text-3xl font-semibold">{data.album.title}</h1> */}
+        <SidebarAlbumCover id={albumId} />
+      </div>
     </div>
   )
 }

ui/src/components/sidebar/MediaSidebar.tsx

@@ -26,6 +26,7 @@ import {
 
 import { sidebarDownloadQuery_media_downloads } from './__generated__/sidebarDownloadQuery'
 import SidebarHeader from './SidebarHeader'
+import { SidebarPhotoCover } from './AlbumCovers'
 
 const SIDEBAR_MEDIA_QUERY = gql`
   query sidebarPhoto($id: ID!) {
@@ -365,6 +366,9 @@ const SidebarContent = ({ media, hidePreview }: SidebarContentProps) => {
       <MetadataInfo media={media} />
       <SidebarDownload media={media} />
       <SidebarPhotoShare id={media.id} />
+      <div className="mt-8">
+        <SidebarPhotoCover id={'3'} cover_id={media.id} />
+      </div>
     </div>
   )
 }

ui/src/components/sidebar/__generated__/setAlbumCoverID.ts

@@ -0,0 +1,26 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+// ====================================================
+// GraphQL mutation operation: setAlbumCoverID
+// ====================================================
+
+export interface setAlbumCoverID_setAlbumCoverID {
+  __typename: 'Album'
+  id: string
+  coverID: string
+}
+
+export interface setAlbumCoverID {
+  /**
+   * Assign a cover image to an album, set coverID to -1 to remove the current one
+   */
+  setAlbumCoverID: setAlbumCoverID_setAlbumCoverID
+}
+
+export interface setAlbumCoverIDVariables {
+  albumID: string
+  coverID: string
+}