https://github.com/acharyaks90/ng-tactful-library
Generic Library for angular common components, directive, service ,pipe
https://github.com/acharyaks90/ng-tactful-library
angular angular-orderbypipe angular-videojs angularpipe ng-tactful-library second-letter-capital video-markers video-marking video-tagging videojs videojs-angular
Last synced: 5 months ago
JSON representation
Generic Library for angular common components, directive, service ,pipe
- Host: GitHub
- URL: https://github.com/acharyaks90/ng-tactful-library
- Owner: acharyaks90
- License: mit
- Created: 2019-07-19T00:18:06.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-23T12:06:04.000Z (about 3 years ago)
- Last Synced: 2024-08-09T08:31:58.610Z (almost 2 years ago)
- Topics: angular, angular-orderbypipe, angular-videojs, angularpipe, ng-tactful-library, second-letter-capital, video-markers, video-marking, video-tagging, videojs, videojs-angular
- Language: TypeScript
- Homepage:
- Size: 809 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package//ng-tactful-lib)
[](https://www.npmjs.com/package//ng-tactful-lib)
[](https://twitter.com/acharyaks90)
# NgTactfulLib
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0.
This library was updated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.1
## Uses example of pipe for Capital Second letter
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { SecondLetterCapitalPipe } from 'ng-tactful-lib'
@NgModule({
declarations: [
AppComponent,
SecondLetterCapitalPipe,
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
In html
'anil kumar' | secondLetterCapital
```
## Uses example of order by pipe
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { OrderByPipe } from 'ng-tactful-lib'
@NgModule({
declarations: [
AppComponent,
OrderByPipe,
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
in html
*ngFor="let i of list | orderBy : 'key':'value'"
```
## Uses example of VideoJs marking
For marking in video we are using VideoJS library and providing Plugin
Existing and Out dated pluging https://github.com/spchuang/videojs-markers so credit to him.
Converted plugin code to typescript and run in Angular Environment.
Now it can be used as component and use it as view child for access methods
for dyanmic behavior in marking
# Step -1 Include videojs stlyes in angular projects main style.css
```css
@import '~video.js/dist/video-js.css';
```
# Step - 2 Importing NgTactfulLibModule library in Angular project
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgTactfulLibModule } from 'ng-tactful-lib';
@NgModule({
declarations: [
AppComponent,
,
],
imports: [
BrowserModule
NgTactfulLibModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
# Step - 3 In your component use ngtactful-video-tag Component providing download_url
```html
```
# Step - 4 In your component class use ngtactful-video-tag Component as ViewChild
Proving marking array on function onAddMarkersOnLoad(marks) also can be marked using onAddMarkers(marks)
Every time you need adding marking text as example in input box. first insert in your array then sort it
then again call onAddMarkers(marks).
Sort function also provided for refrence
for update either uptate your array and then call again onAddMarkers(marks).
Removing all - just empty your marks array and call onAddMarkers(marks).
```typescript
import { Component, OnInit, ViewChild } from '@angular/core';
import { NgTactFulVideoTagComponent } from 'ng-tactful-lib';
@Component({
selector: 'app-example-video-tag',
templateUrl: './example-video-tag.component.html',
styleUrls: ['./example-video-tag.component.scss']
})
export class ExampleVideoTagComponent implements OnInit {
@ViewChild(NgTactFulVideoTagComponent)
private videoplayer: NgTactFulVideoTagComponent;
marker:string;
marks = [{
timing:'100',
markingTexts:[{name:'test'},{name:'data'}]
},
{
timing:'300',
markingTexts:[{name:'test'}]
},
{
timing:'500',
markingTexts:[{name:'test'}]
}];
constructor() { }
videoUrl = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
ngOnInit(): void {
}
ngAfterViewInit(){
this.videoplayer.onAddMarkersOnLoad (this.marks)
}
addMarkers(){
let time = this.videoplayer.gettingTimeAndPausePlayer();
let tagIndex = this.marks.findIndex(mark => {
return parseInt(mark.timing) == time;
});
if (tagIndex !== -1) {
this.marks[tagIndex].markingTexts.push({name:this.marker})
} else {
this.marks.push({timing:time.toString() ,markingTexts:[{name:this.marker}]})
}
this.sortMarkers();
this.videoplayer.onAddMarkers(this.marks);
this.marker = ''
}
/**
* sortMarkers is a function.
* @description : Sort the tags data according to time
*
*/
sortMarkers() {
this.marks.sort((a, b) => {
return parseInt(a.timing) - parseInt(b.timing);
});
}
}
```