Skip to content
Next
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Switch to GitLab Next
Sign in / Register
Toggle navigation
Minds Frontend
Project
Project
Details
Activity
Releases
Dependency List
Cycle Analytics
Insights
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Locked Files
Issues
868
Issues
868
List
Boards
Labels
Service Desk
Milestones
Merge Requests
45
Merge Requests
45
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Packages
Packages
List
Container Registry
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Minds
Minds Frontend
Commits
50ab1ddd
Commit
50ab1ddd
authored
3 minutes ago
by
Olivia Madrid
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
(feat): Media modal - click video auto opens modal
parent
1787d182
feat/media-modal-1539
1 merge request
!467
WIP: (feat): Media modal
Pipeline
#75019843
running with stages
Changes
8
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
53 additions
and
26 deletions
+53
-26
direct-http.component.html
...media/components/video/players/direct-http.component.html
+1
-1
direct-http.component.ts
...s/media/components/video/players/direct-http.component.ts
+14
-2
torrent.component.html
...les/media/components/video/players/torrent.component.html
+1
-1
torrent.component.ts
...dules/media/components/video/players/torrent.component.ts
+12
-0
video.component.html
src/app/modules/media/components/video/video.component.html
+2
-0
video.component.ts
src/app/modules/media/components/video/video.component.ts
+12
-15
modal.component.html
src/app/modules/media/modal/modal.component.html
+3
-3
modal.component.ts
src/app/modules/media/modal/modal.component.ts
+8
-4
No files found.
src/app/modules/media/components/video/players/direct-http.component.html
View file @
50ab1ddd
<video
[
src
]="
src
"
(
click
)="
toggle
()"
(
click
)="
requestMediaModal
()"
[
autoplay
]="
autoplay
"
[
poster
]="
poster
"
[
muted
]="
muted
"
...
...
This diff is collapsed.
Click to expand it.
src/app/modules/media/components/video/players/direct-http.component.ts
View file @
50ab1ddd
...
...
@@ -2,7 +2,9 @@ import {
ChangeDetectionStrategy
,
ChangeDetectorRef
,
Component
,
ElementRef
,
EventEmitter
,
Input
,
OnDestroy
,
OnInit
,
Output
,
ViewChild
}
from
'
@angular/core
'
;
import
{
Router
}
from
'
@angular/router
'
;
import
{
MindsPlayerInterface
}
from
'
./player.interface
'
;
import
isMobile
from
'
../../../../../helpers/is-mobile
'
;
@
Component
({
moduleId
:
module
.
id
,
...
...
@@ -16,6 +18,7 @@ export class MindsVideoDirectHttpPlayer implements OnInit, OnDestroy, MindsPlaye
@
Input
()
muted
:
boolean
=
false
;
@
Input
()
poster
:
string
=
''
;
@
Input
()
autoplay
:
boolean
=
false
;
@
Input
()
guid
:
string
;
src
:
string
;
@
Input
(
'
src
'
)
set
_src
(
src
:
string
)
{
...
...
@@ -35,13 +38,14 @@ export class MindsVideoDirectHttpPlayer implements OnInit, OnDestroy, MindsPlaye
@
Output
()
onPause
:
EventEmitter
<
HTMLVideoElement
>
=
new
EventEmitter
();
@
Output
()
onEnd
:
EventEmitter
<
HTMLVideoElement
>
=
new
EventEmitter
();
@
Output
()
onError
:
EventEmitter
<
{
player
:
HTMLVideoElement
,
e
}
>
=
new
EventEmitter
();
@
Output
()
triggerMediaModal
:
EventEmitter
<
any
>
=
new
EventEmitter
();
loading
:
boolean
=
false
;
constructor
(
protected
cd
:
ChangeDetectorRef
protected
cd
:
ChangeDetectorRef
,
private
router
:
Router
,
)
{
}
protected
_emitPlay
=
()
=>
this
.
onPlay
.
emit
(
this
.
getPlayer
());
protected
_emitPause
=
()
=>
this
.
onPause
.
emit
(
this
.
getPlayer
());
protected
_emitEnd
=
()
=>
this
.
onEnd
.
emit
(
this
.
getPlayer
());
...
...
@@ -170,4 +174,12 @@ export class MindsVideoDirectHttpPlayer implements OnInit, OnDestroy, MindsPlaye
this
.
cd
.
markForCheck
();
this
.
cd
.
detectChanges
();
}
requestMediaModal
()
{
// Mobile users go to media page instead of modal
if
(
isMobile
())
{
this
.
router
.
navigate
([
`/media/
${
this
.
guid
}
`
]);
}
this
.
triggerMediaModal
.
emit
();
}
}
This diff is collapsed.
Click to expand it.
src/app/modules/media/components/video/players/torrent.component.html
View file @
50ab1ddd
<video
(
click
)="
toggle
()"
(
click
)="
requestMediaModal
()"
[
poster
]="
poster
"
[
muted
]="
muted
"
preload=
"none"
...
...
This diff is collapsed.
Click to expand it.
src/app/modules/media/components/video/players/torrent.component.ts
View file @
50ab1ddd
...
...
@@ -3,10 +3,12 @@ import {
ChangeDetectionStrategy
,
ChangeDetectorRef
,
Component
,
ElementRef
,
EventEmitter
,
Input
,
OnDestroy
,
OnInit
,
Output
,
ViewChild
}
from
'
@angular/core
'
;
import
{
Router
}
from
'
@angular/router
'
;
import
{
MindsPlayerInterface
}
from
'
./player.interface
'
;
import
{
WebtorrentService
}
from
'
../../../../webtorrent/webtorrent.service
'
;
import
{
Client
}
from
'
../../../../../services/api/client
'
;
import
base64ToBlob
from
'
../../../../../helpers/base64-to-blob
'
;
import
isMobile
from
'
../../../../../helpers/is-mobile
'
;
@
Component
({
moduleId
:
module
.
id
,
...
...
@@ -20,6 +22,7 @@ export class MindsVideoTorrentPlayer implements OnInit, AfterViewInit, OnDestroy
@
Input
()
muted
:
boolean
=
false
;
@
Input
()
poster
:
string
=
''
;
@
Input
()
autoplay
:
boolean
=
false
;
@
Input
()
guid
:
string
;
src
:
string
;
@
Input
(
'
src
'
)
set
_src
(
src
:
string
)
{
...
...
@@ -38,6 +41,7 @@ export class MindsVideoTorrentPlayer implements OnInit, AfterViewInit, OnDestroy
@
Output
()
onPause
:
EventEmitter
<
HTMLVideoElement
>
=
new
EventEmitter
();
@
Output
()
onEnd
:
EventEmitter
<
HTMLVideoElement
>
=
new
EventEmitter
();
@
Output
()
onError
:
EventEmitter
<
{
player
,
e
}
>
=
new
EventEmitter
();
@
Output
()
triggerMediaModal
:
EventEmitter
<
any
>
=
new
EventEmitter
();
initialized
:
boolean
=
false
;
loading
:
boolean
=
false
;
...
...
@@ -61,6 +65,7 @@ export class MindsVideoTorrentPlayer implements OnInit, AfterViewInit, OnDestroy
protected
cd
:
ChangeDetectorRef
,
protected
client
:
Client
,
protected
webtorrent
:
WebtorrentService
,
private
router
:
Router
,
)
{
}
protected
_emitPlay
=
()
=>
this
.
onPlay
.
emit
(
this
.
getPlayer
());
...
...
@@ -353,4 +358,11 @@ export class MindsVideoTorrentPlayer implements OnInit, AfterViewInit, OnDestroy
this
.
torrentReady
=
false
;
}
}
requestMediaModal
()
{
// Mobile users go to media page instead of modal
if
(
isMobile
())
{
this
.
router
.
navigate
([
`/media/
${
this
.
guid
}
`
]);
}
this
.
triggerMediaModal
.
emit
();
}
}
This diff is collapsed.
Click to expand it.
src/app/modules/media/components/video/video.component.html
View file @
50ab1ddd
...
...
@@ -5,6 +5,7 @@
[
poster
]="
poster
"
[
muted
]="
muted
"
[
autoplay
]="
autoplay
"
[
guid
]="
guid
"
(
onPlay
)="
onPlay
()"
(
onPause
)="
onPause
()"
(
onEnd
)="
onEnd
()"
...
...
@@ -18,6 +19,7 @@
[
poster
]="
poster
"
[
muted
]="
muted
"
[
autoplay
]="
autoplay
"
[
guid
]="
guid
"
(
onPlay
)="
onPlay
()"
(
onPause
)="
onPause
()"
(
onEnd
)="
onEnd
()"
...
...
This diff is collapsed.
Click to expand it.
src/app/modules/media/components/video/video.component.ts
View file @
50ab1ddd
import
{
Component
,
ElementRef
,
Input
,
Output
,
EventEmitter
,
ViewChild
,
ChangeDetectorRef
}
from
'
@angular/core
'
;
import
{
Router
}
from
'
@angular/router
'
;
//
import { Router } from '@angular/router';
import
{
MindsVideoProgressBar
}
from
'
./progress-bar/progress-bar.component
'
;
import
{
MindsVideoVolumeSlider
}
from
'
./volume-slider/volume-slider.component
'
;
...
...
@@ -8,7 +8,7 @@ import { ScrollService } from '../../../../services/ux/scroll';
import
{
MindsPlayerInterface
}
from
'
./players/player.interface
'
;
import
{
WebtorrentService
}
from
'
../../../webtorrent/webtorrent.service
'
;
import
{
SOURCE_CANDIDATE_PICK_ZIGZAG
,
SourceCandidates
}
from
'
./source-candidates
'
;
import
isMobile
from
'
../../../../helpers/is-mobile
'
;
//
import isMobile from '../../../../helpers/is-mobile';
@
Component
({
selector
:
'
m-video
'
,
...
...
@@ -26,7 +26,7 @@ export class MindsVideoComponent {
@
Input
()
poster
:
string
=
''
;
@
Output
(
'
finished
'
)
finished
:
EventEmitter
<
any
>
=
new
EventEmitter
();
@
Output
()
triggerMediaModal
:
EventEmitter
<
any
>
=
new
EventEmitter
();
//
@Output() triggerMediaModal: EventEmitter<any> = new EventEmitter();
@
ViewChild
(
'
progressBar
'
,
{
static
:
false
})
progressBar
:
MindsVideoProgressBar
;
@
ViewChild
(
'
volumeSlider
'
,
{
static
:
false
})
volumeSlider
:
MindsVideoVolumeSlider
;
...
...
@@ -73,7 +73,7 @@ export class MindsVideoComponent {
public
client
:
Client
,
protected
webtorrent
:
WebtorrentService
,
protected
cd
:
ChangeDetectorRef
,
private
router
:
Router
,
//
private router: Router,
)
{
}
ngOnInit
()
{
...
...
@@ -327,18 +327,15 @@ export class MindsVideoComponent {
}
}
requestMediaModal
()
{
// TODO OJM
// this should be triggered on play
// this.playerRef.pause(); //no need anymore
// Mobile users go to media page instead of modal
if
(
isMobile
())
{
this
.
router
.
navigate
([
`/media/
${
this
.
guid
}
`
]);
}
// requestMediaModal() {
// // this.playerRef.pause(); //no need anymore
// // Mobile users go to media page instead of modal
// if (isMobile()) {
// this.router.navigate([`/media/${this.guid}`]);
// }
this
.
triggerMediaModal
.
emit
();
}
//
this.triggerMediaModal.emit();
//
}
detectChanges
()
{
this
.
cd
.
markForCheck
();
...
...
This diff is collapsed.
Click to expand it.
src/app/modules/media/modal/modal.component.html
View file @
50ab1ddd
...
...
@@ -27,7 +27,7 @@
[
style
.
width
]="
mediaWidth
+
'
px
'"
[
style
.
height
]="
mediaHeight
+
'
px
'"
>
<img
[
src
]="
entity
.
thumbnail
"
<img
[
src
]="
thumbnail
"
(
load
)="
inProgress =
!inProgress"
[
style
.
height
]="
entity
.
height
+
'
px
'"
...
...
@@ -62,7 +62,7 @@
<div
class=
"m-mediaModal__overlayTitleWrapper"
>
<!-- TITLE -->
<span
class=
"m-mediaModal__overlayTitle m-mediaModal__overlayTitle--notFullscreen"
*
ngIf=
"!isFullscreen"
>
<a
[
routerLink
]="['/
media
',
entity
.
entity_guid
]"
>
{{
entity.
title}}
</a>
<a
[
routerLink
]="['/
media
',
entity
.
entity_guid
]"
>
{{title}}
</a>
</span>
<!-- TITLE: FULLSCREEN -->
<span
class=
"m-mediaModal__overlayTitle m-mediaModal__overlayTitle--fullscreen"
*
ngIf=
"isFullscreen"
>
...
...
@@ -71,7 +71,7 @@
<span
title=
{{entity.ownerObj.name}}
>
{{entity.ownerObj.name}}
</span>
</a>
<div
class=
"m-mediaModal__overlayTitleSeparator"
></div>
<a
[
routerLink
]="['/
media
',
entity
.
entity_guid
]"
>
{{
entity.
title}}
</a>
<a
[
routerLink
]="['/
media
',
entity
.
entity_guid
]"
>
{{title}}
</a>
</span>
</div>
<!-- FULLSCREEN BUTTON -->
...
...
This diff is collapsed.
Click to expand it.
src/app/modules/media/modal/modal.component.ts
View file @
50ab1ddd
...
...
@@ -48,6 +48,10 @@ export class MediaModalComponent implements OnInit, OnDestroy {
maxHeight
:
number
;
minStageHeight
:
number
;
title
:
string
=
''
;
thumbnail
:
string
=
''
;
boosted
:
boolean
=
false
;
isOpen
:
boolean
=
false
;
// Used for backdrop click detection hack
isOpenTimeout
:
any
=
null
;
// Used for backdrop click detection hack
...
...
@@ -74,16 +78,16 @@ export class MediaModalComponent implements OnInit, OnDestroy {
// this.isTablet = isMobileOrTablet() && !isMobile();
this
.
entity
.
thumbnail
=
`
${
this
.
minds
.
cdn_url
}
fs/v1/thumbnail/
${
this
.
entity
.
entity_guid
}
/xlarge`
;
this
.
entity
.
boosted
=
this
.
entity
.
boosted
||
this
.
entity
.
p2p_boosted
;
this
.
thumbnail
=
`
${
this
.
minds
.
cdn_url
}
fs/v1/thumbnail/
${
this
.
entity
.
entity_guid
}
/xlarge`
;
this
.
boosted
=
this
.
entity
.
boosted
||
this
.
entity
.
p2p_boosted
;
// Set title
if
(
!
this
.
entity
.
title
)
{
if
(
!
this
.
entity
.
message
)
{
// ? is there ever a case where there is a message but no title?
this
.
entity
.
title
=
`
${
this
.
entity
.
ownerObj
.
name
}
's post`
;
this
.
title
=
`
${
this
.
entity
.
ownerObj
.
name
}
's post`
;
}
else
{
this
.
entity
.
title
=
this
.
entity
.
message
;
this
.
title
=
this
.
entity
.
message
;
}
}
...
...
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment