File

src/app/components/popups/sb-share-popup/sb-share-popup.component.ts

Implements

OnInit OnDestroy

Metadata

Index

Properties
Methods
Inputs

Constructor

constructor(contentService: ContentService, popoverCtrl: PopoverController, platform: Platform, contentShareHandler: ContentShareHandlerService, utilityService: UtilityService, navParams: NavParams, telemetryGeneratorService: TelemetryGeneratorService, appVersion: AppVersion, commonUtilService: CommonUtilService, permissionService: AndroidPermissionsService, appGlobalService: AppGlobalService)
Parameters :
Name Type Optional
contentService ContentService No
popoverCtrl PopoverController No
platform Platform No
contentShareHandler ContentShareHandlerService No
utilityService UtilityService No
navParams NavParams No
telemetryGeneratorService TelemetryGeneratorService No
appVersion AppVersion No
commonUtilService CommonUtilService No
permissionService AndroidPermissionsService No
appGlobalService AppGlobalService No

Inputs

content
Type : any
corRelationList
Type : any
moduleId
Type : string
objRollup
Type : any
subContentIds
Type : Array<string>
Default value : []

Methods

Private Async checkForPermissions
checkForPermissions()
Returns : Promise<boolean | undefined>
closePopover
closePopover()
Returns : void
Private generateConfirmClickTelemetry
generateConfirmClickTelemetry(shareMode)
Parameters :
Name Optional
shareMode No
Returns : void
Private generateImpressionTelemetry
generateImpressionTelemetry()
Returns : void
Private generateShareClickTelemetry
generateShareClickTelemetry()
Returns : void
Private Async getContentEndPoint
getContentEndPoint(content, rootContentIdentifier)
Parameters :
Name Optional
content No
rootContentIdentifier No
Returns : unknown
ngOnDestroy
ngOnDestroy()
Returns : void
Async ngOnInit
ngOnInit()
Returns : any
Async saveFile
saveFile()
Returns : any
Async shareFile
shareFile()
Returns : any
shareLink
shareLink()
Returns : void
Private Async showStoragePermissionPopup
showStoragePermissionPopup()
Returns : Promise<boolean | undefined>

Properties

appName
Type : string
Default value : ''
backButtonFunc
Type : Subscription
pageId
Type : string
Public popoverCtrl
Type : PopoverController
shareFromPlayer
Default value : false
shareItemType
Type : string
shareOptions
Type : object
Default value : { link: { name: 'SHARE_LINK', value: 'link' }, file: { name: 'SEND_FILE', value: 'file' }, save: { name: 'SAVE_FILE_ON_DEVICE', value: 'save' } }
shareType
Type : string
shareUrl
Type : string
telemetryObject
Type : TelemetryObject
import { UtilityService } from '@app/services/utility-service';
import { Component, Input, OnInit, OnDestroy, Inject } from '@angular/core';
import { Platform, PopoverController, NavParams } from '@ionic/angular';
import { Subscription } from 'rxjs';
import {
  AndroidPermissionsService, AppGlobalService, CommonUtilService,
  ContentShareHandlerService, TelemetryGeneratorService
} from '@app/services';
import {
  Environment,
  ImpressionType,
  ID,
  PageId,
  InteractType,
  InteractSubtype
} from '@app/services/telemetry-constants';
import {
  TelemetryObject, ContentDetailRequest,
  ContentService
} from 'sunbird-sdk';
import {
  ShareUrl, ShareMode, MimeType
} from '@app/app/app.constant';
import { ContentUtil } from '@app/util/content-util';
import {
  AndroidPermission,
  AndroidPermissionsStatus
} from '@app/services/android-permissions/android-permission';
import { AppVersion } from '@ionic-native/app-version/ngx';
import { CsPrimaryCategory } from '@project-sunbird/client-services/services/content';

@Component({
  selector: 'app-sb-share-popup',
  templateUrl: './sb-share-popup.component.html',
  styleUrls: ['./sb-share-popup.component.scss'],
})
export class SbSharePopupComponent implements OnInit, OnDestroy {

