diff --git a/ui/src/Pages/AlbumPage/AlbumPage.tsx b/ui/src/Pages/AlbumPage/AlbumPage.tsx
index de05f7cd..d63e8fc2 100644
--- a/ui/src/Pages/AlbumPage/AlbumPage.tsx
+++ b/ui/src/Pages/AlbumPage/AlbumPage.tsx
@@ -10,8 +10,11 @@ import { albumQuery, albumQueryVariables } from './__generated__/albumQuery'
 import useOrderingParams from '../../hooks/useOrderingParams'
 import { useParams } from 'react-router-dom'
 import { isNil } from '../../helpers/utils'
+import { MEDIA_GALLERY_FRAGMENT } from '../../components/photoGallery/MediaGallery'
 
 const ALBUM_QUERY = gql`
+  ${MEDIA_GALLERY_FRAGMENT}
+
   query albumQuery(
     $id: ID!
     $onlyFavorites: Boolean
@@ -40,21 +43,7 @@ const ALBUM_QUERY = gql`
         order: { order_by: $mediaOrderBy, order_direction: $orderDirection }
         onlyFavorites: $onlyFavorites
       ) {
-        id
-        type
-        blurhash
-        thumbnail {
-          url
-          width
-          height
-        }
-        highRes {
-          url
-        }
-        videoWeb {
-          url
-        }
-        favorite
+        ...MediaGalleryFields
       }
     }
   }
diff --git a/ui/src/Pages/AllAlbumsPage/__generated__/getMyAlbums.ts b/ui/src/Pages/AllAlbumsPage/__generated__/getMyAlbums.ts
index 600309f7..51041d3e 100644
--- a/ui/src/Pages/AllAlbumsPage/__generated__/getMyAlbums.ts
+++ b/ui/src/Pages/AllAlbumsPage/__generated__/getMyAlbums.ts
@@ -8,35 +8,35 @@
 // ====================================================
 
 export interface getMyAlbums_myAlbums_thumbnail_thumbnail {
-  __typename: "MediaURL";
+  __typename: 'MediaURL'
   /**
    * URL for previewing the image
    */
-  url: string;
+  url: string
 }
 
 export interface getMyAlbums_myAlbums_thumbnail {
-  __typename: "Media";
-  id: string;
+  __typename: 'Media'
+  id: string
   /**
    * URL to display the media in a smaller resolution
    */
-  thumbnail: getMyAlbums_myAlbums_thumbnail_thumbnail | null;
+  thumbnail: getMyAlbums_myAlbums_thumbnail_thumbnail | null
 }
 
 export interface getMyAlbums_myAlbums {
-  __typename: "Album";
-  id: string;
-  title: string;
+  __typename: 'Album'
+  id: string
+  title: string
   /**
    * An image in this album used for previewing this album
    */
-  thumbnail: getMyAlbums_myAlbums_thumbnail | null;
+  thumbnail: getMyAlbums_myAlbums_thumbnail | null
 }
 
 export interface getMyAlbums {
   /**
    * List of albums owned by the logged in user.
    */
-  myAlbums: getMyAlbums_myAlbums[];
+  myAlbums: getMyAlbums_myAlbums[]
 }
diff --git a/ui/src/Pages/LoginPage/__generated__/CheckInitialSetup.ts b/ui/src/Pages/LoginPage/__generated__/CheckInitialSetup.ts
index 94fe677e..8e91c1b5 100644
--- a/ui/src/Pages/LoginPage/__generated__/CheckInitialSetup.ts
+++ b/ui/src/Pages/LoginPage/__generated__/CheckInitialSetup.ts
@@ -8,13 +8,13 @@
 // ====================================================
 
 export interface CheckInitialSetup_siteInfo {
-  __typename: "SiteInfo";
+  __typename: 'SiteInfo'
   /**
    * Whether or not the initial setup wizard should be shown
    */
-  initialSetup: boolean;
+  initialSetup: boolean
 }
 
 export interface CheckInitialSetup {
-  siteInfo: CheckInitialSetup_siteInfo;
+  siteInfo: CheckInitialSetup_siteInfo
 }
diff --git a/ui/src/Pages/PeoplePage/SingleFaceGroup/SingleFaceGroup.tsx b/ui/src/Pages/PeoplePage/SingleFaceGroup/SingleFaceGroup.tsx
index 51c23d77..8d352faf 100644
--- a/ui/src/Pages/PeoplePage/SingleFaceGroup/SingleFaceGroup.tsx
+++ b/ui/src/Pages/PeoplePage/SingleFaceGroup/SingleFaceGroup.tsx
@@ -2,7 +2,7 @@ import { gql, useQuery } from '@apollo/client'
 import React, { useEffect, useReducer } from 'react'
 import { useTranslation } from 'react-i18next'
 import PaginateLoader from '../../../components/PaginateLoader'
-import PhotoGallery from '../../../components/photoGallery/PhotoGallery'
+import MediaGallery from '../../../components/photoGallery/MediaGallery'
 import { photoGalleryReducer } from '../../../components/photoGallery/photoGalleryReducer'
 import useScrollPagination from '../../../hooks/useScrollPagination'
 import FaceGroupTitle from './FaceGroupTitle'
