From 34ac2a93d81f1cae9e2d1843866bd9864705afa6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Fri, 25 Oct 2019 10:37:08 +0200 Subject: [PATCH] MOBILE-3205 forum: Show attachments as inline files --- .../addon-mod-assign-submission-file.html | 8 +- .../component/addon-mod-data-field-file.html | 8 +- .../components/post/addon-mod-forum-post.html | 7 +- .../forum/pages/discussion/discussion.html | 2 +- .../mod/resource/components/index/index.ts | 2 + src/addon/mod/resource/providers/helper.ts | 18 +---- .../addon-mod-workshop-submission.html | 7 +- src/components/components.module.ts | 3 + src/components/files/core-files.html | 9 +++ src/components/files/files.ts | 79 +++++++++++++++++++ src/providers/utils/mimetype.ts | 34 ++++++++ 11 files changed, 133 insertions(+), 44 deletions(-) create mode 100644 src/components/files/core-files.html create mode 100644 src/components/files/files.ts diff --git a/src/addon/mod/assign/submission/file/component/addon-mod-assign-submission-file.html b/src/addon/mod/assign/submission/file/component/addon-mod-assign-submission-file.html index 69d048e0c..bd4fd9d01 100644 --- a/src/addon/mod/assign/submission/file/component/addon-mod-assign-submission-file.html +++ b/src/addon/mod/assign/submission/file/component/addon-mod-assign-submission-file.html @@ -2,13 +2,7 @@

{{plugin.name}}