  @Input() content: any;
  @Input() corRelationList: any;
  @Input() objRollup: any;
  @Input() moduleId: string;
  @Input() subContentIds: Array<string> = [];
  backButtonFunc: Subscription;
  shareOptions = {
    link: {
      name: 'SHARE_LINK',
      value: 'link'
    },
    file: {
      name: 'SEND_FILE',
      value: 'file'
    },
    save: {
      name: 'SAVE_FILE_ON_DEVICE',
      value: 'save'
    }
  };
  shareType: string;
  shareUrl: string;
  shareItemType: string;
  pageId: string;
  telemetryObject: TelemetryObject;
  appName = '';
  shareFromPlayer = false;

  constructor(
    @Inject('CONTENT_SERVICE') private contentService: ContentService,
    public popoverCtrl: PopoverController,
    private platform: Platform,
    private contentShareHandler: ContentShareHandlerService,
    private utilityService: UtilityService,
    private navParams: NavParams,
    private telemetryGeneratorService: TelemetryGeneratorService,
    private appVersion: AppVersion,
    private commonUtilService: CommonUtilService,
    private permissionService: AndroidPermissionsService,
    private appGlobalService: AppGlobalService
  ) {
    this.content = this.navParams.get('content');
    this.corRelationList = this.navParams.get('corRelationList');
    this.objRollup = this.navParams.get('objRollup');
    this.shareItemType = this.navParams.get('shareItemType');
    this.pageId = this.navParams.get('pageId');
    this.moduleId = this.navParams.get('moduleId');
    this.subContentIds = this.navParams.get('subContentIds');
    this.shareFromPlayer = this.navParams.get('shareFromPlayer');
  }

  async ngOnInit() {
    this.telemetryObject = ContentUtil.getTelemetryObject(this.content);
    this.generateShareClickTelemetry();
    this.generateImpressionTelemetry();
    this.backButtonFunc = this.platform.backButton.subscribeWithPriority(11, () => {
      this.popoverCtrl.dismiss();
      this.backButtonFunc.unsubscribe();
    });
    this.shareType = this.shareOptions.link.value;
    const baseUrl = await this.utilityService.getBuildConfigValue('BASE_URL');

    let rootContentIdentifier = this.content.identifier;
    if (this.objRollup && this.objRollup.l1 && this.objRollup.l1 !== this.content.identifier) {
      rootContentIdentifier = this.objRollup.l1;
    }
    this.shareUrl = baseUrl + await this.getContentEndPoint(this.content, rootContentIdentifier) + rootContentIdentifier;

    this.appName = await this.appVersion.getAppName();
  }

  ngOnDestroy(): void {
    this.backButtonFunc.unsubscribe();
  }

  private async getContentEndPoint(content, rootContentIdentifier) {
    if (content.identifier !== rootContentIdentifier) {
      const contentDetailRequest: ContentDetailRequest = {
        contentId: rootContentIdentifier,
        objectType: this.content.objectType,
        attachFeedback: false,
        attachContentAccess: false,
        emitUpdateIfAny: false
      };
      await this.contentService.getContentDetails(contentDetailRequest).toPromise()
        .then((contentDetail) => {
          content = contentDetail;
        });
    }

    let endPoint = '';
    if (content.primaryCategory.toLowerCase() === CsPrimaryCategory.COURSE.toLowerCase()) {
      endPoint = ShareUrl.COURSE;
    } else if (content.mimeType === MimeType.COLLECTION) {
      endPoint = ShareUrl.COLLECTION;
    } else {
      endPoint = ShareUrl.CONTENT;
    }
    return endPoint;
  }

  private generateImpressionTelemetry() {
    this.telemetryGeneratorService.generateImpressionTelemetry(
      ImpressionType.VIEW, '',
      PageId.SHARE_CONTENT_POPUP,
      Environment.HOME,
      this.telemetryObject.id,
      this.telemetryObject.type,
      this.telemetryObject.version,
      this.objRollup,
      this.corRelationList);
  }

  private generateShareClickTelemetry() {
    this.telemetryGeneratorService.generateInteractTelemetry(this.shareItemType,
      '',
      Environment.HOME,
      this.pageId,
      ContentUtil.getTelemetryObject(this.content),
      undefined,
      this.objRollup,
      this.corRelationList,
      ID.SHARE);
  }