@@ -91,7 +91,7 @@ const SingleFaceGroup = ({ faceGroupID }: SingleFaceGroupProps) => {
     <div ref={containerElem}>
       <FaceGroupTitle faceGroup={faceGroup} />
       <div>
-        <PhotoGallery
+        <MediaGallery
           loading={loading}
           dispatchMedia={dispatchMedia}
           mediaState={mediaState}
diff --git a/ui/src/Pages/PeoplePage/SingleFaceGroup/__generated__/combineFaces.ts b/ui/src/Pages/PeoplePage/SingleFaceGroup/__generated__/combineFaces.ts
index 23f6c44f..b29126ab 100644
--- a/ui/src/Pages/PeoplePage/SingleFaceGroup/__generated__/combineFaces.ts
+++ b/ui/src/Pages/PeoplePage/SingleFaceGroup/__generated__/combineFaces.ts
@@ -8,18 +8,18 @@
 // ====================================================
 
 export interface combineFaces_combineFaceGroups {
-  __typename: "FaceGroup";
-  id: string;
+  __typename: 'FaceGroup'
+  id: string
 }
 
 export interface combineFaces {
   /**
    * Merge two face groups into a single one, all ImageFaces from source will be moved to destination
    */
-  combineFaceGroups: combineFaces_combineFaceGroups;
+  combineFaceGroups: combineFaces_combineFaceGroups
 }
 
 export interface combineFacesVariables {
-  destID: string;
-  srcID: string;
+  destID: string
+  srcID: string
 }
diff --git a/ui/src/Pages/PeoplePage/SingleFaceGroup/__generated__/moveImageFaces.ts b/ui/src/Pages/PeoplePage/SingleFaceGroup/__generated__/moveImageFaces.ts
index 1279f420..36b76a8d 100644
--- a/ui/src/Pages/PeoplePage/SingleFaceGroup/__generated__/moveImageFaces.ts
+++ b/ui/src/Pages/PeoplePage/SingleFaceGroup/__generated__/moveImageFaces.ts
@@ -8,24 +8,24 @@
 // ====================================================
 
 export interface moveImageFaces_moveImageFaces_imageFaces {
-  __typename: "ImageFace";
-  id: string;
+  __typename: 'ImageFace'
+  id: string
 }
 
 export interface moveImageFaces_moveImageFaces {
-  __typename: "FaceGroup";
-  id: string;
-  imageFaces: moveImageFaces_moveImageFaces_imageFaces[];
+  __typename: 'FaceGroup'
+  id: string
+  imageFaces: moveImageFaces_moveImageFaces_imageFaces[]
 }
 
 export interface moveImageFaces {
   /**
    * Move a list of ImageFaces to another face group
    */
-  moveImageFaces: moveImageFaces_moveImageFaces;
+  moveImageFaces: moveImageFaces_moveImageFaces
 }
 
 export interface moveImageFacesVariables {
-  faceIDs: string[];
-  destFaceGroupID: string;
+  faceIDs: string[]
+  destFaceGroupID: string
 }
diff --git a/ui/src/Pages/PeoplePage/__generated__/recognizeUnlabeledFaces.ts b/ui/src/Pages/PeoplePage/__generated__/recognizeUnlabeledFaces.ts
index bfbfb49b..d8bdb017 100644
--- a/ui/src/Pages/PeoplePage/__generated__/recognizeUnlabeledFaces.ts
+++ b/ui/src/Pages/PeoplePage/__generated__/recognizeUnlabeledFaces.ts
@@ -8,13 +8,13 @@
 // ====================================================
 
 export interface recognizeUnlabeledFaces_recognizeUnlabeledFaces {
-  __typename: "ImageFace";
-  id: string;
+  __typename: 'ImageFace'
+  id: string
 }
 
 export interface recognizeUnlabeledFaces {
   /**
    * Check all unlabeled faces to see if they match a labeled FaceGroup, and move them if they match
    */
-  recognizeUnlabeledFaces: recognizeUnlabeledFaces_recognizeUnlabeledFaces[];
+  recognizeUnlabeledFaces: recognizeUnlabeledFaces_recognizeUnlabeledFaces[]
 }
diff --git a/ui/src/Pages/SettingsPage/Users/__generated__/scanUser.ts b/ui/src/Pages/SettingsPage/Users/__generated__/scanUser.ts
index 37f0c92b..55a73d14 100644
--- a/ui/src/Pages/SettingsPage/Users/__generated__/scanUser.ts
+++ b/ui/src/Pages/SettingsPage/Users/__generated__/scanUser.ts
@@ -8,17 +8,17 @@
 // ====================================================
 
 export interface scanUser_scanUser {
-  __typename: "ScannerResult";
-  success: boolean;
+  __typename: 'ScannerResult'
+  success: boolean
 }
 
 export interface scanUser {
   /**
    * Scan a single user for new media
    */
-  scanUser: scanUser_scanUser;
+  scanUser: scanUser_scanUser
 }
 
 export interface scanUserVariables {
-  userId: string;
+  userId: string
 }
diff --git a/ui/src/Pages/SettingsPage/__generated__/changeScanIntervalMutation.ts b/ui/src/Pages/SettingsPage/__generated__/changeScanIntervalMutation.ts
index f1ff3202..a9d9aae0 100644
--- a/ui/src/Pages/SettingsPage/__generated__/changeScanIntervalMutation.ts
+++ b/ui/src/Pages/SettingsPage/__generated__/changeScanIntervalMutation.ts
@@ -12,9 +12,9 @@ export interface changeScanIntervalMutation {
    * Set how often, in seconds, the server should automatically scan for new media,
    * a value of 0 will disable periodic scans
    */
-  setPeriodicScanInterval: number;
+  setPeriodicScanInterval: number
 }
 
 export interface changeScanIntervalMutationVariables {
-  interval: number;
+  interval: number
 }
diff --git a/ui/src/Pages/SettingsPage/__generated__/concurrentWorkersQuery.ts b/ui/src/Pages/SettingsPage/__generated__/concurrentWorkersQuery.ts
index b1bfe3e0..a8759222 100644
--- a/ui/src/Pages/SettingsPage/__generated__/concurrentWorkersQuery.ts
+++ b/ui/src/Pages/SettingsPage/__generated__/concurrentWorkersQuery.ts
@@ -8,13 +8,13 @@
 // ====================================================
 
 export interface concurrentWorkersQuery_siteInfo {
-  __typename: "SiteInfo";
+  __typename: 'SiteInfo'
   /**
    * How many max concurrent scanner jobs that should run at once
    */
-  concurrentWorkers: number;
+  concurrentWorkers: number
 }
 
 export interface concurrentWorkersQuery {
-  siteInfo: concurrentWorkersQuery_siteInfo;
+  siteInfo: concurrentWorkersQuery_siteInfo
 }
diff --git a/ui/src/Pages/SettingsPage/__generated__/scanAllMutation.ts b/ui/src/Pages/SettingsPage/__generated__/scanAllMutation.ts
index 95fa9b32..a52bdede 100644
--- a/ui/src/Pages/SettingsPage/__generated__/scanAllMutation.ts
+++ b/ui/src/Pages/SettingsPage/__generated__/scanAllMutation.ts
@@ -8,14 +8,14 @@
 // ====================================================
 
 export interface scanAllMutation_scanAll {
-  __typename: "ScannerResult";
-  success: boolean;
-  message: string | null;
+  __typename: 'ScannerResult'
+  success: boolean
+  message: string | null
 }
 
 export interface scanAllMutation {
   /**
    * Scan all users for new media
    */
-  scanAll: scanAllMutation_scanAll;
+  scanAll: scanAllMutation_scanAll
 }
diff --git a/ui/src/Pages/SettingsPage/__generated__/scanIntervalQuery.ts b/ui/src/Pages/SettingsPage/__generated__/scanIntervalQuery.ts
index 9128437d..20dae032 100644
--- a/ui/src/Pages/SettingsPage/__generated__/scanIntervalQuery.ts
+++ b/ui/src/Pages/SettingsPage/__generated__/scanIntervalQuery.ts
@@ -8,13 +8,13 @@
 // ====================================================
 
 export interface scanIntervalQuery_siteInfo {
-  __typename: "SiteInfo";
+  __typename: 'SiteInfo'
   /**
    * How often automatic scans should be initiated in seconds
    */
-  periodicScanInterval: number;
+  periodicScanInterval: number
 }
 
 export interface scanIntervalQuery {
-  siteInfo: scanIntervalQuery_siteInfo;
+  siteInfo: scanIntervalQuery_siteInfo
 }
diff --git a/ui/src/Pages/SettingsPage/__generated__/setConcurrentWorkers.ts b/ui/src/Pages/SettingsPage/__generated__/setConcurrentWorkers.ts
index 7c6207c2..19881eb5 100644
--- a/ui/src/Pages/SettingsPage/__generated__/setConcurrentWorkers.ts
+++ b/ui/src/Pages/SettingsPage/__generated__/setConcurrentWorkers.ts
@@ -11,9 +11,9 @@ export interface setConcurrentWorkers {
   /**
    * Set max number of concurrent scanner jobs running at once
    */
-  setScannerConcurrentWorkers: number;
+  setScannerConcurrentWorkers: number
 }
 
 export interface setConcurrentWorkersVariables {
-  workers: number;
+  workers: number
 }
diff --git a/ui/src/components/albumGallery/AlbumGallery.tsx b/ui/src/components/albumGallery/AlbumGallery.tsx
index f640f409..72b0e1a6 100644
--- a/ui/src/components/albumGallery/AlbumGallery.tsx
+++ b/ui/src/components/albumGallery/AlbumGallery.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useReducer } from 'react'
 import AlbumTitle from '../album/AlbumTitle'