- - - - - - - +
diff --git a/src/addon/mod/data/fields/file/component/addon-mod-data-field-file.html b/src/addon/mod/data/fields/file/component/addon-mod-data-field-file.html index a7e8d8f11..bb71fc2cd 100644 --- a/src/addon/mod/data/fields/file/component/addon-mod-data-field-file.html +++ b/src/addon/mod/data/fields/file/component/addon-mod-data-field-file.html @@ -10,12 +10,6 @@
- - - - - - - +
diff --git a/src/addon/mod/forum/components/post/addon-mod-forum-post.html b/src/addon/mod/forum/components/post/addon-mod-forum-post.html index d0512dd01..0b91ce3d3 100644 --- a/src/addon/mod/forum/components/post/addon-mod-forum-post.html +++ b/src/addon/mod/forum/components/post/addon-mod-forum-post.html @@ -27,12 +27,7 @@
- - - - - - +
diff --git a/src/addon/mod/forum/pages/discussion/discussion.html b/src/addon/mod/forum/pages/discussion/discussion.html index 571c89738..57cbce7c5 100644 --- a/src/addon/mod/forum/pages/discussion/discussion.html +++ b/src/addon/mod/forum/pages/discussion/discussion.html @@ -38,7 +38,7 @@ - {{ 'addon.mod_forum.discussionlocked' | translate }} + {{ 'addon.mod_forum.discussionlocked' | translate }} diff --git a/src/addon/mod/resource/components/index/index.ts b/src/addon/mod/resource/components/index/index.ts index 6c33136a3..12913fe40 100644 --- a/src/addon/mod/resource/components/index/index.ts +++ b/src/addon/mod/resource/components/index/index.ts @@ -134,6 +134,8 @@ export class AddonModResourceIndexComponent extends CoreCourseModuleMainResource return this.resourceHelper.getEmbeddedHtml(this.module, this.courseId).then((html) => { this.contentText = html; + + this.mode = this.contentText.length > 0 ? 'embedded' : 'external'; }); } else { this.mode = 'external'; diff --git a/src/addon/mod/resource/providers/helper.ts b/src/addon/mod/resource/providers/helper.ts index e751bf2c5..df5dfc870 100644 --- a/src/addon/mod/resource/providers/helper.ts +++ b/src/addon/mod/resource/providers/helper.ts @@ -53,23 +53,7 @@ export class AddonModResourceHelperProvider { getEmbeddedHtml(module: any, courseId: number): Promise { return this.courseHelper.downloadModuleWithMainFileIfNeeded(module, courseId, AddonModResourceProvider.COMPONENT, module.id, module.contents).then((result) => { - const file = module.contents[0], - ext = this.mimetypeUtils.getFileExtension(file.filename), - type = this.mimetypeUtils.getExtensionType(ext), - mimeType = this.mimetypeUtils.getMimeType(ext); - - if (type == 'image') { - return ''; - } - - if (type == 'audio' || type == 'video') { - return '<' + type + ' controls title="' + file.filename + '"" src="' + result.path + '">' + - '' + - ''; - } - - // Shouldn't reach here, the user should have called CoreMimetypeUtilsProvider#canBeEmbedded. - return ''; + return this.mimetypeUtils.getEmbeddedHtml(module.contents[0], result.path); }); } diff --git a/src/addon/mod/workshop/components/submission/addon-mod-workshop-submission.html b/src/addon/mod/workshop/components/submission/addon-mod-workshop-submission.html index 0db614d75..70b4e7063 100644 --- a/src/addon/mod/workshop/components/submission/addon-mod-workshop-submission.html +++ b/src/addon/mod/workshop/components/submission/addon-mod-workshop-submission.html @@ -25,12 +25,7 @@ - - - - - - + diff --git a/src/components/components.module.ts b/src/components/components.module.ts index 2a57451cf..fe663a255 100644 --- a/src/components/components.module.ts +++ b/src/components/components.module.ts @@ -27,6 +27,7 @@ import { CoreProgressBarComponent } from './progress-bar/progress-bar'; import { CoreEmptyBoxComponent } from './empty-box/empty-box'; import { CoreSearchBoxComponent } from './search-box/search-box'; import { CoreFileComponent } from './file/file'; +import { CoreFilesComponent } from './files/files'; import { CoreIconComponent } from './icon/icon'; import { CoreContextMenuComponent } from './context-menu/context-menu'; import { CoreContextMenuItemComponent } from './context-menu/context-menu-item'; @@ -67,6 +68,7 @@ import { CoreBSTooltipComponent } from './bs-tooltip/bs-tooltip'; CoreEmptyBoxComponent, CoreSearchBoxComponent, CoreFileComponent, + CoreFilesComponent, CoreIconComponent, CoreContextMenuComponent, CoreContextMenuItemComponent, @@ -118,6 +120,7 @@ import { CoreBSTooltipComponent } from './bs-tooltip/bs-tooltip'; CoreEmptyBoxComponent, CoreSearchBoxComponent, CoreFileComponent, + CoreFilesComponent, CoreIconComponent, CoreContextMenuComponent, CoreContextMenuItemComponent, diff --git a/src/components/files/core-files.html b/src/components/files/core-files.html new file mode 100644 index 000000000..239728e29 --- /dev/null +++ b/src/components/files/core-files.html @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/components/files/files.ts b/src/components/files/files.ts new file mode 100644 index 000000000..9cc9fea6c --- /dev/null +++ b/src/components/files/files.ts @@ -0,0 +1,79 @@ +// (C) Copyright 2015 Moodle Pty Ltd. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import { Component, Input, OnInit, DoCheck, KeyValueDiffers } from '@angular/core'; +import { CoreMimetypeUtilsProvider } from '@providers/utils/mimetype'; +import { CoreUtilsProvider } from '@providers/utils/utils'; + +/** + * Component to render a file list. + * + * + * + */ +@Component({ + selector: 'core-files', + templateUrl: 'core-files.html' +}) +export class CoreFilesComponent implements OnInit, DoCheck { + @Input() files: any[]; // List of files. + @Input() component: string; // Component the downloaded files will be linked to. + @Input() componentId: string | number; // Component ID. + @Input() alwaysDownload?: boolean | string; // Whether it should always display the refresh button when the file is downloaded. + // Use it for files that you cannot determine if they're outdated or not. + @Input() canDownload?: boolean | string = true; // Whether file can be downloaded. + @Input() showSize?: boolean | string = true; // Whether show filesize. + @Input() showTime?: boolean | string = true; // Whether show file time modified. + @Input() showInline = false; // If true, it will reorder and try to show inline files first. + + contentText: string; + + protected differ: any; // To detect changes in the data input. + + constructor(protected mimetypeUtils: CoreMimetypeUtilsProvider, + protected utils: CoreUtilsProvider, + differs: KeyValueDiffers) { + this.differ = differs.find([]).create(); + } + + /** + * Component being initialized. + */ + ngOnInit(): void { + if (this.utils.isTrueOrOne(this.showInline)) { + this.renderInlineFiles(); + } + } + + /** + * Detect and act upon changes that Angular can’t or won’t detect on its own (objects and arrays). + */ + ngDoCheck(): void { + if (this.utils.isTrueOrOne(this.showInline)) { + // Check if there's any change in the extraData object. + const changes = this.differ.diff(this.files); + if (changes) { + this.renderInlineFiles(); + } + } + } + + protected renderInlineFiles(): void { + this.contentText = this.files.reduce((previous, file) => { + const text = this.mimetypeUtils.getEmbeddedHtml(file); + + return text ? previous + '
' + text : previous; + }, ''); + } +} diff --git a/src/providers/utils/mimetype.ts b/src/providers/utils/mimetype.ts index d45d9af87..47dc09037 100644 --- a/src/providers/utils/mimetype.ts +++ b/src/providers/utils/mimetype.ts @@ -138,6 +138,40 @@ export class CoreMimetypeUtilsProvider { } } + /** + * Set the embed type to display an embedded file and mimetype if not found. + * + * @param file File object. + * @paran path Alternative path that will override fileurl from file object. + */ + getEmbeddedHtml(file: any, path?: string): string { + let ext; + + if (file.mimetype) { + ext = this.getExtension(file.mimetype); + } else { + ext = this.getFileExtension(file.filename); + file.mimetype = this.getMimeType(ext); + } + + if (this.canBeEmbedded(ext)) { + file.embedType = this.getExtensionType(ext); + + path = path || file.fileurl; + + if (file.embedType == 'image') { + return ''; + } + if (file.embedType == 'audio' || file.embedType == 'video') { + return '<' + file.embedType + ' controls title="' + file.filename + '" src="' + path + '">' + + '' + + ''; + } + } + + return ''; + } + /** * Get the URL of the icon of an extension. *