  private generateConfirmClickTelemetry(shareMode) {
    this.telemetryGeneratorService.generateInteractTelemetry(shareMode,
      '',
      Environment.HOME,
      PageId.SHARE_CONTENT_POPUP,
      ContentUtil.getTelemetryObject(this.content),
      undefined,
      this.objRollup,
      this.corRelationList,
      ID.SHARE_CONFIRM);
  }

  closePopover() {
    this.popoverCtrl.dismiss();
  }

  shareLink() {
    this.generateConfirmClickTelemetry(ShareMode.SHARE);
    const shareParams = {
      byLink: true,
      link: this.shareUrl
    };
    this.contentShareHandler.shareContent(shareParams, this.content, this.moduleId, this.subContentIds,
      this.corRelationList, this.objRollup,  this.pageId);
    this.popoverCtrl.dismiss();
  }

  async shareFile() {
    await this.checkForPermissions().then((result) => {
      if (result) {
        this.generateConfirmClickTelemetry(ShareMode.SEND);
        const shareParams = {
          byFile: true,
          link: this.shareUrl
        };
        this.contentShareHandler.shareContent(shareParams, this.content, this.moduleId, this.subContentIds,
          this.corRelationList, this.objRollup, this.pageId);
        this.popoverCtrl.dismiss();
      } else {
        this.commonUtilService.showSettingsPageToast('FILE_MANAGER_PERMISSION_DESCRIPTION', this.appName, this.pageId, true);
      }
    });
  }

  async saveFile() {
    await this.checkForPermissions().then((result) => {
      if (result) {
        this.generateConfirmClickTelemetry(ShareMode.SAVE);
        const shareParams = {
          saveFile: true,
        };
        this.contentShareHandler.shareContent(shareParams, this.content, this.moduleId, this.subContentIds,
          this.corRelationList, this.objRollup, this.pageId);
        this.popoverCtrl.dismiss();
      } else {
        this.commonUtilService.showSettingsPageToast('FILE_MANAGER_PERMISSION_DESCRIPTION', this.appName, this.pageId, true);
      }
    });
  }

  private async checkForPermissions(): Promise<boolean | undefined> {
    if(this.platform.is('ios')) {
      return new Promise<boolean | undefined>(async (resolve, reject) => {
        resolve(true);
      });
    }
    return new Promise<boolean | undefined>(async (resolve, reject) => {
      const permissionStatus = await this.commonUtilService.getGivenPermissionStatus(AndroidPermission.WRITE_EXTERNAL_STORAGE);

      if (permissionStatus.hasPermission) {
        resolve(true);
      } else if (permissionStatus.isPermissionAlwaysDenied) {
        await this.commonUtilService.showSettingsPageToast('FILE_MANAGER_PERMISSION_DESCRIPTION', this.appName, this.pageId, true);
        resolve(false);
      } else {
        this.showStoragePermissionPopup().then((result) => {
          if (result) {
            resolve(true);
          } else {
            resolve(false);
          }
        });
      }
    });
  }