-import PhotoGallery from '../photoGallery/PhotoGallery'
+import MediaGallery from '../photoGallery/MediaGallery'
 import AlbumBoxes from './AlbumBoxes'
 import AlbumFilter from '../album/AlbumFilter'
 import {
@@ -114,7 +114,7 @@ const AlbumGallery = React.forwardRef(
         )}
         <AlbumTitle album={album} disableLink />
         {subAlbumElement}
-        <PhotoGallery
+        <MediaGallery
           loading={loading}
           mediaState={mediaState}
           dispatchMedia={dispatchMedia}
diff --git a/ui/src/components/layout/__generated__/faceDetectionEnabled.ts b/ui/src/components/layout/__generated__/faceDetectionEnabled.ts
index 4afd838a..9dbb87a0 100644
--- a/ui/src/components/layout/__generated__/faceDetectionEnabled.ts
+++ b/ui/src/components/layout/__generated__/faceDetectionEnabled.ts
@@ -8,13 +8,13 @@
 // ====================================================
 
 export interface faceDetectionEnabled_siteInfo {
-  __typename: "SiteInfo";
+  __typename: 'SiteInfo'
   /**
    * Whether or not face detection is enabled and working
    */
-  faceDetectionEnabled: boolean;
+  faceDetectionEnabled: boolean
 }
 
 export interface faceDetectionEnabled {
-  siteInfo: faceDetectionEnabled_siteInfo;
+  siteInfo: faceDetectionEnabled_siteInfo
 }
