Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue #40 feat: Audio Upload Implementation #86

Merged
merged 16 commits into from
Sep 5, 2023
Merged

Issue #40 feat: Audio Upload Implementation #86

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
af9cc8c
feat(codeOptimization): common pop up for all assets
simran142002 Jul 10, 2023
fd1f2c7
feat(AudioUpload): Audio Upload Implementation
simran142002 Jul 24, 2023
5553200
feat(audioUpload): Integration of video with assetBrowser
simran142002 Aug 12, 2023
34f1b32
audio upload feature: testcases
simran142002 Aug 22, 2023
6ce22a1
made the required changes
simran142002 Aug 30, 2023
da8eb99
fixed build issue
simran142002 Aug 30, 2023
3e1e47c
fixed sonar smells
simran142002 Sep 1, 2023
52045ff
fix built issues
simran142002 Sep 1, 2023
8d7cece
removed spec.data.ts and data.ts
simran142002 Sep 1, 2023
a2eeabc
removed variables
simran142002 Sep 2, 2023
7a90721
increased coverage
simran142002 Sep 4, 2023
425780a
increased coverage
simran142002 Sep 4, 2023
d2f5f2d
coverage
simran142002 Sep 5, 2023
ec46d59
coverage
simran142002 Sep 5, 2023
6867dd0
increase coverage
simran142002 Sep 5, 2023
440cc13
resolved code duplicacy
simran142002 Sep 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,13 +49,16 @@
"jquery": "^3.5.1",
"jquery.fancytree": "^2.37.0",
"karma-mocha-reporter": "^2.2.5",
"katex": "^0.11.1",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need katex library for this?

"lodash-es": "^4.17.21",
"mathjax-full": "^3.1.2",
"moment": "^2.29.1",
"ng2-semantic-ui-v9": "0.0.3",
"ngx-bootstrap": "^10.0.0",
"ngx-chips": "^2.2.2",
"ngx-infinite-scroll": "^14.0.0",
"recorder-js": "^1.0.7",
"recordrtc": "^5.6.2",
"rxjs": "~6.6.3",
"svg2img": "^0.6.1",
"tslib": "^2.0.0",
Expand Down
151 changes: 151 additions & 0 deletions ...uestionset-editor-library/src/lib/components/assets-browser/assets-browser.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
<sui-modal [isClosable]="true" class="sb-modal overflow-modal" [isInverted]="false" (dismissed)="dismissAssetPicker()"
*ngIf="showAssetPicker" [size]="'normal'" [isFullScreen]="false" [mustScroll]="true" #modal>
<div class="sb-modal-header">{{selectast}}</div>
<div class="sb-modal-content p-0">
<sui-tabset>
<div class="sb-tabset-menu">
<a class="sb-item" (activate)="getMyAssets(0)" suiTabHeader="1">{{myast}}</a>
<a class="sb-item" (activate)="getAllAssets(0)" suiTabHeader="2">{{allast}}</a>
</div>
<div class="ui segment sb-tabset-segment m-0 pt-15" infiniteScroll [infiniteScrollDistance]="2"
[infiniteScrollThrottle]="500" [scrollWindow]="false" (scrolled)="lazyloadMyAssets()" suiTabContent="1">
<div class="ui pb-16 d-flex pl-0">
<div class="sb-search-box small no-btn">
<div class="input-div relative">
<i class="search icon" aria-hidden="true"></i>
<input (change)="searchAsset($event, 'myAssets')" class="sb-search-input" [(ngModel)]="searchMyInput"
type="text" placeholder={{configService.labelConfig?.lbl?.searchPlaceholder}} />
<i class="close icon" (click)="searchAsset('clearInput', 'myAssets')" aria-hidden="true"></i>
</div>
<button class="sb-btn sb-btn-normal">{{configService.labelConfig?.button_labels?.search_btn_label}}</button>
</div>
<p class="fs-0-986 ml-auto sb-color-grey" >{{assetsCount}}</p>
</div>
<div *ngIf="!myAssets?.length && searchMyInput" class="fs-0785"> {{emptySearchMessage}} </div>
<div class="sb-grid-layout image">
<div class="sb-video-content" *ngFor="let data of myAssets">
<div class="sb-image-section relative position">
<img (click)="addAssetInEditor(data.downloadUrl, data.identifier, data.name)" alt="{{data?.name}}" [src]="data.downloadUrl">
</div>
</div>

</div>
</div>

<div class="ui segment sb-tabset-segment m-0 pt-15" infiniteScroll [infiniteScrollDistance]="2"
[infiniteScrollThrottle]="500" [scrollWindow]="false" (scrolled)="lazyloadAllAssets()" suiTabContent="2">
<div class="ui pb-16 d-flex pl-0">
<div class="sb-search-box small no-btn">
<div class="input-div relative">
<i class="search icon" aria-hidden="true"></i>
<input (change)="searchAsset($event, 'myAssets')" class="sb-search-input" [(ngModel)]="searchAllInput"
type="text" placeholder={{configService.labelConfig?.lbl?.searchPlaceholder}} />
<i class="close icon" (click)="searchAsset('clearInput', 'allAssets')" aria-hidden="true"></i>
</div>
<button class="sb-btn sb-btn-normal">{{configService.labelConfig?.button_labels?.search_btn_label}}</button>
</div>
<p class="fs-0-986 ml-auto sb-color-grey">{{assetsCount}}</p>
</div>
<div *ngIf="!allAssets?.length && searchAllInput" class="fs-0785"> {{emptySearchMessage}} </div>
<div class="sb-grid-layout image">
<div class="sb-video-content" *ngFor="let data of allAssets">
<div class="sb-image-section">
<img (click)="addAssetInEditor(data.downloadUrl, data.identifier, data.name)" alt="{{data?.name}}" [src]="data.downloadUrl">
</div>
</div>
</div>

