Maintain the version number in assets/version.js

.gitignore

@@ -37,3 +37,5 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+src/assets/version.js

.gitlab-ci.yml

@@ -26,6 +26,7 @@ build:
   script:
     - yarn install
     - yarn build --no-progress --prod --aot
+    - 'echo "let window.appVersion = \"$CI_COMMIT_TAG\";" >> dist/web-remote/assets/version.js'
   artifacts:
     paths:
       - dist/
@@ -40,7 +41,7 @@ deploy:
     - cd ../../
     - export CHECK_SUM=`sha256sum remote-$CI_COMMIT_TAG.zip | cut -d' ' -f1`
     - export FILE_SIZE=`stat -c '%s' remote-$CI_COMMIT_TAG.zip`
-    - 'echo -e "{\"latest\": {\"version\": \"$CI_COMMIT_TAG\", \"sha256\": \"$CHECK_SUM\", \"filename\": \"remote-$CI_COMMIT_TAG.zip\", \"size\": $FILE_SIZE}}" > version.json'
+    - 'echo -e "{\"latest\": {\"version\": \"$CI_COMMIT_TAG\", \"sha256\": \"$CHECK_SUM\", \"filename\": \"remote-$CI_COMMIT_TAG.zip\", \"size\": $FILE_SIZE}}" > version-$CI_COMMIT_TAG.json'
     - mkdir -p ~/.ssh
     - echo "$SSH_PRIVATE_KEY" > ~/.ssh/id_rsa
     - chmod 600 ~/.ssh/id_rsa
@@ -49,6 +50,8 @@ deploy:
     - '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'
     - ssh openlp@openlp.io "mkdir -p /home/openlp/sites/get.openlp.org/www/remote/$CI_COMMIT_TAG"
     - scp remote-$CI_COMMIT_TAG.zip openlp@openlp.io:/home/openlp/sites/get.openlp.org/www/remote/$CI_COMMIT_TAG/
-    - scp version.json openlp@openlp.io:/home/openlp/sites/get.openlp.org/www/remote/
+    - scp version-$CI_COMMIT_TAG.json openlp@openlp.io:/home/openlp/sites/get.openlp.org/www/remote/
+    - ssh openlp@openlp.io "rm /home/openlp/sites/get.openlp.org/www/remote/version.json"
+    - scp version-$CI_COMMIT_TAG.json openlp@openlp.io:/home/openlp/sites/get.openlp.org/www/remote/version.json
   only:
     - tags

src/app/app.component.ts

@@ -4,9 +4,10 @@ import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 
 import { State } from './responses';
 import { OpenLPService } from './openlp.service';
+import { WindowRef } from './window-ref.service';
 import { PageTitleService } from './page-title.service';
 import { LoginComponent } from './components/login/login.component';
-import { version } from '../../package.json';
+// import { version } from '../../package.json';
 
 @Component({
   selector: 'app-root',
@@ -18,12 +19,13 @@ export class AppComponent implements OnInit {
   state = new State();
   showLogin = false;
   pageTitle = 'OpenLP Remote';
-  appVersion = version;
+  appVersion = '0.0';
 
   constructor(private pageTitleService: PageTitleService, private openlpService: OpenLPService,
-              private dialog: MatDialog) {
+              private dialog: MatDialog, private windowRef: WindowRef) {
     pageTitleService.pageTitleChanged$.subscribe(pageTitle => this.pageTitle = pageTitle);
     openlpService.stateChanged$.subscribe(item => this.state = item);
+    this.appVersion = windowRef.nativeWindow.appVersion || '0.0';
   }
 
   ngOnInit(): void {

src/app/app.module.ts

@@ -1,7 +1,10 @@
-import { BrowserModule, Title } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { BrowserModule, Title } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 
+import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatDialogModule } from '@angular/material/dialog';
@@ -18,19 +21,17 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { AppComponent } from './app.component';
 import { PageTitleService } from './page-title.service';
 import { OpenLPService } from './openlp.service';
-import { HttpClientModule } from '@angular/common/http';
+import { WindowRef } from './window-ref.service';
 import { AppRoutingModule } from './app.routing';
 import { ServiceComponent } from './components/service/service.component';
 import { AlertComponent } from './components/alert/alert.component';
 import { SearchComponent } from './components/search/search.component';
 import { SearchOptionsComponent } from './components/search/search-options/search-options.component';
 import { SlidesComponent } from './components/slides/slides.component';
-import { FormsModule } from '@angular/forms';
 import { ChordViewComponent } from './components/chord-view/chord-view.component';
 import { StageViewComponent } from './components/stage-view/stage-view.component';
 import { Nl2BrPipe } from './components/stage-view/nl2br.pipe';
@@ -91,7 +92,8 @@ import { ServiceListComponent } from './components/service/service-list/service-
   providers: [
     PageTitleService,
     OpenLPService,
-    Title
+    Title,
+    WindowRef
   ],
   entryComponents: [
     LoginComponent

src/app/window-ref.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { WindowRef} from './window-ref.service';
+
+describe('WindowRef', () => {
+  let service: WindowRef;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(WindowRef);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/window-ref.service.ts

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+
+function _window(): any {
+  return window;
+}
+
+
+@Injectable({providedIn: 'root'})
+export class WindowRef {
+
+  get nativeWindow(): any {
+    return _window();
+  }
+}

src/index.html

@@ -7,6 +7,7 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
+  <script src="/assets/version.js"></script>
 </head>
 
 <body>