diff --git a/ui/src/components/layout/__generated__/mapboxEnabledQuery.ts b/ui/src/components/layout/__generated__/mapboxEnabledQuery.ts
index e666de49..06007845 100644
--- a/ui/src/components/layout/__generated__/mapboxEnabledQuery.ts
+++ b/ui/src/components/layout/__generated__/mapboxEnabledQuery.ts
@@ -11,5 +11,5 @@ export interface mapboxEnabledQuery {
   /**
    * Get the mapbox api token, returns null if mapbox is not enabled
    */
-  mapboxToken: string | null;
+  mapboxToken: string | null
 }
diff --git a/ui/src/components/photoGallery/PhotoGallery.test.tsx b/ui/src/components/photoGallery/MediaGallery.test.tsx
similarity index 96%
rename from ui/src/components/photoGallery/PhotoGallery.test.tsx
rename to ui/src/components/photoGallery/MediaGallery.test.tsx
index b1d5aaa9..dc9dadb5 100644
--- a/ui/src/components/photoGallery/PhotoGallery.test.tsx
+++ b/ui/src/components/photoGallery/MediaGallery.test.tsx
@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'
 
 import React from 'react'
 import { MediaType } from '../../__generated__/globalTypes'
-import PhotoGallery from './PhotoGallery'
+import MediaGallery from './MediaGallery'
 import { PhotoGalleryState } from './photoGalleryReducer'
 
 vi.mock('./photoGalleryMutations', () => ({
@@ -55,7 +55,7 @@ test('photo gallery with media', () => {
   }
 
   render(
-    <PhotoGallery
+    <MediaGallery
       dispatchMedia={dispatchMedia}
       mediaState={mediaState}
       loading={false}
@@ -78,7 +78,7 @@ describe('photo gallery presenting', () => {
     }
 
     render(
-      <PhotoGallery
+      <MediaGallery
         dispatchMedia={dispatchMedia}
         loading={false}
         mediaState={mediaStateNoPresent}
@@ -112,7 +112,7 @@ describe('photo gallery presenting', () => {
     }
 
     render(
-      <PhotoGallery
+      <MediaGallery
         dispatchMedia={dispatchMedia}
         loading={false}
         mediaState={mediaStatePresent}
diff --git a/ui/src/components/photoGallery/PhotoGallery.tsx b/ui/src/components/photoGallery/MediaGallery.tsx
similarity index 77%
rename from ui/src/components/photoGallery/PhotoGallery.tsx
rename to ui/src/components/photoGallery/MediaGallery.tsx
index d781ec53..311d0d46 100644
--- a/ui/src/components/photoGallery/PhotoGallery.tsx
+++ b/ui/src/components/photoGallery/MediaGallery.tsx
@@ -2,7 +2,6 @@ import React, { useContext } from 'react'
 import styled from 'styled-components'
 import { MediaThumbnail, MediaPlaceholder } from './MediaThumbnail'
 import PresentView from './presentView/PresentView'
-import { PresentMediaProps_Media } from './presentView/PresentMedia'
 import {
   openPresentModeAction,
   PhotoGalleryAction,
@@ -14,7 +13,7 @@ import {
 } from './photoGalleryMutations'
 import MediaSidebar from '../sidebar/MediaSidebar/MediaSidebar'
 import { SidebarContext } from '../sidebar/Sidebar'
-import { sidebarMediaQuery_media_thumbnail } from '../sidebar/MediaSidebar/__generated__/sidebarMediaQuery'
+import { gql } from '@apollo/client'
 
 const Gallery = styled.div`
   display: flex;
@@ -35,28 +34,42 @@ export const PhotoFiller = styled.div`
   flex-grow: 999999;
 `
 
-export interface PhotoGalleryProps_Media extends PresentMediaProps_Media {
-  thumbnail: sidebarMediaQuery_media_thumbnail | null
-  blurhash: string | null
-  favorite?: boolean
-}
+export const MEDIA_GALLERY_FRAGMENT = gql`
+  fragment MediaGalleryFields on Media {
+    id
+    type
+    blurhash
+    thumbnail {
+      url
+      width
+      height
+    }
+    highRes {
+      url
+    }
+    videoWeb {
+      url
+    }
+    favorite
+  }
+`
 
-type PhotoGalleryProps = {
+type MediaGalleryProps = {
   loading: boolean
   mediaState: PhotoGalleryState
   dispatchMedia: React.Dispatch<PhotoGalleryAction>
 }
 
-const PhotoGallery = ({ mediaState, dispatchMedia }: PhotoGalleryProps) => {
+const MediaGallery = ({ mediaState, dispatchMedia }: MediaGalleryProps) => {
   const [markFavorite] = useMarkFavoriteMutation()
 
   const { media, activeIndex, presenting } = mediaState
 
   const { updateSidebar } = useContext(SidebarContext)
 
-  let photoElements = []
+  let mediaElements = []
   if (media) {
-    photoElements = media.map((media, index) => {
+    mediaElements = media.map((media, index) => {
       const active = activeIndex == index
 
       return (
@@ -85,14 +98,14 @@ const PhotoGallery = ({ mediaState, dispatchMedia }: PhotoGalleryProps) => {
     })
   } else {
     for (let i = 0; i < 6; i++) {
-      photoElements.push(<MediaPlaceholder key={i} />)
+      mediaElements.push(<MediaPlaceholder key={i} />)
     }
   }
 
   return (
     <>
       <Gallery data-testid="photo-gallery-wrapper">
-        {photoElements}
+        {mediaElements}
         <PhotoFiller />
       </Gallery>
       {presenting && (
@@ -105,4 +118,4 @@ const PhotoGallery = ({ mediaState, dispatchMedia }: PhotoGalleryProps) => {
   )
 }
 
-export default PhotoGallery
+export default MediaGallery
diff --git a/ui/src/components/photoGallery/MediaThumbnail.tsx b/ui/src/components/photoGallery/MediaThumbnail.tsx
index 9a6fb9ca..60b8fa2c 100644
--- a/ui/src/components/photoGallery/MediaThumbnail.tsx
+++ b/ui/src/components/photoGallery/MediaThumbnail.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components'
 import { ProtectedImage } from './ProtectedMedia'
 import { MediaType } from '../../__generated__/globalTypes'
 import { ReactComponent as VideoThumbnailIconSVG } from './icons/videoThumbnailIcon.svg'
+import { MediaGalleryFields } from './__generated__/MediaGalleryFields'
 
 const MediaContainer = styled.div`
   flex-grow: 1;
@@ -136,17 +137,7 @@ const VideoThumbnailIcon = styled(VideoThumbnailIconSVG)`
 `
 
 type MediaThumbnailProps = {
-  media: {
-    id: string
-    type: MediaType
-    blurhash: string | null
-    favorite?: boolean
-    thumbnail: null | {
-      url: string
-      width: number
-      height: number
-    }
-  }
+  media: MediaGalleryFields
   active: boolean
   selectImage(): void
   clickPresent(): void
diff --git a/ui/src/components/photoGallery/__generated__/MediaGalleryFields.ts b/ui/src/components/photoGallery/__generated__/MediaGalleryFields.ts
new file mode 100644
index 00000000..0a1393b6
--- /dev/null
+++ b/ui/src/components/photoGallery/__generated__/MediaGalleryFields.ts
@@ -0,0 +1,65 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+import { MediaType } from './../../../__generated__/globalTypes'
+
+// ====================================================
+// GraphQL fragment: MediaGalleryFields
+// ====================================================
+
+export interface MediaGalleryFields_thumbnail {
+  __typename: 'MediaURL'
+  /**
+   * URL for previewing the image
+   */
+  url: string
+  /**
+   * Width of the image in pixels
+   */
+  width: number
+  /**
+   * Height of the image in pixels
+   */
+  height: number
+}
+
+export interface MediaGalleryFields_highRes {
+  __typename: 'MediaURL'
+  /**
+   * URL for previewing the image
+   */
+  url: string
+}
+
+export interface MediaGalleryFields_videoWeb {
+  __typename: 'MediaURL'
+  /**
+   * URL for previewing the image
+   */
+  url: string
+}
+
+export interface MediaGalleryFields {
+  __typename: 'Media'
+  id: string
+  type: MediaType
+  /**
+   * A short string that can be used to generate a blured version of the media, to show while the original is loading
+   */
+  blurhash: string | null
+  /**
+   * URL to display the media in a smaller resolution
+   */
+  thumbnail: MediaGalleryFields_thumbnail | null
+  /**
+   * URL to display the photo in full resolution, will be null for videos
+   */
+  highRes: MediaGalleryFields_highRes | null
+  /**
+   * URL to get the video in a web format that can be played in the browser, will be null for photos
+   */
+  videoWeb: MediaGalleryFields_videoWeb | null
+  favorite: boolean
+}
diff --git a/ui/src/components/photoGallery/__generated__/markMediaFavorite.ts b/ui/src/components/photoGallery/__generated__/markMediaFavorite.ts
index c5ddb940..c13b79e8 100644
--- a/ui/src/components/photoGallery/__generated__/markMediaFavorite.ts
+++ b/ui/src/components/photoGallery/__generated__/markMediaFavorite.ts
@@ -8,19 +8,19 @@
 // ====================================================
 
 export interface markMediaFavorite_favoriteMedia {
-  __typename: "Media";
-  id: string;
-  favorite: boolean;
+  __typename: 'Media'
+  id: string
+  favorite: boolean
 }
 
 export interface markMediaFavorite {
   /**
    * Mark or unmark a media as being a favorite
    */
-  favoriteMedia: markMediaFavorite_favoriteMedia;
+  favoriteMedia: markMediaFavorite_favoriteMedia
 }
 
 export interface markMediaFavoriteVariables {
-  mediaId: string;
-  favorite: boolean;
+  mediaId: string
+  favorite: boolean
 }
diff --git a/ui/src/components/photoGallery/photoGalleryMutations.ts b/ui/src/components/photoGallery/photoGalleryMutations.ts
index 6933d7df..44cedc23 100644
--- a/ui/src/components/photoGallery/photoGalleryMutations.ts
+++ b/ui/src/components/photoGallery/photoGalleryMutations.ts
@@ -1,5 +1,5 @@
 import { gql, MutationFunction, useMutation } from '@apollo/client'
-import { PhotoGalleryProps_Media } from './PhotoGallery'
+import { PhotoGalleryProps_Media } from './MediaGallery'
 import {
   markMediaFavorite,
   markMediaFavoriteVariables,
diff --git a/ui/src/components/photoGallery/photoGalleryReducer.tsx b/ui/src/components/photoGallery/photoGalleryReducer.tsx
index 6f917d47..e3066cf4 100644
--- a/ui/src/components/photoGallery/photoGalleryReducer.tsx
+++ b/ui/src/components/photoGallery/photoGalleryReducer.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react'
-import { PhotoGalleryProps_Media } from './PhotoGallery'
+import { MediaGalleryFields } from './__generated__/MediaGalleryFields'
 
 export interface PhotoGalleryState {
   presenting: boolean
   activeIndex: number
-  media: PhotoGalleryProps_Media[]
+  media: MediaGalleryFields[]
 }
 
 export type GalleryAction =
@@ -16,7 +16,7 @@ export type PhotoGalleryAction =
   | GalleryAction
   | { type: 'openPresentMode'; activeIndex: number }
   | { type: 'selectImage'; index: number }
-  | { type: 'replaceMedia'; media: PhotoGalleryProps_Media[] }
+  | { type: 'replaceMedia'; media: MediaGalleryFields[] }
 
 export function photoGalleryReducer(
   state: PhotoGalleryState,
diff --git a/ui/src/components/photoGallery/presentView/PresentMedia.test.tsx b/ui/src/components/photoGallery/presentView/PresentMedia.test.tsx
index e42a38eb..09ffeb4f 100644
--- a/ui/src/components/photoGallery/presentView/PresentMedia.test.tsx
+++ b/ui/src/components/photoGallery/presentView/PresentMedia.test.tsx
@@ -2,17 +2,23 @@ import { render, screen } from '@testing-library/react'
 
 import React from 'react'
 import { MediaType } from '../../../__generated__/globalTypes'
-import PresentMedia, { PresentMediaProps_Media } from './PresentMedia'
+import { MediaGalleryFields } from '../__generated__/MediaGalleryFields'
+import PresentMedia from './PresentMedia'
 
 test('render present image', () => {
-  const media: PresentMediaProps_Media = {
+  const media: MediaGalleryFields = {
     __typename: 'Media',
     id: '123',
     type: MediaType.Photo,
     highRes: null,
+    blurhash: null,
+    videoWeb: null,
+    favorite: false,
     thumbnail: {
       __typename: 'MediaURL',
       url: '/sample_image.jpg',
+      width: 300,
+      height: 200,
     },
   }
 
@@ -28,11 +34,13 @@ test('render present image', () => {
 })
 
 test('render present video', () => {
-  const media: PresentMediaProps_Media = {
+  const media: MediaGalleryFields = {
     __typename: 'Media',
     id: '123',
     type: MediaType.Video,
     highRes: null,
+    blurhash: null,
+    favorite: false,
     videoWeb: {
       __typename: 'MediaURL',
       url: '/sample_video.mp4',
@@ -40,6 +48,8 @@ test('render present video', () => {
     thumbnail: {
       __typename: 'MediaURL',
       url: '/sample_video_thumb.jpg',
+      width: 300,
+      height: 200,
     },
   }
 
diff --git a/ui/src/components/photoGallery/presentView/PresentMedia.tsx b/ui/src/components/photoGallery/presentView/PresentMedia.tsx
index 197a759e..7aa5eb4a 100644
--- a/ui/src/components/photoGallery/presentView/PresentMedia.tsx
+++ b/ui/src/components/photoGallery/presentView/PresentMedia.tsx
@@ -2,11 +2,8 @@ import React from 'react'
 import styled from 'styled-components'
 import { MediaType } from '../../../__generated__/globalTypes'
 import { exhaustiveCheck } from '../../../helpers/utils'
-import {
-  ProtectedImage,
-  ProtectedVideo,
-  ProtectedVideoProps_Media,
-} from '../ProtectedMedia'
+import { ProtectedImage, ProtectedVideo } from '../ProtectedMedia'
+import { MediaGalleryFields } from '../__generated__/MediaGalleryFields'
 
 const StyledPhoto = styled(ProtectedImage)`
   position: absolute;
@@ -26,16 +23,8 @@ const StyledVideo = styled(ProtectedVideo)`
   height: 100vh;
 `
 
-export interface PresentMediaProps_Media extends ProtectedVideoProps_Media {
-  type: MediaType
-  highRes: null | {
-    __typename: 'MediaURL'
-    url: string
-  }
-}
-
 type PresentMediaProps = {
-  media: PresentMediaProps_Media
+  media: MediaGalleryFields
   imageLoaded?(): void
 }
 
diff --git a/ui/src/components/photoGallery/presentView/PresentView.tsx b/ui/src/components/photoGallery/presentView/PresentView.tsx
index 33b92586..e5dceee0 100644
--- a/ui/src/components/photoGallery/presentView/PresentView.tsx
+++ b/ui/src/components/photoGallery/presentView/PresentView.tsx
@@ -1,8 +1,9 @@
 import React, { useEffect } from 'react'
 import styled, { createGlobalStyle } from 'styled-components'
 import PresentNavigationOverlay from './PresentNavigationOverlay'
-import PresentMedia, { PresentMediaProps_Media } from './PresentMedia'
+import PresentMedia from './PresentMedia'
 import { closePresentModeAction, GalleryAction } from '../photoGalleryReducer'
+import { MediaGalleryFields } from '../__generated__/MediaGalleryFields'
 
 const StyledContainer = styled.div`
   position: fixed;
@@ -24,7 +25,7 @@ const PreventScroll = createGlobalStyle`
 type PresentViewProps = {
   className?: string
   imageLoaded?(): void
-  activeMedia: PresentMediaProps_Media
+  activeMedia: MediaGalleryFields
   dispatchMedia: React.Dispatch<GalleryAction>
   disableSaveCloseInHistory?: boolean
 }
diff --git a/ui/src/components/sidebar/__generated__/getAlbumSidebar.ts b/ui/src/components/sidebar/__generated__/getAlbumSidebar.ts
index e4e66043..e54fa3bd 100644
--- a/ui/src/components/sidebar/__generated__/getAlbumSidebar.ts
+++ b/ui/src/components/sidebar/__generated__/getAlbumSidebar.ts
@@ -8,9 +8,9 @@
 // ====================================================
 
 export interface getAlbumSidebar_album {
-  __typename: "Album";
-  id: string;
-  title: string;
+  __typename: 'Album'
+  id: string
+  title: string
 }
 
 export interface getAlbumSidebar {
@@ -18,9 +18,9 @@ export interface getAlbumSidebar {
    * Get album by id, user must own the album or be admin
    * If valid tokenCredentials are provided, the album may be retrived without further authentication
    */
-  album: getAlbumSidebar_album;
+  album: getAlbumSidebar_album
 }
 
 export interface getAlbumSidebarVariables {
-  id: string;
+  id: string
 }
diff --git a/ui/src/components/sidebar/__generated__/resetAlbumCover.ts b/ui/src/components/sidebar/__generated__/resetAlbumCover.ts
index 1b71c76d..10a36273 100644
--- a/ui/src/components/sidebar/__generated__/resetAlbumCover.ts
+++ b/ui/src/components/sidebar/__generated__/resetAlbumCover.ts
@@ -8,38 +8,38 @@
 // ====================================================
 
 export interface resetAlbumCover_resetAlbumCover_thumbnail_thumbnail {
-  __typename: "MediaURL";
+  __typename: 'MediaURL'
   /**
    * URL for previewing the image
    */
-  url: string;
+  url: string
 }
 
 export interface resetAlbumCover_resetAlbumCover_thumbnail {
-  __typename: "Media";
-  id: string;
+  __typename: 'Media'
+  id: string
   /**
    * URL to display the media in a smaller resolution
    */
-  thumbnail: resetAlbumCover_resetAlbumCover_thumbnail_thumbnail | null;
+  thumbnail: resetAlbumCover_resetAlbumCover_thumbnail_thumbnail | null
 }
 
 export interface resetAlbumCover_resetAlbumCover {
-  __typename: "Album";
-  id: string;
+  __typename: 'Album'
+  id: string
   /**
    * An image in this album used for previewing this album
    */
-  thumbnail: resetAlbumCover_resetAlbumCover_thumbnail | null;
+  thumbnail: resetAlbumCover_resetAlbumCover_thumbnail | null
 }
 
 export interface resetAlbumCover {
   /**
    * Reset the assigned cover photo for an album
    */
-  resetAlbumCover: resetAlbumCover_resetAlbumCover;
+  resetAlbumCover: resetAlbumCover_resetAlbumCover
 }
 
 export interface resetAlbumCoverVariables {
-  albumID: string;
+  albumID: string
 }
diff --git a/ui/src/components/sidebar/__generated__/setAlbumCover.ts b/ui/src/components/sidebar/__generated__/setAlbumCover.ts
index b0b70a05..b37d2587 100644
--- a/ui/src/components/sidebar/__generated__/setAlbumCover.ts
+++ b/ui/src/components/sidebar/__generated__/setAlbumCover.ts
@@ -8,38 +8,38 @@
 // ====================================================
 
 export interface setAlbumCover_setAlbumCover_thumbnail_thumbnail {
-  __typename: "MediaURL";
+  __typename: 'MediaURL'
   /**
    * URL for previewing the image
    */
-  url: string;
+  url: string
 }
 
 export interface setAlbumCover_setAlbumCover_thumbnail {
-  __typename: "Media";
-  id: string;
+  __typename: 'Media'
+  id: string
   /**
    * URL to display the media in a smaller resolution
    */
-  thumbnail: setAlbumCover_setAlbumCover_thumbnail_thumbnail | null;
+  thumbnail: setAlbumCover_setAlbumCover_thumbnail_thumbnail | null
 }
 
 export interface setAlbumCover_setAlbumCover {
-  __typename: "Album";
-  id: string;
+  __typename: 'Album'
+  id: string
   /**
    * An image in this album used for previewing this album
    */
-  thumbnail: setAlbumCover_setAlbumCover_thumbnail | null;
+  thumbnail: setAlbumCover_setAlbumCover_thumbnail | null
 }
 
 export interface setAlbumCover {
   /**
    * Assign a cover photo to an album
    */
-  setAlbumCover: setAlbumCover_setAlbumCover;
+  setAlbumCover: setAlbumCover_setAlbumCover
 }
 
 export interface setAlbumCoverVariables {
-  coverID: string;
+  coverID: string
 }
diff --git a/ui/src/components/sidebar/__generated__/sidebarAlbumAddShare.ts b/ui/src/components/sidebar/__generated__/sidebarAlbumAddShare.ts
index 2465afb8..e0f7aa13 100644
--- a/ui/src/components/sidebar/__generated__/sidebarAlbumAddShare.ts
+++ b/ui/src/components/sidebar/__generated__/sidebarAlbumAddShare.ts
@@ -8,19 +8,19 @@
 // ====================================================
 
 export interface sidebarAlbumAddShare_shareAlbum {
-  __typename: "ShareToken";
-  token: string;
+  __typename: 'ShareToken'
+  token: string
 }
 
 export interface sidebarAlbumAddShare {
   /**
    * Generate share token for album
    */
-  shareAlbum: sidebarAlbumAddShare_shareAlbum;
+  shareAlbum: sidebarAlbumAddShare_shareAlbum
 }
 
 export interface sidebarAlbumAddShareVariables {
-  id: string;
-  password?: string | null;
-  expire?: any | null;
+  id: string
+  password?: string | null
+  expire?: any | null
 }
diff --git a/ui/src/components/sidebar/__generated__/sidebarPhotoAddShare.ts b/ui/src/components/sidebar/__generated__/sidebarPhotoAddShare.ts
index db2d7209..0cd81ef1 100644
--- a/ui/src/components/sidebar/__generated__/sidebarPhotoAddShare.ts
+++ b/ui/src/components/sidebar/__generated__/sidebarPhotoAddShare.ts
@@ -8,19 +8,19 @@
 // ====================================================
 
 export interface sidebarPhotoAddShare_shareMedia {
-  __typename: "ShareToken";
-  token: string;
+  __typename: 'ShareToken'
+  token: string
 }
 
 export interface sidebarPhotoAddShare {
   /**
    * Generate share token for media
    */
-  shareMedia: sidebarPhotoAddShare_shareMedia;
+  shareMedia: sidebarPhotoAddShare_shareMedia
 }
 
 export interface sidebarPhotoAddShareVariables {
-  id: string;
-  password?: string | null;
-  expire?: any | null;
+  id: string
+  password?: string | null
+  expire?: any | null
 }
diff --git a/ui/src/components/sidebar/__generated__/sidebarProtectShare.ts b/ui/src/components/sidebar/__generated__/sidebarProtectShare.ts
index 0e889be9..518a3686 100644
--- a/ui/src/components/sidebar/__generated__/sidebarProtectShare.ts
+++ b/ui/src/components/sidebar/__generated__/sidebarProtectShare.ts
@@ -8,22 +8,22 @@
 // ====================================================
 
 export interface sidebarProtectShare_protectShareToken {
-  __typename: "ShareToken";
-  token: string;
+  __typename: 'ShareToken'
+  token: string
   /**
    * Whether or not a password is needed to access the share
    */
-  hasPassword: boolean;
+  hasPassword: boolean
 }
 
 export interface sidebarProtectShare {
   /**
    * Set a password for a token, if null is passed for the password argument, the password will be cleared
    */
-  protectShareToken: sidebarProtectShare_protectShareToken;
+  protectShareToken: sidebarProtectShare_protectShareToken
 }
 
 export interface sidebarProtectShareVariables {
-  token: string;
-  password?: string | null;
+  token: string
+  password?: string | null
 }
diff --git a/ui/src/components/sidebar/__generated__/sidebareDeleteShare.ts b/ui/src/components/sidebar/__generated__/sidebareDeleteShare.ts
index 65eb67ec..ada439cb 100644
--- a/ui/src/components/sidebar/__generated__/sidebareDeleteShare.ts
+++ b/ui/src/components/sidebar/__generated__/sidebareDeleteShare.ts
@@ -8,17 +8,17 @@
 // ====================================================
 
 export interface sidebareDeleteShare_deleteShareToken {
-  __typename: "ShareToken";
-  token: string;
+  __typename: 'ShareToken'
+  token: string
 }
 
 export interface sidebareDeleteShare {
   /**
    * Delete a share token by it's token value
    */
-  deleteShareToken: sidebareDeleteShare_deleteShareToken;
+  deleteShareToken: sidebareDeleteShare_deleteShareToken
 }
 
 export interface sidebareDeleteShareVariables {
-  token: string;
+  token: string
 }
diff --git a/ui/src/components/timelineGallery/TimelineGroupAlbum.tsx b/ui/src/components/timelineGallery/TimelineGroupAlbum.tsx
index 7310e37e..281b9908 100644
--- a/ui/src/components/timelineGallery/TimelineGroupAlbum.tsx
+++ b/ui/src/components/timelineGallery/TimelineGroupAlbum.tsx
@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
 import { Link } from 'react-router-dom'
 import { MediaThumbnail } from '../photoGallery/MediaThumbnail'
-import { PhotoFiller } from '../photoGallery/PhotoGallery'
+import { PhotoFiller } from '../photoGallery/MediaGallery'
 import {
   toggleFavoriteAction,
   useMarkFavoriteMutation,