</div>
</sui-tabset>
</div>
<div class="sb-modal-actions flex-jc-space-end">
<button (click)="openAssetUploadModal();" class="sb-btn sb-btn-primary sb-btn-normal">{{configService.labelConfig?.button_labels?.upload_use_btn_label}}</button>
</div>
</sui-modal>
<!-- Upload image pop up code here -->

<sui-modal class="sb-modal overflow-modal" [isClosable]="isClosable" [isInverted]="false"
(dismissed)="dismissAssetUploadModal()" *ngIf="showAssetUploadModal" [size]="'large'" [isFullScreen]="false"
[mustScroll]="true" appBodyScroll #modal>
<div class="sb-modal-header">{{configService.labelConfig?.lbl?.uploadAndUse}}</div>
<div class="p-10 sb-bg-white">
<div class="d-flex">
<div class="w-50">
<div class="content">
<h6 class="mb-8 fs-normal">{{chooseOrDragAst}}<span class="red">*</span></h6>
<div class="upload-image-modal-section d-flex flex-ai-center flex-jc-center flex-dc">
<ng-container>
<button class="upload-input-button sb-btn sb-btn-success sb-btn-normal">
{{configService.labelConfig?.button_labels?.upload_from_computer_btn_label}}
<input (change)="uploadAsset($event)" type="file" [accept]="acceptAssetType" name="assetfile">
</button>
<div class="py-10 fs-0-785 sb-color-primary" *ngIf="assetUploadLoader"> {{assetName}} </div>
<span class="fsmall mt-8">{{configService.labelConfig?.lbl?.upload}} {{acceptedFileType}} ({{configService.labelConfig?.lbl?.maxFileSize}}
{{astSize}}{{astSizeType}})</span>
<div *ngIf="showErrorMsg" class="sb-color-error fsmall mt-8">
<p>{{errorMsg}}</p>
</div>
</ng-container>
</div>
<!-- Record and Upload -->
<!-- <div class="upload-image-modal-section d-flex flex-ai-center flex-jc-center flex-dc" *ngIf="assetType==='audio'">
<ng-container>
<button class="upload-input-button sb-btn sb-btn-success sb-btn-normal" (click)="startRecording()" *ngIf="!recording">
Record and Upload
</button>
<button class="sb-btn sb-btn-primary sb-btn-normal" (click)="stopRecording()" type="file" [accept]="acceptAssetType" name="assetfile" *ngIf="recording">
Stop
</button>
<br>
<audio class="audio-file" controls *ngIf="url">
<source [src]="sanitize(url)" type="audio/wav"/>
</audio>
<span class="fsmall mt-8">{{configService.labelConfig?.lbl?.upload}} {{acceptedFileType}} ({{configService.labelConfig?.lbl?.maxFileSize}}
{{astSize}}{{astSizeType}})</span>
<div *ngIf="showErrorMsg" class="sb-color-error fsmall mt-8">
<p>{{errorMsg}}</p>
</div>
</ng-container>
</div> -->
<div class="ui info message sb-info-bx">
<ul class="list">
<li class="fs-0785">{{configService.labelConfig?.lbl?.allowedFileTypes}} {{acceptedFileType}}</li>
<li class="fs-0785">{{configService.labelConfig?.lbl?.maximumAllowedFileSize}} {{astSize}}{{astSizeType}}</li>
</ul>
</div>
<h6 class="fs-0785">{{configService.labelConfig?.lbl?.copyRightsAndLicense}}<span class="red">*</span></h6>
<p class="fsmall mt-8 terms-and-condition">{{termsAndCondition}}</p>
</div>
</div>
<div class="w-50 pl-10 ml-10 b-bl">
<div class="ui info message sb-info-bx mb-0">
<ul class="list">
<li class="fs-0785 font-weight-bold">
<i class="icon info circle" aria-hidden="true"></i>
{{configService.labelConfig?.lbl?.dropChooseFile}}</li>
</ul>
</div>
<div class="sb-form-fields">
<div class="form-container upload-form">
<sb-dynamic-form [config]="formConfig" (statusChanges)="onStatusChanges($event)"
(valueChanges)="valueChanges($event)"></sb-dynamic-form>
</div>
</div>
</div>
</div>
<div class="sb-modal-actions flex-jc-space-between p-0">
<div>
<button (click)="dismissPops(modal);" class="mr-10 sb-btn sb-btn-primary sb-btn-normal">{{configService.labelConfig?.button_labels?.cancel_btn_label}}</button>
<button type="button" class="sb-btn sb-btn-normal text-left sb-btn-loading-spinner sb-btn-primary"
[disabled]="!assetFormValid" (click)="uploadAndUseAsset(modal);"
[ngClass]="{'sb-btn-primary': assetFormValid, 'sb-btn-disabled': !assetFormValid}">
<div class="sb-loading-spinner" *ngIf="loading" role="status" aria-hidden="true"></div>
{{configService.labelConfig?.button_labels?.upload_use_btn_label}}
</button>
</div>
<div>
<button (click)="dismissAssetUploadModal();" class=" sb-btn sb-btn-primary sb-btn-normal"> {{configService.labelConfig?.button_labels?.back_btn_label}}</button>
</div>
</div>
</div>
</sui-modal>
Loading