diff --git a/satellite/console/consoleweb/config.go b/satellite/console/consoleweb/config.go
index 0266eb866..daa87bcff 100644
--- a/satellite/console/consoleweb/config.go
+++ b/satellite/console/consoleweb/config.go
@@ -47,6 +47,7 @@ type FrontendConfig struct {
ABTestingEnabled bool `json:"abTestingEnabled"`
PricingPackagesEnabled bool `json:"pricingPackagesEnabled"`
NewUploadModalEnabled bool `json:"newUploadModalEnabled"`
+ GalleryViewEnabled bool `json:"galleryViewEnabled"`
}
// Satellites is a configuration value that contains a list of satellite names and addresses.
diff --git a/satellite/console/consoleweb/server.go b/satellite/console/consoleweb/server.go
index ee6565dba..5bf4fcee7 100644
--- a/satellite/console/consoleweb/server.go
+++ b/satellite/console/consoleweb/server.go
@@ -100,6 +100,7 @@ type Config struct {
NativeTokenPaymentsEnabled bool `help:"indicates if storj native token payments system is enabled" default:"false"`
PricingPackagesEnabled bool `help:"whether to allow purchasing pricing packages" default:"false" devDefault:"true"`
NewUploadModalEnabled bool `help:"whether to show new upload modal" default:"false"`
+ GalleryViewEnabled bool `help:"whether to show new gallery view" default:"false"`
OauthCodeExpiry time.Duration `help:"how long oauth authorization codes are issued for" default:"10m"`
OauthAccessTokenExpiry time.Duration `help:"how long oauth access tokens are issued for" default:"24h"`
@@ -544,6 +545,7 @@ func (server *Server) frontendConfigHandler(w http.ResponseWriter, r *http.Reque
ABTestingEnabled: server.config.ABTesting.Enabled,
PricingPackagesEnabled: server.config.PricingPackagesEnabled,
NewUploadModalEnabled: server.config.NewUploadModalEnabled,
+ GalleryViewEnabled: server.config.GalleryViewEnabled,
}
err := json.NewEncoder(w).Encode(&cfg)
diff --git a/scripts/testdata/satellite-config.yaml.lock b/scripts/testdata/satellite-config.yaml.lock
index ee6fcb649..3ef15cbc2 100755
--- a/scripts/testdata/satellite-config.yaml.lock
+++ b/scripts/testdata/satellite-config.yaml.lock
@@ -256,6 +256,9 @@ compensation.withheld-percents: 75,75,75,50,50,50,25,25,25,0,0,0,0,0,0
# allow domains to embed the satellite in a frame, space separated
# console.frame-ancestors: tardigrade.io storj.io
+# whether to show new gallery view
+# console.gallery-view-enabled: false
+
# url link for gateway credentials requests
# console.gateway-credentials-request-url: https://auth.storjsatelliteshare.io
diff --git a/web/satellite/package.json b/web/satellite/package.json
index 9358603d8..06024c927 100644
--- a/web/satellite/package.json
+++ b/web/satellite/package.json
@@ -6,7 +6,7 @@
"preview": "vite preview",
"dev": "vite",
"build": "vite build",
- "build-watch": "vite build --watch",
+ "build-watch": "NODE_ENV=development vite build --watch",
"lint": "eslint --ext .js,.ts,.vue src --fix && stylelint . --max-warnings 0 --fix",
"lint-ci": "eslint --ext .js,.ts,.vue src --no-fix && stylelint . --max-warnings 0 --no-fix",
"wasm": "chmod +x ./scripts/build-wasm.sh && ./scripts/build-wasm.sh",
diff --git a/web/satellite/src/components/browser/FileEntry.vue b/web/satellite/src/components/browser/FileEntry.vue
index 18323b35d..eb597ddcb 100644
--- a/web/satellite/src/components/browser/FileEntry.vue
+++ b/web/satellite/src/components/browser/FileEntry.vue
@@ -122,6 +122,7 @@ import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames
import { MODALS } from '@/utils/constants/appStatePopUps';
import { BrowserObject, useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
import { useAppStore } from '@/store/modules/appStore';
+import { useConfigStore } from '@/store/modules/configStore';
import TableItem from '@/components/common/TableItem.vue';
@@ -134,6 +135,7 @@ import CloseIcon from '@/../static/images/common/closeCross.svg';
const appStore = useAppStore();
const obStore = useObjectBrowserStore();
+const config = useConfigStore();
const notify = useNotify();
const router = useRouter();
@@ -252,7 +254,13 @@ const loadingSpinner = computed((): boolean => {
*/
function openModal(): void {
obStore.setObjectPathForModal(props.path + props.file.Key);
- appStore.updateActiveModal(MODALS.objectDetails);
+
+ if (config.state.config.galleryViewEnabled) {
+ appStore.setGalleryView(true);
+ } else {
+ appStore.updateActiveModal(MODALS.objectDetails);
+ }
+
obStore.closeDropdown();
}
diff --git a/web/satellite/src/components/browser/UpEntry.vue b/web/satellite/src/components/browser/UpEntry.vue
index b1251430e..1f33fe18d 100644
--- a/web/satellite/src/components/browser/UpEntry.vue
+++ b/web/satellite/src/components/browser/UpEntry.vue
@@ -21,5 +21,4 @@ import TableItem from '@/components/common/TableItem.vue';
const props = defineProps<{
onBack: () => void;
}>();
-
diff --git a/web/satellite/src/components/browser/galleryView/ButtonIcon.vue b/web/satellite/src/components/browser/galleryView/ButtonIcon.vue
new file mode 100644
index 000000000..58dee69a3
--- /dev/null
+++ b/web/satellite/src/components/browser/galleryView/ButtonIcon.vue
@@ -0,0 +1,36 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+
+
diff --git a/web/satellite/src/components/browser/galleryView/GalleryView.vue b/web/satellite/src/components/browser/galleryView/GalleryView.vue
new file mode 100644
index 000000000..8d66642e9
--- /dev/null
+++ b/web/satellite/src/components/browser/galleryView/GalleryView.vue
@@ -0,0 +1,490 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ file.Key }}
+
No preview available
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/satellite/src/components/modals/AllModals.vue b/web/satellite/src/components/modals/AllModals.vue
index 04d855687..9a3263cc2 100644
--- a/web/satellite/src/components/modals/AllModals.vue
+++ b/web/satellite/src/components/modals/AllModals.vue
@@ -2,6 +2,7 @@
// See LICENSE for copying information.
+
@@ -12,6 +13,8 @@ import { computed, Component } from 'vue';
import { useAppStore } from '@/store/modules/appStore';
+import GalleryView from '@/components/browser/galleryView/GalleryView.vue';
+
const appStore = useAppStore();
/**
@@ -20,4 +23,11 @@ const appStore = useAppStore();
const activeModal = computed((): Component | null => {
return appStore.state.activeModal;
});
+
+/**
+ * Indicates gallery view is visible.
+ */
+const isGalleryView = computed((): boolean => {
+ return appStore.state.isGalleryView;
+});
diff --git a/web/satellite/src/components/objects/UploadFile.vue b/web/satellite/src/components/objects/UploadFile.vue
index 821a6f569..448f4625a 100644
--- a/web/satellite/src/components/objects/UploadFile.vue
+++ b/web/satellite/src/components/objects/UploadFile.vue
@@ -113,8 +113,7 @@ async function generateObjectPreviewAndMapUrl(path: string): Promise {
return `${linksharingURL.value}/s/${creds.accessKeyId}/${path}`;
} catch (error) {
- await notify.error(error.message, AnalyticsErrorEventSource.UPLOAD_FILE_VIEW);
-
+ notify.error(error.message, AnalyticsErrorEventSource.UPLOAD_FILE_VIEW);
return '';
}
}
diff --git a/web/satellite/src/store/modules/appStore.ts b/web/satellite/src/store/modules/appStore.ts
index e3d8af661..b8180cecb 100644
--- a/web/satellite/src/store/modules/appStore.ts
+++ b/web/satellite/src/store/modules/appStore.ts
@@ -27,6 +27,7 @@ class AppState {
public activeDropdown = 'none';
public activeModal: Component | null = null;
public isUploadingModal = false;
+ public isGalleryView = false;
// this field is mainly used on the all projects dashboard as an exit condition
// for when the dashboard opens the pricing plan and the pricing plan navigates back repeatedly.
public hasShownPricingPlan = false;
@@ -136,6 +137,10 @@ export const useAppStore = defineStore('app', () => {
state.isLargeUploadNotificationShown = value;
}
+ function setGalleryView(value: boolean): void {
+ state.isGalleryView = value;
+ }
+
function closeUpdateSessionTimeoutBanner(): void {
LocalData.setSessionTimeoutBannerAcknowledged();
@@ -171,6 +176,7 @@ export const useAppStore = defineStore('app', () => {
state.activeDropdown = '';
state.isUploadingModal = false;
state.error.visible = false;
+ state.isGalleryView = false;
}
return {
@@ -188,6 +194,7 @@ export const useAppStore = defineStore('app', () => {
setOnboardingOS,
setActiveChangeLimit,
setPricingPlan,
+ setGalleryView,
setManagePassphraseStep,
setHasShownPricingPlan,
setUploadingModal,
diff --git a/web/satellite/src/store/modules/objectBrowserStore.ts b/web/satellite/src/store/modules/objectBrowserStore.ts
index 35986e409..c373c060b 100644
--- a/web/satellite/src/store/modules/objectBrowserStore.ts
+++ b/web/satellite/src/store/modules/objectBrowserStore.ts
@@ -499,7 +499,12 @@ export const useObjectBrowserStore = defineStore('objectBrowser', () => {
const uploadedFiles = state.files.filter(f => f.type === 'file');
if (uploadedFiles.length === 1 && !path && state.openModalOnFirstUpload) {
state.objectPathForModal = params.Key;
- appStore.updateActiveModal(MODALS.objectDetails);
+
+ if (config.state.config.galleryViewEnabled) {
+ appStore.setGalleryView(true);
+ } else {
+ appStore.updateActiveModal(MODALS.objectDetails);
+ }
}
if (!config.state.config.newUploadModalEnabled) {
diff --git a/web/satellite/src/types/config.gen.ts b/web/satellite/src/types/config.gen.ts
index 49e15c736..2e9736ff5 100644
--- a/web/satellite/src/types/config.gen.ts
+++ b/web/satellite/src/types/config.gen.ts
@@ -44,6 +44,7 @@ export class FrontendConfig {
abTestingEnabled: boolean;
pricingPackagesEnabled: boolean;
newUploadModalEnabled: boolean;
+ galleryViewEnabled: boolean;
}
export class MultiCaptchaConfig {
diff --git a/web/satellite/static/images/browser/galleryView/arrow.svg b/web/satellite/static/images/browser/galleryView/arrow.svg
new file mode 100644
index 000000000..8f6d81f8f
--- /dev/null
+++ b/web/satellite/static/images/browser/galleryView/arrow.svg
@@ -0,0 +1,12 @@
+
diff --git a/web/satellite/static/images/browser/galleryView/close.svg b/web/satellite/static/images/browser/galleryView/close.svg
new file mode 100644
index 000000000..469b5c068
--- /dev/null
+++ b/web/satellite/static/images/browser/galleryView/close.svg
@@ -0,0 +1,3 @@
+
diff --git a/web/satellite/static/images/browser/galleryView/delete.svg b/web/satellite/static/images/browser/galleryView/delete.svg
new file mode 100644
index 000000000..fea760e60
--- /dev/null
+++ b/web/satellite/static/images/browser/galleryView/delete.svg
@@ -0,0 +1,3 @@
+
diff --git a/web/satellite/static/images/browser/galleryView/details.svg b/web/satellite/static/images/browser/galleryView/details.svg
new file mode 100644
index 000000000..0675054e8
--- /dev/null
+++ b/web/satellite/static/images/browser/galleryView/details.svg
@@ -0,0 +1,5 @@
+
diff --git a/web/satellite/static/images/browser/galleryView/dots.svg b/web/satellite/static/images/browser/galleryView/dots.svg
new file mode 100644
index 000000000..96df16ed6
--- /dev/null
+++ b/web/satellite/static/images/browser/galleryView/dots.svg
@@ -0,0 +1,3 @@
+
diff --git a/web/satellite/static/images/browser/galleryView/download.svg b/web/satellite/static/images/browser/galleryView/download.svg
new file mode 100644
index 000000000..221800cc8
--- /dev/null
+++ b/web/satellite/static/images/browser/galleryView/download.svg
@@ -0,0 +1,3 @@
+
diff --git a/web/satellite/static/images/browser/galleryView/downloadSmall.svg b/web/satellite/static/images/browser/galleryView/downloadSmall.svg
new file mode 100644
index 000000000..9c81bba79
--- /dev/null
+++ b/web/satellite/static/images/browser/galleryView/downloadSmall.svg
@@ -0,0 +1,3 @@
+
diff --git a/web/satellite/static/images/browser/galleryView/empty.svg b/web/satellite/static/images/browser/galleryView/empty.svg
new file mode 100644
index 000000000..4a42bad63
--- /dev/null
+++ b/web/satellite/static/images/browser/galleryView/empty.svg
@@ -0,0 +1,4 @@
+
diff --git a/web/satellite/static/images/browser/galleryView/image.svg b/web/satellite/static/images/browser/galleryView/image.svg
new file mode 100644
index 000000000..efe8b994e
--- /dev/null
+++ b/web/satellite/static/images/browser/galleryView/image.svg
@@ -0,0 +1,4 @@
+
diff --git a/web/satellite/static/images/browser/galleryView/map.svg b/web/satellite/static/images/browser/galleryView/map.svg
new file mode 100644
index 000000000..fed067cd5
--- /dev/null
+++ b/web/satellite/static/images/browser/galleryView/map.svg
@@ -0,0 +1,3 @@
+
diff --git a/web/satellite/static/images/browser/galleryView/share.svg b/web/satellite/static/images/browser/galleryView/share.svg
new file mode 100644
index 000000000..712bcf363
--- /dev/null
+++ b/web/satellite/static/images/browser/galleryView/share.svg
@@ -0,0 +1,3 @@
+
diff --git a/web/satellite/static/images/browser/galleryView/shareSmall.svg b/web/satellite/static/images/browser/galleryView/shareSmall.svg
new file mode 100644
index 000000000..6f2b1118f
--- /dev/null
+++ b/web/satellite/static/images/browser/galleryView/shareSmall.svg
@@ -0,0 +1,3 @@
+
diff --git a/web/satellite/static/images/browser/galleryView/video.svg b/web/satellite/static/images/browser/galleryView/video.svg
new file mode 100644
index 000000000..73a5038b4
--- /dev/null
+++ b/web/satellite/static/images/browser/galleryView/video.svg
@@ -0,0 +1,4 @@
+
diff --git a/web/satellite/vite.config.js b/web/satellite/vite.config.js
index eb33ae9a5..f71b004e1 100644
--- a/web/satellite/vite.config.js
+++ b/web/satellite/vite.config.js
@@ -14,12 +14,6 @@ const productionBrotliExtensions = ['js', 'css', 'ttf', 'woff', 'woff2'];
const plugins = [
vue(),
- viteCompression({
- algorithm: 'brotliCompress',
- threshold: 1024,
- ext: '.br',
- filter: new RegExp('\\.(' + productionBrotliExtensions.join('|') + ')$'),
- }),
svgLoader({
svgoConfig: {
plugins: [{ name: 'removeViewBox', fn: () => {} }],
@@ -28,6 +22,15 @@ const plugins = [
vitePluginRequire(),
];
+if (process.env.NODE_ENV === 'production') {
+ plugins.push(viteCompression({
+ algorithm: 'brotliCompress',
+ threshold: 1024,
+ ext: '.br',
+ filter: new RegExp('\\.(' + productionBrotliExtensions.join('|') + ')$'),
+ }));
+}
+
if (process.env['STORJ_DEBUG_BUNDLE_SIZE']) {
plugins.push(visualizer({
template: 'treemap', // or sunburst
@@ -57,6 +60,7 @@ export default defineConfig(({ mode }) => {
experimentalMinChunkSize: 50*1024,
},
},
+ chunkSizeWarningLimit: 3000,
},
define: {
'process.env': {},