diff options
Diffstat (limited to 'app/assets/javascripts/repository/components/blob_viewers')
6 files changed, 85 insertions, 71 deletions
diff --git a/app/assets/javascripts/repository/components/blob_viewers/download_viewer.vue b/app/assets/javascripts/repository/components/blob_viewers/download_viewer.vue index 48fa33eb558..f7b318c64d9 100644 --- a/app/assets/javascripts/repository/components/blob_viewers/download_viewer.vue +++ b/app/assets/javascripts/repository/components/blob_viewers/download_viewer.vue @@ -9,19 +9,17 @@ export default { GlLink, }, props: { - fileName: { - type: String, + blob: { + type: Object, required: true, }, - filePath: { - type: String, - required: true, - }, - fileSize: { - type: Number, - required: false, - default: 0, - }, + }, + data() { + return { + fileName: this.blob.name, + filePath: this.blob.rawPath, + fileSize: this.blob.rawSize || 0, + }; }, computed: { downloadFileSize() { diff --git a/app/assets/javascripts/repository/components/blob_viewers/image_viewer.vue b/app/assets/javascripts/repository/components/blob_viewers/image_viewer.vue index 83d36209bb3..5027f7877aa 100644 --- a/app/assets/javascripts/repository/components/blob_viewers/image_viewer.vue +++ b/app/assets/javascripts/repository/components/blob_viewers/image_viewer.vue @@ -1,15 +1,17 @@ <script> export default { props: { - url: { - type: String, - required: true, - }, - alt: { - type: String, + blob: { + type: Object, required: true, }, }, + data() { + return { + url: this.blob.rawPath, + alt: this.blob.name, + }; + }, }; </script> <template> diff --git a/app/assets/javascripts/repository/components/blob_viewers/index.js b/app/assets/javascripts/repository/components/blob_viewers/index.js index 8f6f2d15215..e942f59e7d8 100644 --- a/app/assets/javascripts/repository/components/blob_viewers/index.js +++ b/app/assets/javascripts/repository/components/blob_viewers/index.js @@ -1,48 +1,19 @@ -export const loadViewer = (type) => { - switch (type) { - case 'empty': - return () => import(/* webpackChunkName: 'blob_empty_viewer' */ './empty_viewer.vue'); - case 'text': - return gon.features.highlightJs - ? () => - import( - /* webpackChunkName: 'blob_text_viewer' */ '~/vue_shared/components/source_viewer.vue' - ) - : null; - case 'download': - return () => import(/* webpackChunkName: 'blob_download_viewer' */ './download_viewer.vue'); - case 'image': - return () => import(/* webpackChunkName: 'blob_image_viewer' */ './image_viewer.vue'); - case 'video': - return () => import(/* webpackChunkName: 'blob_video_viewer' */ './video_viewer.vue'); - case 'pdf': - return () => import(/* webpackChunkName: 'blob_pdf_viewer' */ './pdf_viewer.vue'); - default: - return null; - } +const viewers = { + download: () => import('./download_viewer.vue'), + image: () => import('./image_viewer.vue'), + video: () => import('./video_viewer.vue'), + empty: () => import('./empty_viewer.vue'), + text: () => import('~/vue_shared/components/source_viewer/source_viewer.vue'), + pdf: () => import('./pdf_viewer.vue'), + lfs: () => import('./lfs_viewer.vue'), }; -export const viewerProps = (type, blob) => { - return { - text: { - content: blob.rawTextBlob, - autoDetect: true, // We'll eventually disable autoDetect and pass the language explicitly to reduce the footprint (https://gitlab.com/gitlab-org/gitlab/-/issues/348145) - }, - download: { - fileName: blob.name, - filePath: blob.rawPath, - fileSize: blob.rawSize, - }, - image: { - url: blob.rawPath, - alt: blob.name, - }, - video: { - url: blob.rawPath, - }, - pdf: { - url: blob.rawPath, - fileSize: blob.rawSize, - }, - }[type]; +export const loadViewer = (type, isUsingLfs) => { + let viewer = viewers[type]; + + if (!viewer && isUsingLfs) { + viewer = viewers.lfs; + } + + return viewer; }; diff --git a/app/assets/javascripts/repository/components/blob_viewers/lfs_viewer.vue b/app/assets/javascripts/repository/components/blob_viewers/lfs_viewer.vue new file mode 100644 index 00000000000..6dc7e10662e --- /dev/null +++ b/app/assets/javascripts/repository/components/blob_viewers/lfs_viewer.vue @@ -0,0 +1,38 @@ +<script> +import { GlLink, GlSprintf } from '@gitlab/ui'; +import { __ } from '~/locale'; + +export default { + i18n: { + lfsText: __( + 'This content could not be displayed because it is stored in LFS. You can %{linkStart}download it%{linkEnd} instead.', + ), + }, + components: { + GlLink, + GlSprintf, + }, + props: { + blob: { + type: Object, + required: true, + }, + }, + data() { + return { + fileName: this.blob.name, + filePath: this.blob.rawPath, + }; + }, +}; +</script> + +<template> + <div class="gl-text-center gl-py-13 gl-bg-gray-50" data-type="lfs"> + <gl-sprintf :message="$options.i18n.lfsText"> + <template #link="{ content }"> + <gl-link :href="filePath" :download="fileName" target="_blank">{{ content }}</gl-link> + </template> + </gl-sprintf> + </div> +</template> diff --git a/app/assets/javascripts/repository/components/blob_viewers/pdf_viewer.vue b/app/assets/javascripts/repository/components/blob_viewers/pdf_viewer.vue index 803a357df52..c3df5984426 100644 --- a/app/assets/javascripts/repository/components/blob_viewers/pdf_viewer.vue +++ b/app/assets/javascripts/repository/components/blob_viewers/pdf_viewer.vue @@ -11,17 +11,17 @@ export default { tooLargeButtonText: __('Download PDF'), }, props: { - url: { - type: String, - required: true, - }, - fileSize: { - type: Number, + blob: { + type: Object, required: true, }, }, data() { - return { totalPages: 0 }; + return { + url: this.blob.rawPath, + fileSize: this.blob.rawSize, + totalPages: 0, + }; }, computed: { tooLargeToDisplay() { diff --git a/app/assets/javascripts/repository/components/blob_viewers/video_viewer.vue b/app/assets/javascripts/repository/components/blob_viewers/video_viewer.vue index dec0c4802ca..260b831f4d1 100644 --- a/app/assets/javascripts/repository/components/blob_viewers/video_viewer.vue +++ b/app/assets/javascripts/repository/components/blob_viewers/video_viewer.vue @@ -1,11 +1,16 @@ <script> export default { props: { - url: { - type: String, + blob: { + type: Object, required: true, }, }, + data() { + return { + url: this.blob.rawPath, + }; + }, }; </script> <template> |