JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: initial implementation of gallery view

Browse Source 
Added new gallery view for object browser.
It is behind new feature flag.

TODO: add options dropdown and modals

Issue:
https://github.com/storj/storj/issues/5824

Change-Id: I21829c599cd904b833eaf429690c66c3da306a0f
This commit is contained in:
Vitalii 2023-06-01 16:20:35 +03:00
parent b64179c82a
commit 89457b3472
27 changed files with 630 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
satellite/console/consoleweb/config.go
View File

@ -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.

2
satellite/console/consoleweb/server.go
View File

@ -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)

3
scripts/testdata/satellite-config.yaml.lock vendored
View File

@ -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

2
web/satellite/package.json
View File

@ -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",

8
web/satellite/src/components/browser/FileEntry.vue
View File

@ -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);
if (config.state.config.galleryViewEnabled) {
appStore.setGalleryView(true);
} else {
appStore.updateActiveModal(MODALS.objectDetails);
}
obStore.closeDropdown();
}

1
web/satellite/src/components/browser/UpEntry.vue
View File

@ -21,5 +21,4 @@ import TableItem from '@/components/common/TableItem.vue';
const props = defineProps<{
onBack: () => void;
}>();
</script>

36
web/satellite/src/components/browser/galleryView/ButtonIcon.vue Normal file
View File