  private async showStoragePermissionPopup(): Promise<boolean | undefined> {
    await this.popoverCtrl.dismiss();
    return new Promise<boolean | undefined>(async (resolve, reject) => {
      const confirm = await this.commonUtilService.buildPermissionPopover(
        async (selectedButton: string) => {
          if (selectedButton === this.commonUtilService.translateMessage('NOT_NOW')) {
            this.telemetryGeneratorService.generateInteractTelemetry(
              InteractType.TOUCH,
              InteractSubtype.NOT_NOW_CLICKED,
              Environment.HOME,
              PageId.PERMISSION_POPUP);
            await this.commonUtilService.showSettingsPageToast('FILE_MANAGER_PERMISSION_DESCRIPTION', this.appName, this.pageId, true);
          } else if (selectedButton === this.commonUtilService.translateMessage('ALLOW')) {
            this.telemetryGeneratorService.generateInteractTelemetry(
              InteractType.TOUCH,
              InteractSubtype.ALLOW_CLICKED,
              Environment.HOME,
              PageId.PERMISSION_POPUP);
            this.appGlobalService.isNativePopupVisible = true;
            this.permissionService.requestPermission(AndroidPermission.WRITE_EXTERNAL_STORAGE)
              .subscribe(async (status: AndroidPermissionsStatus) => {
                if (status.hasPermission) {
                  this.telemetryGeneratorService.generateInteractTelemetry(
                    InteractType.TOUCH,
                    InteractSubtype.ALLOW_CLICKED,
                    Environment.HOME,
                    PageId.APP_PERMISSION_POPUP
                  );
                  resolve(true);
                } else if (status.isPermissionAlwaysDenied) {
                  await this.commonUtilService.showSettingsPageToast
                    ('FILE_MANAGER_PERMISSION_DESCRIPTION', this.appName, this.pageId, true);
                  resolve(false);
                } else {
                  this.telemetryGeneratorService.generateInteractTelemetry(
                    InteractType.TOUCH,
                    InteractSubtype.DENY_CLICKED,
                    Environment.HOME,
                    PageId.APP_PERMISSION_POPUP
                  );
                  await this.commonUtilService.showSettingsPageToast
                    ('FILE_MANAGER_PERMISSION_DESCRIPTION', this.appName, this.pageId, true);
                }
                this.appGlobalService.setNativePopupVisible(false, 1000);
                resolve(undefined);
              });
          }
        }, this.appName, this.commonUtilService.translateMessage('FILE_MANAGER'), 'FILE_MANAGER_PERMISSION_DESCRIPTION', this.pageId, true
      );
      await confirm.present();
    });
  }
}
<ng-container *ngIf="!shareFromPlayer">
<ion-header class="sb-popover-header">
  <ion-toolbar class="sb-popover-toolbar">
    <ion-title class="sb-popover-title" role="heading" aria-level="1">{{'SHARE' | translate}}
      <ion-icon name="close" class="sb-modal-close" (click)="closePopover()"></ion-icon>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="sb-popover-container ion-no-padding">
  <ion-list lines="none" class="content-share">
    <ion-radio-group [(ngModel)]="shareType">
      <div [ngClass]="{'share-link': !content.isAvailableLocally}">
        <ion-item>
          <ion-label>{{shareOptions.link.name | translate}}</ion-label>
          <ion-radio slot="start" value="{{shareOptions.link.value}}"></ion-radio>
        </ion-item>
        <p class="share-url">{{shareUrl}}</p>
      </div>

      <ion-item>
        <ion-label>{{shareOptions.file.name | translate}}</ion-label>
        <ion-radio slot="start" value="{{shareOptions.file.value}}" [disabled]="!content.isAvailableLocally">
        </ion-radio>
      </ion-item>
      <p class="share-desc">
        {{ 'DOWNLOAD_FILE_SIZE' | translate: {'%s': (content.sizeOnDevice ? content.sizeOnDevice: content.contentData.size) | fileSize } }}
      </p>

      <ion-item *ngIf="!platform.is('ios')">
        <ion-label>{{shareOptions.save.name | translate}}</ion-label>
        <ion-radio slot="start" value="{{shareOptions.save.value}}" [disabled]="!content.isAvailableLocally">
        </ion-radio>
      </ion-item>
      <p class="share-desc">{{'DOWNLOAD_PATH' | translate}}</p>

      <div *ngIf="!content.isAvailableLocally" class="share-info">
        <ion-icon role="button" aria-label="Share info" name="information-circle-outline"></ion-icon>
        {{'DOWNLOAD_FILE_INFO' | translate}}
      </div>
    </ion-radio-group>
  </ion-list>
</ion-content>

<ion-footer>
  <div class="sb-popover-footer">
    <button class="sb-popover-action-btn width-100 popover-color" *ngIf="shareType === shareOptions.link.value"
      (click)="shareLink()">{{'SHARE' | translate}}</button>
    <button class="sb-popover-action-btn width-100 popover-color" *ngIf="shareType === shareOptions.file.value"
      (click)="shareFile()">{{'SEND' | translate}}</button>
    <button class="sb-popover-action-btn width-100 popover-color" *ngIf="shareType === shareOptions.save.value"
      (click)="saveFile()">{{'SAVE' | translate}}</button>
  </div>
