github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-02-15 23:05:02 -05:00
Code Issues Packages Projects Releases Wiki Activity

Optimize media loading across app (#10592)

Browse Source 
* v-image and "lazy load" working

* fixed vars

* all the other img uses

* No longer require access token in url for files

* Add lazy loading and size limits

* Rename map-component source prop

* Fix lint warning

* Update app/src/views/public/public-view.vue

Co-authored-by: ian <licitdev@gmail.com>

* Fix lint

* Fix missing file type icon

* Fix null imageInfo error

* Use video.js for media playback

* Fix .js file display

* Update package-lock.json

* Update package-lock.json

* update package.json

* Update pnpm-lock.yaml

* Remove unrelated addition on VDatePicker

* Remove folder abstraction

* Use image data based aspect ratio on preview

* Base app rate throttle on API rate limit config

* Configure app rate limit throttle based on api config

* Convert v-image to script[setup]

* Convert v-media to script[setup]

* Cleanup v-media

* Remove unneeded addTokenToUrl usages

* Remove video.js

It doesn't do authorization headers for mp4/mp3, so it's pointless

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
Co-authored-by: ian <licitdev@gmail.com>
This commit is contained in:
Jay Cammarano
2022-07-20 15:52:38 -04:00
committed by GitHub
parent 9d738d12ce
commit 820457690f
27 changed files with 259 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
app/src/modules/users/routes/item.vue
View File

@@ -105,7 +105,7 @@
<div v-if="isNew === false" class="user-box">
<div class="avatar">
<v-skeleton-loader v-if="loading || previewLoading" />
<img
<v-image
v-else-if="avatarSrc && !avatarError"
:src="avatarSrc"
:alt="t('avatar')"
@@ -182,30 +182,29 @@
</template>
<script lang="ts">
import { ComponentPublicInstance, computed, defineComponent, ref, toRefs, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { defineComponent, computed, toRefs, ref, watch, ComponentPublicInstance } from 'vue';
import UsersNavigation from '../components/navigation.vue';
import { setLanguage } from '@/lang/set-language';
import { useRouter } from 'vue-router';
import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
import CommentsSidebarDetail from '@/views/private/components/comments-sidebar-detail';
import useItem from '@/composables/use-item';
import SaveOptions from '@/views/private/components/save-options';
import api from '@/api';
import { useFieldsStore, useCollectionsStore, useServerStore } from '@/stores/';
import useFormFields from '@/composables/use-form-fields';
import { Field } from '@directus/shared/types';
import UserInfoSidebarDetail from '../components/user-info-sidebar-detail.vue';
import { getRootPath } from '@/utils/get-root-path';
import useShortcut from '@/composables/use-shortcut';
import { useCollection } from '@directus/shared/composables';
import { userName } from '@/utils/user-name';
import { usePermissions } from '@/composables/use-permissions';
import { unexpectedError } from '@/utils/unexpected-error';
import { addTokenToURL } from '@/api';
import { useUserStore } from '@/stores';
import useEditsGuard from '@/composables/use-edits-guard';
import useFormFields from '@/composables/use-form-fields';
import useItem from '@/composables/use-item';
import { usePermissions } from '@/composables/use-permissions';
import useShortcut from '@/composables/use-shortcut';
import { setLanguage } from '@/lang/set-language';
import { useUserStore } from '@/stores';
import { useCollectionsStore, useFieldsStore, useServerStore } from '@/stores/';
import { getRootPath } from '@/utils/get-root-path';
import { unexpectedError } from '@/utils/unexpected-error';
import { userName } from '@/utils/user-name';
import CommentsSidebarDetail from '@/views/private/components/comments-sidebar-detail';
import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
import SaveOptions from '@/views/private/components/save-options';
import { useCollection } from '@directus/shared/composables';
import { Field } from '@directus/shared/types';
import { useRouter } from 'vue-router';
import UsersNavigation from '../components/navigation.vue';
import UserInfoSidebarDetail from '../components/user-info-sidebar-detail.vue';
export default defineComponent({
name: 'UsersItem',
@@ -477,7 +476,7 @@ export default defineComponent({
});
avatarSrc.value = response.data.data.avatar?.id
? addTokenToURL(getRootPath() + `assets/${response.data.data.avatar.id}?key=system-medium-cover`)
? getRootPath() + `assets/${response.data.data.avatar.id}?key=system-medium-cover`
: null;
roleName.value = response.data.data?.role?.name;