@ -0,0 +1,36 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="button-icon" :class="{ active: isActive }" @click="onPress">
<component :is="icon" />
</div>
</template>
<script setup lang="ts">
import { Component } from 'vue';
const props = withDefaults(defineProps<{
isActive?: boolean
icon: string
onPress: () => void
}>(), {
isActive: false,
});
</script>
<style scoped lang="scss">
.button-icon {
width: 48px;
height: 48px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.active {
background: rgb(255 255 255 / 10%);
}
</style>

490
web/satellite/src/components/browser/galleryView/GalleryView.vue Normal file
View File

@ -0,0 +1,490 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<Teleport to="#app">
<div class="gallery">
<div class="gallery__header">
<LogoIcon class="gallery__header__logo" />
<SmallLogoIcon class="gallery__header__small-logo" />
<div class="gallery__header__name">
<ImageIcon v-if="previewIsImage" />
<VideoIcon v-else-if="previewIsAudio || previewIsVideo" />
<EmptyIcon v-else />
<p class="gallery__header__name__label" :title="file.Key">{{ file.Key }}</p>
</div>
<div class="gallery__header__functional">
<ButtonIcon :icon="DotsIcon" :on-press="() => {}" />
<ButtonIcon :icon="MapIcon" :on-press="() => {}" />
<ButtonIcon class="gallery__header__functional__item" :icon="DownloadIcon" :on-press="download" />
<ButtonIcon class="gallery__header__functional__item" :icon="ShareIcon" :on-press="() => {}" />
<ButtonIcon :icon="CloseIcon" :on-press="closeModal" />
</div>
</div>
<div class="gallery__main">
<ArrowIcon class="gallery__main__left-arrow" @click="onPrevious" />
<VLoader v-if="isLoading" class="gallery__main__loader" width="100px" height="100px" is-white />
<div v-else class="gallery__main__preview">
<img
v-if="previewIsImage && !isLoading"
:src="objectPreviewUrl"
class="gallery__main__preview__item"
aria-roledescription="image-preview"
alt="preview"
>
<video
v-if="previewIsVideo && !isLoading"
controls
:src="objectPreviewUrl"
class="gallery__main__preview__item"
aria-roledescription="video-preview"
/>
<audio
v-if="previewIsAudio && !isLoading"
controls
:src="objectPreviewUrl"
class="gallery__main__preview__item"
aria-roledescription="audio-preview"
/>
<div v-if="placeHolderDisplayable || previewAndMapFailed" class="gallery__main__preview__empty">
<p class="gallery__main__preview__empty__key">{{ file.Key }}</p>
<p class="gallery__main__preview__empty__label">No preview available</p>
<VButton
icon="download"
:label="`Download (${prettyBytes(file.Size)})`"
:on-press="download"
width="188px"
height="52px"
border-radius="10px"
font-size="14px"
/>
</div>
<div class="gallery__main__preview__buttons">
<ArrowIcon class="gallery__main__preview__buttons__left-arrow" @click="onPrevious" />
<ArrowIcon @click="onNext" />
</div>
</div>
<ArrowIcon class="gallery__main__right-arrow" @click="onNext" />
</div>
</div>
</Teleport>
</template>
<script setup lang="ts">
import { computed, onBeforeMount, ref, Teleport, watch } from 'vue';
import { useRoute } from 'vue-router';
import prettyBytes from 'pretty-bytes';
import { BrowserObject, useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useAppStore } from '@/store/modules/appStore';
import { useNotify } from '@/utils/hooks';
import { RouteConfig } from '@/router';
import ButtonIcon from '@/components/browser/galleryView/ButtonIcon.vue';
import VLoader from '@/components/common/VLoader.vue';
import VButton from '@/components/common/VButton.vue';
import LogoIcon from '@/../static/images/logo.svg';
import SmallLogoIcon from '@/../static/images/smallLogo.svg';
import ImageIcon from '@/../static/images/browser/galleryView/image.svg';
import VideoIcon from '@/../static/images/browser/galleryView/video.svg';
import EmptyIcon from '@/../static/images/browser/galleryView/empty.svg';
import DotsIcon from '@/../static/images/browser/galleryView/dots.svg';
import MapIcon from '@/../static/images/browser/galleryView/map.svg';
import DownloadIcon from '@/../static/images/browser/galleryView/download.svg';
import ShareIcon from '@/../static/images/browser/galleryView/share.svg';
import CloseIcon from '@/../static/images/browser/galleryView/close.svg';
import ArrowIcon from '@/../static/images/browser/galleryView/arrow.svg';
const appStore = useAppStore();
const obStore = useObjectBrowserStore();
const notify = useNotify();
const route = useRoute();
const isLoading = ref<boolean>(false);
const previewAndMapFailed = ref<boolean>(false);
const objectMapUrl = ref<string>('');
const objectPreviewUrl = ref<string>('');
const folderType = 'folder';
/**
* Retrieve the file object that the modal is set to from the store.
*/
const file = computed((): BrowserObject => {
return obStore.sortedFiles[fileIndex.value];
});
/**
* Retrieve the file index that the modal is set to from the store.
*/
const fileIndex = computed((): number => {
return obStore.sortedFiles.findIndex(f => f.Key === filePath.value.split('/').pop());
});
/**
* Format the file size to be displayed.
*/
const size = computed((): string => {
return prettyBytes(obStore.sortedFiles.find(f => f.Key === file.value.Key)?.Size || 0);
});
/**
* Retrieve the filepath of the modal from the store.
*/
const filePath = computed((): string => {
return obStore.state.objectPathForModal;
});
/**
* Get the extension of the current file.
*/
const extension = computed((): string | undefined => {
return filePath.value.split('.').pop();
});
/**
* Check to see if the current file is an image file.
*/
const previewIsImage = computed((): boolean => {
if (!extension.value) {
return false;
}
return ['bmp', 'svg', 'jpg', 'jpeg', 'png', 'ico', 'gif'].includes(
extension.value.toLowerCase(),
);
});
/**
* Check to see if the current file is a video file.
*/
const previewIsVideo = computed((): boolean => {
if (!extension.value) {
return false;
}
return ['m4v', 'mp4', 'webm', 'mov', 'mkv'].includes(
extension.value.toLowerCase(),
);
});
/**
* Check to see if the current file is an audio file.
*/
const previewIsAudio = computed((): boolean => {
if (!extension.value) {
return false;
}
return ['mp3', 'wav', 'ogg'].includes(extension.value.toLowerCase());
});
/**
* Check to see if the current file is neither an image file, video file, or audio file.
*/
const placeHolderDisplayable = computed((): boolean => {
return [
previewIsImage.value,
previewIsVideo.value,
previewIsAudio.value,
].every((value) => !value);
});
/**
* Get the object map url for the file being displayed.
*/
async function fetchPreviewAndMapUrl(): Promise<void> {
isLoading.value = true;
const url: string = await obStore.state.fetchPreviewAndMapUrl(filePath.value);
if (!url) {
previewAndMapFailed.value = true;
isLoading.value = false;
return;
}
objectMapUrl.value = `${url}?map=1`;
objectPreviewUrl.value = `${url}?view=1`;
isLoading.value = false;
}
/**
* Download the current opened file.
*/
function download(): void {
try {
obStore.download(file.value);
notify.warning('Do not share download link with other people. If you want to share this data better use "Share" option.');
} catch (error) {
notify.error('Can not download your file', AnalyticsErrorEventSource.OBJECT_DETAILS_MODAL);
}
}
/**
* Close the current opened file details modal.
*/
function closeModal(): void {
appStore.setGalleryView(false);
}
/**
* Handles on previous click logic.
*/
function onPrevious(): void {
const currentIndex = fileIndex.value;
const sortedFilesLength = obStore.sortedFiles.length;
let newFile: BrowserObject;
if (currentIndex <= 0) {
newFile = obStore.sortedFiles[sortedFilesLength - 1];
} else {
newFile = obStore.sortedFiles[currentIndex - 1];
if (newFile.type === folderType) {
newFile = obStore.sortedFiles[sortedFilesLength - 1];
}
}
setNewObjectPath(newFile.Key);
}
/**
* Handles on next click logic.
*/
function onNext(): void {
let newFile: BrowserObject | undefined = obStore.sortedFiles[fileIndex.value + 1];
if (!newFile || newFile.type === folderType) {
newFile = obStore.sortedFiles.find(f => f.type !== folderType);
if (!newFile) return;
}
setNewObjectPath(newFile.Key);
}
/**
* Sets new object path.
*/
function setNewObjectPath(objectKey: string): void {
obStore.setObjectPathForModal(
`${route.path.replace(RouteConfig.Buckets.with(RouteConfig.UploadFile).path, '')}${objectKey}`,
);
}
/**
* Call `fetchPreviewAndMapUrl` on before mount lifecycle method.
*/
onBeforeMount((): void => {
fetchPreviewAndMapUrl();
});
/**
* Watch for changes on the filepath and call `fetchObjectMapUrl` the moment it updates.
*/
watch(filePath, () => {
fetchPreviewAndMapUrl();
});
</script>
<style scoped lang="scss">
.gallery {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--c-black);
font-family: 'font_regular', sans-serif;
&__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30px 24px 0;
max-width: 100%;
&__logo {
min-width: 207px;
@media screen and (width <= 1100px) {
display: none;
}
}
&__small-logo {
min-width: 40px;
display: none;
@media screen and (width <= 1100px) and (width > 500px) {
display: block;
}
}
svg {
:deep(path) {
fill: var(--c-white);
}
}
&__name,
&__functional {
display: flex;
align-items: center;
}
&__name {
max-width: 50%;
@media screen and (width <= 370px) {
max-width: 45%;
}
svg {
min-width: 32px;
@media screen and (width <= 600px) {
display: none;
}
}
&__label {
font-size: 16px;
line-height: 24px;
color: var(--c-white);
margin-left: 8px;
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
&__functional {
column-gap: 16px;
@media screen and (width <= 1100px) {
column-gap: 8px;
&__item {
display: none;
}
}
}
}
&__main {
display: flex;
justify-content: space-between;
padding: 48px 32px 0;
width: 100%;
box-sizing: border-box;
height: calc(100vh - 120px);
@media screen and (width <= 1100px) {
padding: 24px 12px 0;
}
@media screen and (width <= 600px) {
padding: 24px 0 0;
height: calc(100vh - 140px);
}
&__loader {
align-self: center;
@media screen and (width <= 600px) {
align-self: flex-start;
}
}
&__left-arrow,
&__right-arrow {
align-self: center;
cursor: pointer;
min-width: 46px;
@media screen and (width <= 600px) {
display: none;
}
}
&__left-arrow {
transform: rotate(180deg);
}
&__preview {
box-sizing: border-box;
width: 100%;
padding: 0 42px;
display: flex;
@media screen and (width <= 1100px) {
padding: 0 12px;
}
@media screen and (width <= 600px) {
flex-direction: column;
}
&__item {
margin: 0 auto;
max-height: 100%;
max-width: 100%;
align-self: center;
@media screen and (width <= 600px) {
align-self: flex-start;
}
}
&__empty {
width: 100%;
align-self: center;
display: flex;
align-items: center;
flex-direction: column;
&__key {
font-size: 16px;
line-height: 24px;
color: var(--c-white);
margin-bottom: 14px;
}
&__label {
font-family: 'font_bold', sans-serif;
font-size: 28px;
line-height: 36px;
letter-spacing: -0.02em;
color: var(--c-white);
margin-bottom: 17px;
}
}
&__buttons {
display: none;
svg {
width: 30px;
height: 30px;
}
@media screen and (width <= 600px) {
display: flex;
align-items: center;
justify-content: center;
column-gap: 16px;
margin-top: 20px;
&__left-arrow {
transform: rotate(180deg);
}
}
}
}
}
}
</style>

10
web/satellite/src/components/modals/AllModals.vue
View File

@ -2,6 +2,7 @@
// See LICENSE for copying information.
<template>
<GalleryView v-if="isGalleryView" />
<div v-if="activeModal">
<component :is="activeModal" />
</div>
@ -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;
});
</script>