</ion-footer>
</ng-container>

<!--share from player-->
<ng-container *ngIf="shareFromPlayer">
  <ion-header class="sb-popover-header">
    <ion-toolbar class="sb-popover-toolbar">
      <ion-title class="sb-popover-title">{{'SHARE' | translate}}
        <ion-icon name="close" class="sb-modal-close" (click)="closePopover()"></ion-icon>
      </ion-title>
    </ion-toolbar>
  </ion-header>
  <div class="share-player-container">
    <ion-radio-group [value]="shareOptions?.link?.value">
      <ion-item lines="none">
        <ion-label>{{shareOptions.link.name | translate}}</ion-label>
        <ion-radio slot="start" value="{{shareOptions.link.value}}"></ion-radio>
      </ion-item>
      <div>
        <p class="share-url">{{shareUrl}}</p>
      </div>
      <ion-item lines="none">
        <ion-label>{{shareOptions.file.name | translate}}</ion-label>
        <ion-radio slot="start" value="{{shareOptions.file.value}}" [disabled]="!content.isAvailableLocally">
        </ion-radio>
      </ion-item>
      <div>
        <p class="share-desc">
          {{ 'DOWNLOAD_FILE_SIZE' | translate: {'%s': (content.sizeOnDevice ? content.sizeOnDevice: content.contentData.size) | fileSize } }}
        </p>
      </div>
      <ion-item *ngIf="!platform.is('ios')">
        <ion-label>{{shareOptions.save.name | translate}}</ion-label>
        <ion-radio slot="start" value="{{shareOptions.save.value}}" [disabled]="!content.isAvailableLocally">
        </ion-radio>
      </ion-item>
      <div>
        <p class="share-desc">{{'DOWNLOAD_PATH' | translate}}</p>
      </div>
    </ion-radio-group>
  </div>
  <div class="sb-popover-footer">
    <button class="sb-popover-action-btn width-100 popover-color" *ngIf="shareType === shareOptions.link.value"
      (click)="shareLink()">{{'SHARE' | translate}}</button>
    <button class="sb-popover-action-btn width-100 popover-color" *ngIf="shareType === shareOptions.file.value"
      (click)="shareFile()">{{'SEND' | translate}}</button>
    <button class="sb-popover-action-btn width-100 popover-color" *ngIf="shareType === shareOptions.save.value"
      (click)="saveFile()">{{'SAVE' | translate}}</button>
  </div>
</ng-container>

./sb-share-popup.component.scss

@import "src/assets/styles/base/_variables.scss";
@import "src/assets/styles/_variables.scss";

.flex-grow-1{
    flex-grow: 1;
}

.sb-popover .sb-popover-footer .sb-popover-action-btn.sb-btn-outline-info {
    color: $primary-color;
    margin: 0 10px;
}

.content-share{
    ion-radio{
        margin-right: 10px !important;
    }
    .share-link{
        border-bottom: 1px solid map-get($colors, empty_color);
    }
    .share-url{
        margin-left: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 15px;
        border: 1px solid $light-blue;
        padding: 5px;
        color: map-get($colors, gray_solid);
        position: relative;
        top: -0.625rem;
    }
    .share-desc{
        text-align: left;
        margin-left: 50px;
        color: map-get($colors, gray_solid);
        position: relative;
    }
    .share-info{
        background: $light-blue;
        margin-left: 20px;
        padding: 5px;
        margin-right: 15px;
        text-align: left;
        margin-bottom: 20px;
        color: map-get($colors, light_black);
        ion-icon{
            color: map-get($colors, gray_solid);
            position: relative;
            top: 0.188rem;
        }
    }
}

.share-player-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 1em;
    background: map-get($colors, white);
    padding: 16px;

    p {
        padding-top: 16px;
    }

    ion-item {
        --background: map-get($colors, white) !important;
    }

}

@media only screen and (max-width: 480px) {
    .share-player-container {
        display: inherit;
        background: map-get($colors, white);
        padding: 16px;

        p {
            padding-top: 16px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        ion-item {
            --background: map-get($colors, white);
        }

    }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""