2020-03-29 12:28:39 -04:00
|
|
|
import {
|
|
|
|
animate,
|
|
|
|
state,
|
|
|
|
style,
|
|
|
|
transition,
|
2021-09-01 19:01:01 -04:00
|
|
|
trigger,
|
|
|
|
} from "@angular/animations";
|
|
|
|
import {
|
|
|
|
AfterViewInit,
|
|
|
|
ChangeDetectorRef,
|
|
|
|
Component,
|
|
|
|
OnDestroy,
|
|
|
|
OnInit,
|
|
|
|
} from "@angular/core";
|
2018-05-14 00:32:13 -04:00
|
|
|
import { ActivatedRoute } from "@angular/router";
|
2019-03-24 17:07:03 -04:00
|
|
|
import { CapableWidget, WIDGET_API_VERSION_OPENID } from "../capable-widget";
|
2021-09-01 19:01:01 -04:00
|
|
|
import { fromEvent } from "rxjs";
|
2020-03-29 12:28:39 -04:00
|
|
|
import {
|
2021-09-01 19:01:01 -04:00
|
|
|
distinctUntilChanged,
|
|
|
|
filter,
|
|
|
|
map,
|
|
|
|
pairwise,
|
|
|
|
share,
|
|
|
|
throttleTime,
|
|
|
|
} from "rxjs/operators";
|
2018-05-14 00:32:13 -04:00
|
|
|
import { Subscription } from "rxjs/Subscription";
|
|
|
|
import { ScalarWidgetApi } from "../../shared/services/scalar/scalar-widget.api";
|
|
|
|
import { StickerApiService } from "../../shared/services/integrations/sticker-api.service";
|
|
|
|
import { SessionStorage } from "../../shared/SessionStorage";
|
|
|
|
import { ScalarServerApiService } from "../../shared/services/scalar/scalar-server-api.service";
|
2021-09-01 19:01:01 -04:00
|
|
|
import {
|
|
|
|
FE_Sticker,
|
|
|
|
FE_UserStickerPack,
|
|
|
|
} from "../../shared/models/integration";
|
2018-05-14 00:32:13 -04:00
|
|
|
import { MediaService } from "../../shared/services/media.service";
|
2018-10-24 01:55:29 -04:00
|
|
|
import { WIDGET_STICKER_PICKER } from "../../shared/models/widget";
|
2018-05-14 00:32:13 -04:00
|
|
|
|
|
|
|
@Component({
|
2021-09-01 19:01:01 -04:00
|
|
|
selector: "app-generic-widget-wrapper",
|
2018-05-14 00:32:13 -04:00
|
|
|
templateUrl: "sticker-picker.component.html",
|
|
|
|
styleUrls: ["sticker-picker.component.scss"],
|
2020-03-29 12:28:39 -04:00
|
|
|
animations: [
|
2021-09-01 19:01:01 -04:00
|
|
|
trigger("hideList", [
|
|
|
|
state("hidden", style({ opacity: 0, transform: "translateY(100%)" })),
|
|
|
|
state("visible", style({ opacity: 1, transform: "translateY(0)" })),
|
|
|
|
transition("* => *", animate("200ms ease-in")),
|
|
|
|
]),
|
|
|
|
],
|
2018-05-14 00:32:13 -04:00
|
|
|
})
|
2021-09-01 19:01:01 -04:00
|
|
|
export class StickerPickerWidgetWrapperComponent
|
|
|
|
extends CapableWidget
|
|
|
|
implements OnInit, OnDestroy, AfterViewInit {
|
2018-05-14 00:32:13 -04:00
|
|
|
public isLoading = true;
|
2020-03-29 12:28:39 -04:00
|
|
|
public isListVisible = true;
|
2018-05-14 00:32:13 -04:00
|
|
|
public authError = false;
|
|
|
|
public packs: FE_UserStickerPack[];
|
|
|
|
|
|
|
|
private stickerWidgetApiSubscription: Subscription;
|
|
|
|
|
2021-09-01 19:01:01 -04:00
|
|
|
constructor(
|
|
|
|
activatedRoute: ActivatedRoute,
|
|
|
|
private media: MediaService,
|
|
|
|
private scalarApi: ScalarServerApiService,
|
|
|
|
private stickerApi: StickerApiService,
|
|
|
|
private changeDetector: ChangeDetectorRef
|
|
|
|
) {
|
2018-05-14 00:32:13 -04:00
|
|
|
super();
|
|
|
|
this.supportsStickers = true;
|
|
|
|
|
2021-09-01 19:01:01 -04:00
|
|
|
const params: any = activatedRoute.snapshot.queryParams;
|
2018-05-20 19:41:06 -04:00
|
|
|
|
|
|
|
let token = params.scalar_token;
|
|
|
|
if (!token) token = localStorage.getItem("dim-scalar-token");
|
|
|
|
else localStorage.setItem("dim-scalar-token", token);
|
|
|
|
|
2018-05-14 00:32:13 -04:00
|
|
|
if (!params.widgetId) {
|
|
|
|
console.error("No widgetId query parameter");
|
|
|
|
this.authError = true;
|
2018-05-20 20:25:37 -04:00
|
|
|
this.isLoading = false;
|
2018-05-14 00:32:13 -04:00
|
|
|
} else {
|
|
|
|
ScalarWidgetApi.widgetId = params.widgetId;
|
|
|
|
}
|
2018-05-20 19:41:06 -04:00
|
|
|
|
2018-05-20 20:25:37 -04:00
|
|
|
if (!this.authError) {
|
|
|
|
SessionStorage.scalarToken = token;
|
|
|
|
this.authError = !token;
|
|
|
|
this.isLoading = !this.authError;
|
|
|
|
}
|
2018-05-14 00:32:13 -04:00
|
|
|
}
|
|
|
|
|
2018-05-20 19:41:06 -04:00
|
|
|
public ngOnInit() {
|
2018-05-14 00:32:13 -04:00
|
|
|
super.ngOnInit();
|
2021-09-01 19:01:01 -04:00
|
|
|
this.stickerWidgetApiSubscription =
|
|
|
|
ScalarWidgetApi.requestReceived.subscribe((request) => {
|
|
|
|
if (request.action === "visibility") {
|
|
|
|
if ((<any>request).visible) this.loadStickers();
|
|
|
|
ScalarWidgetApi.replyAcknowledge(request);
|
|
|
|
}
|
|
|
|
});
|
2018-05-14 00:32:13 -04:00
|
|
|
this.loadStickers();
|
|
|
|
}
|
|
|
|
|
|
|
|
public ngOnDestroy() {
|
|
|
|
super.ngOnDestroy();
|
2021-09-01 19:01:01 -04:00
|
|
|
if (this.stickerWidgetApiSubscription)
|
|
|
|
this.stickerWidgetApiSubscription.unsubscribe();
|
2018-05-14 00:32:13 -04:00
|
|
|
}
|
|
|
|
|
2020-03-29 12:28:39 -04:00
|
|
|
public ngAfterViewInit() {
|
2021-09-01 19:01:01 -04:00
|
|
|
const scroll$ = fromEvent(window, "scroll").pipe(
|
|
|
|
throttleTime(10),
|
|
|
|
map(() => window.pageYOffset),
|
|
|
|
pairwise(),
|
|
|
|
map(([y1, y2]): string => (y2 < y1 ? "up" : "down")),
|
|
|
|
distinctUntilChanged(),
|
|
|
|
share()
|
2020-03-29 12:28:39 -04:00
|
|
|
);
|
|
|
|
|
2021-09-01 19:01:01 -04:00
|
|
|
const scrollUp$ = scroll$.pipe(filter((direction) => direction === "up"));
|
2020-03-29 12:28:39 -04:00
|
|
|
|
|
|
|
const scrollDown = scroll$.pipe(
|
2021-09-01 19:01:01 -04:00
|
|
|
filter((direction) => direction === "down")
|
2020-03-29 12:28:39 -04:00
|
|
|
);
|
|
|
|
|
|
|
|
scrollUp$.subscribe(() => (this.isListVisible = true));
|
|
|
|
scrollDown.subscribe(() => (this.isListVisible = false));
|
2021-09-01 19:01:01 -04:00
|
|
|
}
|
2020-03-29 12:28:39 -04:00
|
|
|
|
2019-03-24 17:07:03 -04:00
|
|
|
protected onSupportedVersionsFound(): void {
|
|
|
|
super.onSupportedVersionsFound();
|
|
|
|
|
2021-09-01 19:01:01 -04:00
|
|
|
if (
|
|
|
|
this.authError &&
|
|
|
|
this.doesSupportAtLeastVersion(WIDGET_API_VERSION_OPENID)
|
|
|
|
) {
|
2019-03-24 17:07:03 -04:00
|
|
|
this.isLoading = true;
|
|
|
|
this.changeDetector.detectChanges();
|
|
|
|
|
2021-09-01 19:01:01 -04:00
|
|
|
this.getOpenIdInfo().then(async (response) => {
|
2019-03-24 17:07:03 -04:00
|
|
|
if (response.blocked) {
|
|
|
|
this.isLoading = false;
|
|
|
|
this.authError = true;
|
|
|
|
this.changeDetector.detectChanges();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
try {
|
2021-09-01 19:01:01 -04:00
|
|
|
const registerResponse = await this.scalarApi.register(
|
|
|
|
response.openId
|
|
|
|
);
|
|
|
|
localStorage.setItem(
|
|
|
|
"dim-scalar-token",
|
|
|
|
registerResponse.scalar_token
|
|
|
|
);
|
2019-03-24 17:07:03 -04:00
|
|
|
SessionStorage.scalarToken = registerResponse.scalar_token;
|
|
|
|
this.authError = !SessionStorage.scalarToken;
|
|
|
|
this.isLoading = false;
|
|
|
|
this.loadStickers();
|
|
|
|
} catch (e) {
|
|
|
|
console.error(e);
|
|
|
|
this.isLoading = false;
|
|
|
|
this.authError = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.changeDetector.detectChanges();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-09-01 19:01:01 -04:00
|
|
|
public getThumbnailUrl(
|
|
|
|
mxc: string,
|
|
|
|
width: number,
|
|
|
|
height: number,
|
|
|
|
method: "crop" | "scale" = "scale"
|
|
|
|
): string {
|
2018-05-14 00:32:13 -04:00
|
|
|
return this.media.getThumbnailUrl(mxc, width, height, method, true);
|
|
|
|
}
|
|
|
|
|
|
|
|
private async loadStickers() {
|
|
|
|
if (this.authError) return; // Don't bother
|
|
|
|
|
2018-05-20 19:41:06 -04:00
|
|
|
if (!SessionStorage.userId) {
|
|
|
|
try {
|
|
|
|
const info = await this.scalarApi.getAccount();
|
|
|
|
SessionStorage.userId = info.user_id;
|
2021-09-01 19:01:01 -04:00
|
|
|
console.log(
|
|
|
|
"Dimension scalar_token belongs to " + SessionStorage.userId
|
|
|
|
);
|
2018-05-20 19:41:06 -04:00
|
|
|
} catch (e) {
|
|
|
|
console.error(e);
|
|
|
|
this.authError = true;
|
2018-05-20 20:25:37 -04:00
|
|
|
this.isLoading = false;
|
2018-05-20 19:41:06 -04:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-05-14 00:32:13 -04:00
|
|
|
console.log("Attempting to load available stickers...");
|
|
|
|
try {
|
|
|
|
const packs = await this.stickerApi.getPacks();
|
2021-09-01 19:01:01 -04:00
|
|
|
this.packs = packs.filter((p) => p.isSelected);
|
|
|
|
console.log(
|
|
|
|
"User has " +
|
|
|
|
this.packs.length +
|
|
|
|
"/" +
|
|
|
|
packs.length +
|
|
|
|
" sticker packs selected"
|
|
|
|
);
|
2018-05-14 00:32:13 -04:00
|
|
|
this.isLoading = false;
|
2019-04-18 00:58:18 -04:00
|
|
|
this.changeDetector.markForCheck();
|
2018-05-14 00:32:13 -04:00
|
|
|
} catch (e) {
|
|
|
|
console.error(e);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-03-29 12:28:39 -04:00
|
|
|
public scrollHorizontal(event: WheelEvent): void {
|
2021-09-01 19:01:01 -04:00
|
|
|
document.getElementsByClassName("sticker-pack-list")[0].scrollLeft +=
|
|
|
|
event.deltaY;
|
2020-03-29 12:28:39 -04:00
|
|
|
event.preventDefault();
|
|
|
|
}
|
|
|
|
|
|
|
|
public scrollToPack(id: string) {
|
|
|
|
const el = document.getElementById(id);
|
2021-09-01 19:01:01 -04:00
|
|
|
el.scrollIntoView({ behavior: "smooth" });
|
2020-03-29 12:28:39 -04:00
|
|
|
}
|
|
|
|
|
2018-05-14 00:32:13 -04:00
|
|
|
public sendSticker(sticker: FE_Sticker, pack: FE_UserStickerPack) {
|
|
|
|
ScalarWidgetApi.sendSticker(sticker, pack);
|
|
|
|
}
|
2018-10-24 01:55:29 -04:00
|
|
|
|
|
|
|
public openIntegrationManager() {
|
2021-09-01 19:01:01 -04:00
|
|
|
ScalarWidgetApi.openIntegrationManager(
|
|
|
|
WIDGET_STICKER_PICKER[0],
|
|
|
|
ScalarWidgetApi.widgetId
|
|
|
|
);
|
2018-10-24 01:55:29 -04:00
|
|
|
}
|
2018-05-14 00:32:13 -04:00
|
|
|
}
|