3
web/satellite/src/components/objects/UploadFile.vue
View File

@ -113,8 +113,7 @@ async function generateObjectPreviewAndMapUrl(path: string): Promise<string> {
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 '';
}
}

7
web/satellite/src/store/modules/appStore.ts
View File

@ -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,

5
web/satellite/src/store/modules/objectBrowserStore.ts
View File

@ -499,8 +499,13 @@ 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;
if (config.state.config.galleryViewEnabled) {
appStore.setGalleryView(true);
} else {
appStore.updateActiveModal(MODALS.objectDetails);
}
}
if (!config.state.config.newUploadModalEnabled) {
state.uploading = state.uploading.filter((file) => file.Key !== params.Key);

1
web/satellite/src/types/config.gen.ts
View File

@ -44,6 +44,7 @@ export class FrontendConfig {
abTestingEnabled: boolean;
pricingPackagesEnabled: boolean;
newUploadModalEnabled: boolean;
galleryViewEnabled: boolean;
}
export class MultiCaptchaConfig {

12
web/satellite/static/images/browser/galleryView/arrow.svg Normal file
View File

@ -0,0 +1,12 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="-0.5" y="0.5" width="47" height="47" rx="23.5" transform="matrix(-1 0 0 1 47 0)" fill="black"/>
<g clip-path="url(#clip0_21107_225078)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M29.6926 23.2314C29.7231 22.6791 29.4714 22.044 28.9682 21.5408L23.1543 15.7269C22.3515 14.9241 21.2127 14.7614 20.6106 15.3635C20.0086 15.9655 20.1713 17.1044 20.974 17.9071L26.2884 23.2215L20.9731 28.5368C20.1703 29.3395 20.0076 30.4784 20.6097 31.0804C21.2118 31.6825 22.3506 31.5198 23.1533 30.717L28.9673 24.903C29.4647 24.4057 29.7164 23.7792 29.6926 23.2314Z" fill="white"/>
</g>
<rect x="-0.5" y="0.5" width="47" height="47" rx="23.5" transform="matrix(-1 0 0 1 47 0)" stroke="#56606D"/>
<defs>
<clipPath id="clip0_21107_225078">
<rect width="17.0002" height="10" fill="white" transform="matrix(4.37114e-08 1 1 -4.37114e-08 20 15)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1020 B

3
web/satellite/static/images/browser/galleryView/close.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.4572 1.54298C22.9142 2.00002 22.9142 2.74103 22.4572 3.19808L13.6549 12L22.3819 20.7271C22.839 21.1841 22.839 21.9251 22.3819 22.3822C21.9249 22.8392 21.1839 22.8392 20.7268 22.3822L11.9998 13.6551L3.19783 22.4574C2.74079 22.9145 1.99978 22.9145 1.54273 22.4574C1.08569 22.0004 1.08569 21.2594 1.54273 20.8023L10.3449 11.9999L1.61797 3.27331C1.16092 2.81627 1.16092 2.07525 1.61797 1.61821C2.07501 1.16117 2.81602 1.16117 3.27306 1.61821L11.9999 10.3448L20.8021 1.54298C21.2591 1.08593 22.0001 1.08593 22.4572 1.54298Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 695 B

3
web/satellite/static/images/browser/galleryView/delete.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.3983 4.34764C16.7858 4.34764 17.0999 4.66175 17.0999 5.04922C17.0999 5.42724 16.8009 5.73543 16.4265 5.75024L16.3983 5.75079H14.9509L13.8664 14.6073C13.7098 15.8868 12.6232 16.8484 11.3342 16.8484H6.77044C5.49114 16.8484 4.40965 15.9009 4.24142 14.6327L3.06318 5.75079H1.60148C1.21401 5.75079 0.899902 5.43669 0.899902 5.04922C0.899902 4.6712 1.19887 4.36301 1.57326 4.3482L1.60148 4.34764H16.3983ZM13.5373 5.75079H4.4787L5.63238 14.4482C5.7066 15.0077 6.17583 15.4285 6.73668 15.4448L6.77044 15.4453H11.3342C11.9029 15.4453 12.384 15.0294 12.4691 14.4705L12.4737 14.4368L13.5373 5.75079ZM7.94254 8.23983L7.9471 8.26816L7.95046 8.29618L8.39703 12.7618C8.43558 13.1474 8.15429 13.4912 7.76874 13.5298C7.3926 13.5674 7.05619 13.3005 7.0042 12.9295L7.00084 12.9015L6.55427 8.4358C6.51572 8.05025 6.79701 7.70645 7.18256 7.6679C7.54906 7.63125 7.87783 7.88362 7.94254 8.23983ZM11.0723 7.66817C11.4485 7.70578 11.7254 8.03394 11.7029 8.40794L11.7006 8.43607L11.2544 12.8984C11.2158 13.2839 10.872 13.5652 10.4865 13.5267C10.1103 13.4891 9.83343 13.1609 9.85595 12.7869L9.8582 12.7588L10.3044 8.29645C10.343 7.91091 10.6868 7.62962 11.0723 7.66817ZM11.296 1.35001C11.6834 1.35001 11.9975 1.66411 11.9975 2.05158C11.9975 2.4296 11.6986 2.73779 11.3242 2.7526L11.296 2.75316H6.70384C6.31637 2.75316 6.00226 2.43905 6.00226 2.05158C6.00226 1.67356 6.30123 1.36537 6.67562 1.35056L6.70384 1.35001H11.296Z" fill="#56606D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

5
web/satellite/static/images/browser/galleryView/details.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.9572 14.786C12.5963 14.786 13.1144 14.2679 13.1144 13.6288C13.1144 12.9898 12.5963 12.4717 11.9572 12.4717C11.3181 12.4717 10.8 12.9898 10.8 13.6288C10.8 14.2679 11.3181 14.786 11.9572 14.786Z" fill="#56606D"/>
<path d="M16.4566 13.3271C16.0991 12.4163 15.4822 11.6305 14.6823 11.067C13.8825 10.5035 12.9349 10.1872 11.957 10.1571C10.979 10.1872 10.0314 10.5035 9.2316 11.067C8.43177 11.6305 7.81488 12.4163 7.45739 13.3271L7.32837 13.6285L7.45739 13.93C7.81488 14.8407 8.43177 15.6265 9.2316 16.19C10.0314 16.7535 10.979 17.0699 11.957 17.1C12.9349 17.0699 13.8825 16.7535 14.6823 16.19C15.4822 15.6265 16.0991 14.8407 16.4566 13.93L16.5856 13.6285L16.4566 13.3271ZM11.957 15.9428C11.4992 15.9428 11.0518 15.8071 10.6712 15.5528C10.2906 15.2985 9.994 14.9371 9.81884 14.5142C9.64367 14.0913 9.59784 13.626 9.68714 13.177C9.77644 12.7281 9.99685 12.3157 10.3205 11.9921C10.6442 11.6684 11.0565 11.448 11.5055 11.3587C11.9544 11.2694 12.4197 11.3152 12.8426 11.4904C13.2655 11.6656 13.6269 11.9622 13.8812 12.3428C14.1355 12.7234 14.2713 13.1708 14.2713 13.6285C14.2705 14.2421 14.0264 14.8303 13.5926 15.2641C13.1587 15.698 12.5705 15.9421 11.957 15.9428Z" fill="#56606D"/>
<path d="M6.1714 15.9431H3.8571V2.05734H8.4857V5.52879C8.48662 5.83541 8.60883 6.1292 8.82564 6.34601C9.04245 6.56282 9.33624 6.68503 9.64285 6.68594H13.1143V9.00025H14.2715V5.52879C14.2735 5.45275 14.259 5.37718 14.2291 5.30726C14.1991 5.23735 14.1544 5.17475 14.0979 5.12379L10.0479 1.07376C9.99692 1.01726 9.93433 0.972484 9.86441 0.942518C9.79449 0.912551 9.7189 0.89811 9.64285 0.900191H3.8571C3.55049 0.901106 3.25669 1.02331 3.03988 1.24012C2.82307 1.45693 2.70087 1.75073 2.69995 2.05734V15.9431C2.70087 16.2498 2.82307 16.5436 3.03988 16.7604C3.25669 16.9772 3.55049 17.0994 3.8571 17.1003H6.1714V15.9431ZM9.64285 2.28877L12.8829 5.52879H9.64285V2.28877Z" fill="#56606D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

3
web/satellite/static/images/browser/galleryView/dots.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.0007 16C12.5312 16 13.0399 16.2107 13.4149 16.5858C13.79 16.9609 14.0007 17.4696 14.0007 18C14.0007 18.5304 13.79 19.0391 13.4149 19.4142C13.0399 19.7893 12.5312 20 12.0007 20C11.4703 20 10.9616 19.7893 10.5865 19.4142C10.2114 19.0391 10.0007 18.5304 10.0007 18C10.0007 17.4696 10.2114 16.9609 10.5865 16.5858C10.9616 16.2107 11.4703 16 12.0007 16ZM12.0007 10C12.5312 10 13.0399 10.2107 13.4149 10.5858C13.79 10.9609 14.0007 11.4696 14.0007 12C14.0007 12.5304 13.79 13.0391 13.4149 13.4142C13.0399 13.7893 12.5312 14 12.0007 14C11.4703 14 10.9616 13.7893 10.5865 13.4142C10.2114 13.0391 10.0007 12.5304 10.0007 12C10.0007 11.4696 10.2114 10.9609 10.5865 10.5858C10.9616 10.2107 11.4703 10 12.0007 10ZM12.0007 4C12.5312 4 13.0399 4.21071 13.4149 4.58579C13.79 4.96086 14.0007 5.46957 14.0007 6C14.0007 6.53043 13.79 7.03914 13.4149 7.41421C13.0399 7.78929 12.5312 8 12.0007 8C11.4703 8 10.9616 7.78929 10.5865 7.41421C10.2114 7.03914 10.0007 6.53043 10.0007 6C10.0007 5.46957 10.2114 4.96086 10.5865 4.58579C10.9616 4.21071 11.4703 4 12.0007 4Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

3
web/satellite/static/images/browser/galleryView/download.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.6275 16.4385L11.5989 16.4109L6.51469 11.3268C6.1286 10.9407 6.1286 10.3147 6.51469 9.92861C6.89136 9.55194 7.49635 9.54276 7.88416 9.90105L7.91283 9.92861L11.3423 13.3582V2.18835C11.3423 1.64234 11.785 1.19971 12.331 1.19971C12.8637 1.19971 13.298 1.62101 13.3188 2.14858L13.3196 2.18835V13.2924L16.683 9.92861C17.0597 9.55194 17.6647 9.54276 18.0525 9.90105L18.0812 9.92861C18.4579 10.3053 18.467 10.9103 18.1087 11.2981L18.0812 11.3268L12.997 16.4109C12.6203 16.7876 12.0153 16.7968 11.6275 16.4385ZM23.3012 20.8529C23.3012 21.399 22.8585 21.8416 22.3125 21.8416H2.71949C2.17348 21.8416 1.73085 21.399 1.73085 20.8529C1.73085 20.3069 2.17348 19.8643 2.71949 19.8643H22.3125C22.8585 19.8643 23.3012 20.3069 23.3012 20.8529ZM2.68981 21.7665C2.1438 21.7665 1.70117 21.3239 1.70117 20.7779V16.8233C1.70117 16.2773 2.1438 15.8347 2.68981 15.8347C3.23582 15.8347 3.67845 16.2773 3.67845 16.8233V20.7779C3.67845 21.3239 3.23582 21.7665 2.68981 21.7665ZM22.2829 21.7665C21.7368 21.7665 21.2942 21.3239 21.2942 20.7779V16.8233C21.2942 16.2773 21.7368 15.8347 22.2829 15.8347C22.8289 15.8347 23.2715 16.2773 23.2715 16.8233V20.7779C23.2715 21.3239 22.8289 21.7665 22.2829 21.7665Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

3
web/satellite/static/images/browser/galleryView/downloadSmall.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.34467 12.3291L8.32317 12.3084L4.51004 8.49529C4.22047 8.20572 4.22047 7.73624 4.51004 7.44668C4.79254 7.16417 5.24629 7.15728 5.53715 7.426L5.55865 7.44668L8.13077 10.0188V1.64147C8.13077 1.23197 8.46274 0.899994 8.87225 0.899994C9.27177 0.899994 9.59749 1.21597 9.61314 1.61165L9.61373 1.64147V9.96951L12.1363 7.44668C12.4188 7.16417 12.8725 7.15728 13.1634 7.426L13.1849 7.44668C13.4674 7.72918 13.4743 8.18293 13.2056 8.47378L13.1849 8.49529L9.37178 12.3084C9.08928 12.5909 8.63553 12.5978 8.34467 12.3291ZM17.0999 15.6399C17.0999 16.0494 16.7679 16.3814 16.3584 16.3814H1.66364C1.25413 16.3814 0.922161 16.0494 0.922161 15.6399C0.922161 15.2304 1.25413 14.8984 1.66364 14.8984H16.3584C16.7679 14.8984 17.0999 15.2304 17.0999 15.6399ZM1.64138 16.3251C1.23187 16.3251 0.899902 15.9932 0.899902 15.5836V12.6177C0.899902 12.2082 1.23187 11.8762 1.64138 11.8762C2.05089 11.8762 2.38286 12.2082 2.38286 12.6177V15.5836C2.38286 15.9932 2.05089 16.3251 1.64138 16.3251ZM16.3362 16.3251C15.9267 16.3251 15.5947 15.9932 15.5947 15.5836V12.6177C15.5947 12.2082 15.9267 11.8762 16.3362 11.8762C16.7457 11.8762 17.0776 12.2082 17.0776 12.6177V15.5836C17.0776 15.9932 16.7457 16.3251 16.3362 16.3251Z" fill="#56606D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

4
web/satellite/static/images/browser/galleryView/empty.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke="#56606D"/>
<path d="M16.9452 7C17.4186 7 17.8726 7.18807 18.2074 7.52283L22.9068 12.2221C23.2416 12.5569 23.4297 13.0109 23.4297 13.4844V22.1736C23.4297 23.7346 22.1642 25 20.6032 25H11.8264C10.2654 25 9 23.7346 9 22.1736V9.82655C9 8.26555 10.2654 7 11.8264 7H16.9452ZM16.2147 8.63635H11.8264C11.1816 8.63635 10.6565 9.14932 10.6369 9.78948L10.6364 9.82655V22.1736C10.6364 22.8184 11.1493 23.3435 11.7894 23.3631L11.8264 23.3636H20.6032C21.2481 23.3636 21.7732 22.8507 21.7927 22.2106L21.7933 22.1736V14.2148L17.033 14.2149C16.5922 14.2149 16.2327 13.8663 16.2155 13.4297L16.2148 13.3968L16.2147 8.63635ZM20.9491 12.5785L17.851 9.48056L17.8512 12.5786L20.9491 12.5785Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 858 B

4
web/satellite/static/images/browser/galleryView/image.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke="#56606D"/>
<path d="M17.7533 7L18.0235 7.00105C20.34 7.01951 21.2206 7.28039 22.1081 7.75504C23.0293 8.24771 23.7523 8.97068 24.245 9.89189L24.2806 9.95931C24.7443 10.8472 24.9936 11.7648 25 14.1541V17.7533C25 20.0455 24.7829 21.0087 24.3728 21.8574C24.3441 21.9599 24.2948 22.0579 24.2251 22.145L24.245 22.1081C23.7523 23.0293 23.0293 23.7523 22.1081 24.245L22.0407 24.2806C21.1526 24.7444 20.2349 24.9937 17.8448 25H14.2467C11.7269 25 10.8131 24.7376 9.89189 24.245C8.97068 23.7523 8.24771 23.0293 7.75504 22.1081L7.7194 22.0407C7.2556 21.1526 7.00628 20.2349 7 17.8448V14.2467C7 11.7269 7.26237 10.8131 7.75504 9.89189C8.24771 8.97068 8.97068 8.24771 9.89189 7.75504L9.95931 7.7194C10.8472 7.25567 11.7648 7.00636 14.1541 7H17.7533ZM10.8382 15.3679L8.63621 16.8954L8.63636 17.8406L8.63807 18.1028C8.65498 19.8298 8.798 20.5566 9.14866 21.2423L9.16607 21.276L9.198 21.3364C9.53816 21.9724 10.0276 22.4618 10.6636 22.802L10.7322 22.838C11.4523 23.2086 12.1867 23.3506 13.9827 23.3628L14.2466 23.3636H17.8406L18.1028 23.3619C18.1338 23.3616 18.1646 23.3613 18.195 23.3609L10.8382 15.3679ZM19.1338 18.3973L17.2838 19.9546L20.2649 23.1937C20.6482 23.1133 20.949 23.0013 21.2423 22.8513L21.276 22.8339L21.3364 22.802C21.8252 22.5406 22.2274 22.191 22.5418 21.7545L19.1338 18.3973ZM17.8429 8.63636H14.2467C12.2971 8.63636 11.5103 8.7717 10.7904 9.13215L10.724 9.16607L10.6636 9.198C10.0276 9.53816 9.53816 10.0276 9.198 10.6636L9.16201 10.7322C8.79141 11.4523 8.64937 12.1867 8.63723 13.9827L8.63636 14.2466L8.63621 14.9038L10.4912 13.617C10.8167 13.3912 11.2554 13.4318 11.534 13.7085L11.5596 13.7352L12.7035 14.9781C13.2093 12.7526 15.1918 11.0909 17.562 11.0909C20.3153 11.0909 22.5455 13.3332 22.5455 16.097C22.5455 17.0388 22.2854 17.9441 21.8021 18.7285L23.2207 20.1265C23.3138 19.6162 23.3564 18.9644 23.3628 18.0172L23.3636 17.7533V14.2467C23.3636 12.2971 23.2283 11.5103 22.8678 10.7904L22.8339 10.724L22.802 10.6636C22.4618 10.0276 21.9724 9.53816 21.3364 9.198L21.2678 9.16201C20.5248 8.77964 19.7667 8.64058 17.8429 8.63636ZM17.562 12.7273C15.7144 12.7273 14.2149 14.235 14.2149 16.097C14.2149 16.2921 14.2313 16.4846 14.2635 16.6734L16.1745 18.7494L18.6503 16.6653C18.9636 16.4015 19.4217 16.4111 19.7236 16.6822L19.7514 16.7084L20.5903 17.5347C20.7988 17.0907 20.9091 16.6027 20.9091 16.097C20.9091 14.235 19.4095 12.7273 17.562 12.7273Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

3
web/satellite/static/images/browser/galleryView/map.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5 1.2002C15.9833 1.2002 19.0814 2.84925 21.0563 5.40926C20.6658 5.24878 20.2382 5.1602 19.79 5.1602C19.2217 5.1602 18.6868 5.30251 18.2187 5.55344C18.2761 5.51368 18.3349 5.47577 18.395 5.43974C16.8329 4.03495 14.7663 3.1802 12.5 3.1802C10.5465 3.1802 8.74137 3.81525 7.27976 4.89018L9.34995 4.8902C11.3879 4.8902 13.04 6.54226 13.04 8.58019C13.04 10.5973 11.4214 12.2364 9.41221 12.2697L9.34995 12.2702H7.72995C7.23289 12.2702 6.82995 12.6731 6.82995 13.1702C6.82995 13.6542 7.21197 14.0489 7.69091 14.0694L7.72995 14.0702H8.04495C9.78967 14.0702 11.2078 15.4687 11.2394 17.2058L11.24 17.3102C11.24 18.6106 10.4739 19.732 9.36842 20.2479C10.3415 20.6178 11.3971 20.8202 12.5 20.8202C13.5225 20.8202 14.5044 20.6462 15.4177 20.3262C14.1228 19.7533 13.2193 18.4573 13.2193 16.9502C13.2193 14.9331 14.8378 13.294 16.847 13.2607L16.9093 13.2602H20.3293C20.8263 13.2602 21.2293 12.8573 21.2293 12.3602C21.2293 12.0662 21.0883 11.805 20.8702 11.6408C21.8908 11.2912 22.6876 10.4595 22.9891 9.41746C23.1922 10.245 23.2999 11.11 23.2999 12.0002C23.2999 17.9649 18.4646 22.8002 12.5 22.8002C6.53528 22.8002 1.69995 17.9649 1.69995 12.0002C1.69995 6.03552 6.53528 1.2002 12.5 1.2002ZM20.716 15.2144L20.6685 15.2204C20.5756 15.2313 20.4814 15.2378 20.386 15.2396L20.3293 15.2402H16.9093C15.9649 15.2402 15.1993 16.0058 15.1993 16.9502C15.1993 17.8783 15.9387 18.6337 16.8606 18.6595L16.9093 18.6602L18.2825 18.6603C19.3497 17.7329 20.1917 16.5534 20.716 15.2144ZM9.34995 6.87019L5.32447 6.8702C4.28927 8.31559 3.67995 10.0867 3.67995 12.0002C3.67995 14.6103 4.81368 16.9555 6.61555 18.5704L7.99995 18.5702C8.68133 18.5702 9.23639 18.0293 9.25922 17.3535L9.25995 17.3102V17.2652C9.25995 16.6084 8.73888 16.0734 8.08761 16.0509L8.04495 16.0502H7.72995C6.13937 16.0502 4.84995 14.7608 4.84995 13.1702C4.84995 11.5986 6.10885 10.3209 7.67327 10.2907L7.72995 10.2902H9.34995C10.2944 10.2902 11.06 9.5246 11.06 8.58019C11.06 7.65207 10.3205 6.89665 9.39864 6.87087L9.34995 6.87019ZM19.7279 6.51134C20.8214 6.51134 21.7079 7.39781 21.7079 8.49134C21.7079 9.58486 20.8214 10.4713 19.7279 10.4713C18.6344 10.4713 17.7479 9.58486 17.7479 8.49134C17.7479 7.39781 18.6344 6.51134 19.7279 6.51134Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

3
web/satellite/static/images/browser/galleryView/share.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.20117 14.1995L1.20192 13.8995C1.21761 11.4028 1.48327 10.1109 2.17965 8.79708C2.51549 8.16345 2.9345 7.59632 3.4308 7.10432C3.8117 6.72672 4.42659 6.72939 4.80419 7.11029C5.18179 7.49119 5.17912 8.10608 4.79822 8.48368C4.44227 8.83655 4.14045 9.24506 3.89577 9.70668C3.35305 10.7306 3.14982 11.7445 3.1436 14.0311L3.14345 14.1966L3.14471 14.4135C3.16287 16.4729 3.35598 17.4639 3.83047 18.4033L3.89577 18.5293C4.3707 19.4253 5.06134 20.1222 5.94808 20.6007L6.04599 20.6525C7.02552 21.1596 8.03348 21.3511 10.2219 21.3573L13.7123 21.3574L14.0314 21.3551C15.9637 21.3315 16.9252 21.1423 17.8232 20.6909L17.9193 20.6416L17.996 20.6007C18.8827 20.1222 19.5733 19.4253 20.0483 18.5293C20.591 17.5054 20.7942 16.4915 20.8004 14.2049L20.8006 14.0394L20.7993 13.8225C20.7812 11.7631 20.5881 10.7721 20.1136 9.83268L20.0483 9.70668C19.8381 9.31013 19.5857 8.95278 19.2932 8.63627C18.9291 8.24241 18.9533 7.62799 19.3471 7.26393C19.741 6.89987 20.3554 6.92403 20.7195 7.31789C21.0976 7.72702 21.426 8.18297 21.7036 8.68499L21.7668 8.80165L21.8122 8.8884C22.4509 10.1257 22.7101 11.3783 22.7401 13.6775L22.7429 14.0365L22.7421 14.3365C22.7264 16.8332 22.4608 18.1251 21.7644 19.4389C21.1272 20.6411 20.194 21.5975 19.0103 22.2595L18.9137 22.3125L18.8277 22.3583L18.7026 22.4227C17.4921 23.0324 16.2328 23.2761 13.9546 23.2982L13.7152 23.2997H10.3324L10.089 23.2989C7.61354 23.2828 6.33012 23.0139 5.02571 22.31C3.83296 21.6664 2.88514 20.7248 2.22974 19.5316L2.17724 19.4343L2.13187 19.3476C1.46062 18.0474 1.20855 16.7302 1.20117 14.1995ZM7.55025 5.75795L7.57732 5.72979L11.323 1.98415C11.693 1.61414 12.2873 1.60512 12.6682 1.95707L12.6964 1.98415L16.442 5.72979C16.8213 6.10904 16.8213 6.72394 16.442 7.10319C16.072 7.4732 15.4777 7.48222 15.0968 7.13027L15.0686 7.10319L12.9484 4.98288V15.955C12.9484 16.4914 12.5136 16.9262 11.9772 16.9262C11.454 16.9262 11.0273 16.5123 11.0068 15.9941L11.0061 15.955V5.0475L8.95072 7.10319C8.58072 7.4732 7.98643 7.48222 7.60548 7.13027L7.57732 7.10319C7.20732 6.73319 7.19829 6.1389 7.55025 5.75795Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

3
web/satellite/static/images/browser/galleryView/shareSmall.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.899902 10.2748L0.90046 10.0499C0.912227 8.17735 1.11148 7.2084 1.63376 6.22302C1.88564 5.7478 2.1999 5.32245 2.57213 4.95345C2.8578 4.67025 3.31897 4.67226 3.60217 4.95793C3.88537 5.24361 3.88336 5.70477 3.59769 5.98797C3.33072 6.25262 3.10436 6.55901 2.92085 6.90522C2.51381 7.67318 2.36139 8.43362 2.35673 10.1486L2.35661 10.2727L2.35756 10.4354C2.37118 11.9799 2.51601 12.7231 2.87188 13.4277L2.92085 13.5222C3.27705 14.1942 3.79503 14.7169 4.46009 15.0758L4.53351 15.1146C5.26816 15.4949 6.02413 15.6386 7.66549 15.6432L10.2833 15.6433L10.5226 15.6415C11.9718 15.6239 12.6929 15.482 13.3665 15.1434L13.4385 15.1064L13.496 15.0758C14.161 14.7169 14.679 14.1942 15.0352 13.5222C15.4423 12.7542 15.5947 11.9938 15.5993 10.2789L15.5995 10.1547L15.5985 9.99206C15.5849 8.44757 15.4401 7.70431 15.0842 6.99972L15.0352 6.90522C14.8776 6.60781 14.6883 6.3398 14.4689 6.10242C14.1959 5.80702 14.214 5.34621 14.5094 5.07316C14.8048 4.80012 15.2656 4.81823 15.5386 5.11363C15.8223 5.42048 16.0685 5.76244 16.2767 6.13895L16.3241 6.22645L16.3582 6.29151C16.8372 7.21947 17.0316 8.15897 17.0541 9.88337L17.0562 10.1526L17.0556 10.3776C17.0438 12.2501 16.8446 13.219 16.3223 14.2044C15.8444 15.1061 15.1445 15.8233 14.2567 16.3198L14.1843 16.3596L14.1198 16.3939L14.026 16.4422C13.1181 16.8995 12.1737 17.0823 10.465 17.0989L10.2854 17.1H7.7483L7.5658 17.0994C5.70918 17.0873 4.74662 16.8856 3.7683 16.3577C2.87375 15.875 2.16288 15.1688 1.67133 14.2739L1.63195 14.201L1.59792 14.1359C1.09449 13.1608 0.905433 12.1729 0.899902 10.2748ZM5.66171 3.94368L5.68201 3.92256L8.49125 1.11332C8.76875 0.835821 9.21447 0.829053 9.50018 1.09302L9.5213 1.11332L12.3305 3.92256C12.615 4.207 12.615 4.66817 12.3305 4.95261C12.053 5.23011 11.6073 5.23688 11.3216 4.97291L11.3005 4.95261L9.71029 3.36237V11.5915C9.71029 11.9937 9.3842 12.3198 8.98194 12.3198C8.58949 12.3198 8.26953 12.0094 8.25416 11.6208L8.25358 11.5915V3.41084L6.71207 4.95261C6.43456 5.23011 5.98885 5.23688 5.70314 4.97291L5.68201 4.95261C5.40451 4.6751 5.39774 4.22939 5.66171 3.94368Z" fill="#56606D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

4
web/satellite/static/images/browser/galleryView/video.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke="#56606D"/>
<path d="M17.7533 7L18.0235 7.00105C20.34 7.01951 21.2206 7.28039 22.1081 7.75504C23.0293 8.24771 23.7523 8.97068 24.245 9.89189L24.2806 9.95931C24.7443 10.8472 24.9936 11.7648 25 14.1541V17.7533C25 20.2731 24.7376 21.1869 24.245 22.1081C23.7523 23.0293 23.0293 23.7523 22.1081 24.245L22.0407 24.2806C21.1526 24.7444 20.2349 24.9937 17.8448 25H14.2467C11.7269 25 10.8131 24.7376 9.89189 24.245C8.97068 23.7523 8.24771 23.0293 7.75504 22.1081L7.7194 22.0407C7.2556 21.1526 7.00628 20.2349 7 17.8448V14.2467C7 11.7269 7.26237 10.8131 7.75504 9.89189C8.24771 8.97068 8.97068 8.24771 9.89189 7.75504L9.95931 7.7194C10.8472 7.25567 11.7648 7.00636 14.1541 7H17.7533ZM17.8429 8.63636H14.2467C12.2971 8.63636 11.5103 8.7717 10.7904 9.13215L10.724 9.16607L10.6636 9.198C10.0276 9.53816 9.53816 10.0276 9.198 10.6636L9.16201 10.7322C8.79141 11.4523 8.64937 12.1867 8.63723 13.9827L8.63636 14.2466V17.8406L8.63807 18.1028C8.65498 19.8298 8.798 20.5566 9.14866 21.2423L9.16607 21.276L9.198 21.3364C9.53816 21.9724 10.0276 22.4618 10.6636 22.802L10.7322 22.838C11.4523 23.2086 12.1867 23.3506 13.9827 23.3628L14.2466 23.3636H17.8406L18.1028 23.3619C19.8298 23.345 20.5566 23.202 21.2423 22.8513L21.276 22.8339L21.3364 22.802C21.9724 22.4618 22.4618 21.9724 22.802 21.3364L22.838 21.2678C23.2086 20.5477 23.3506 19.8133 23.3628 18.0172L23.3636 17.7533V14.2467C23.3636 12.2971 23.2283 11.5103 22.8678 10.7904L22.8339 10.724L22.802 10.6636C22.4618 10.0276 21.9724 9.53816 21.3364 9.198L21.2678 9.16201C20.5248 8.77964 19.7667 8.64058 17.8429 8.63636ZM13.0248 12.281C13.0248 11.6252 13.7577 11.2359 14.301 11.6031L19.8052 15.3221C20.2853 15.6465 20.2853 16.3535 19.8052 16.6779L14.301 20.3969C13.7577 20.7641 13.0248 20.3748 13.0248 19.719V12.281ZM14.6612 13.8213V18.1786L17.8855 16L14.6612 13.8213Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

16
web/satellite/vite.config.js
View File

@ -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': {},