0:03
hello everyone and it's nice to to be
0:05
hello everyone and it's nice to to be
0:05
hello everyone and it's nice to to be here and I know I I always wanted to
0:08
here and I know I I always wanted to
0:08
here and I know I I always wanted to share this topic with with people
0:09
share this topic with with people
0:09
share this topic with with people because I find it pretty interesting
0:12
because I find it pretty interesting
0:12
because I find it pretty interesting because it's kind of a niche topic
0:14
because it's kind of a niche topic
0:14
because it's kind of a niche topic because no we are not so used to develop
0:16
because no we are not so used to develop
0:16
because no we are not so used to develop video platforms with react especially
0:19
video platforms with react especially
0:19
video platforms with react especially with react native so without further Ado
0:21
with react native so without further Ado
0:21
with react native so without further Ado let's start and welcome to the store
0:23
let's start and welcome to the store
0:23
let's start and welcome to the store which is a fouryear retrospective in
0:25
which is a fouryear retrospective in
0:25
which is a fouryear retrospective in building a video player from scratch
0:27
building a video player from scratch
0:27
building a video player from scratch with react native but before starting we
0:30
with react native but before starting we
0:30
with react native but before starting we I wanted to State what is a
0:32
I wanted to State what is a
0:32
I wanted to State what is a retrospective because I would love to
0:34
retrospective because I would love to
0:34
retrospective because I would love to structure this talk as a pure
0:37
structure this talk as a pure
0:37
structure this talk as a pure retrospective a retrospective I looked
0:39
retrospective a retrospective I looked
0:39
retrospective a retrospective I looked for the definition and I came across
0:41
for the definition and I came across
0:41
for the definition and I came across this one which is a retrospective is a
0:43
this one which is a retrospective is a
0:43
this one which is a retrospective is a chance for a team to reflect and learn
0:45
chance for a team to reflect and learn
0:45
chance for a team to reflect and learn from the past without structured meeting
0:47
from the past without structured meeting
0:47
from the past without structured meeting so uh in terms of retrospective we
0:50
so uh in terms of retrospective we
0:50
so uh in terms of retrospective we intend a meeting or a session in which
0:53
intend a meeting or a session in which
0:53
intend a meeting or a session in which we take a look at what we did so all the
0:56
we take a look at what we did so all the
0:56
we take a look at what we did so all the good things we did in a project all the
0:58
good things we did in a project all the
0:58
good things we did in a project all the bad things we did so what didn't go well
1:01
bad things we did so what didn't go well
1:01
bad things we did so what didn't go well we come out with some action items and
1:04
we come out with some action items and
1:04
we come out with some action items and some possible solution so a
1:05
some possible solution so a
1:05
some possible solution so a retrospective is an occasion for every
1:07
retrospective is an occasion for every
1:07
retrospective is an occasion for every team to look back reflect to the past
1:10
team to look back reflect to the past
1:10
team to look back reflect to the past and move on improving the product
1:12
and move on improving the product
1:12
and move on improving the product because I love working in product in in
1:15
because I love working in product in in
1:15
because I love working in product in in so I'm technically lead in this company
1:17
so I'm technically lead in this company
1:17
so I'm technically lead in this company which is called learn and I am a
1:19
which is called learn and I am a
1:19
which is called learn and I am a software engineer which is very very
1:21
software engineer which is very very
1:21
software engineer which is very very pass which is very very passionate about
1:23
pass which is very very passionate about
1:23
pass which is very very passionate about product development so everything around
1:25
product development so everything around
1:25
product development so everything around product uh marketing uh design UI ux I
1:29
product uh marketing uh design UI ux I
1:29
product uh marketing uh design UI ux I love this kind kind of stuffs so uh I
1:31
love this kind kind of stuffs so uh I
1:31
love this kind kind of stuffs so uh I always focus it on product development
1:33
always focus it on product development
1:33
always focus it on product development and this is a product which was born a
1:36
and this is a product which was born a
1:36
and this is a product which was born a lot of time ago for years which is a
1:38
lot of time ago for years which is a
1:38
lot of time ago for years which is a startup we did found in 2020 in Italy
1:41
startup we did found in 2020 in Italy
1:41
startup we did found in 2020 in Italy but I will talk about it later so what
1:44
but I will talk about it later so what
1:44
but I will talk about it later so what we going to see today we are going to
1:46
we going to see today we are going to
1:46
we going to see today we are going to see a project overview so the project of
1:49
see a project overview so the project of
1:49
see a project overview so the project of the application we will take a look at
1:51
the application we will take a look at
1:51
the application we will take a look at what went well during the development
1:53
what went well during the development
1:53
what went well during the development process we are going to take a look at
1:55
process we are going to take a look at
1:55
process we are going to take a look at what didn't go well which is in my
1:57
what didn't go well which is in my
1:57
what didn't go well which is in my opinion the most important part of the
1:59
opinion the most important part of the
1:59
opinion the most important part of the the talk then we will move on to the
2:01
the talk then we will move on to the
2:01
the talk then we will move on to the lessons learned to hopefully save you
2:03
lessons learned to hopefully save you
2:03
lessons learned to hopefully save you some errors that I I've done in the past
2:05
some errors that I I've done in the past
2:05
some errors that I I've done in the past while developing it and we will after
2:08
while developing it and we will after
2:08
while developing it and we will after review all the action items so all the
2:10
review all the action items so all the
2:10
review all the action items so all the stuff that we we can do to improve the
2:12
stuff that we we can do to improve the
2:12
stuff that we we can do to improve the product and to keep achieving uh uh
2:14
product and to keep achieving uh uh
2:14
product and to keep achieving uh uh Flawless development and so let's start
2:17
Flawless development and so let's start
2:17
Flawless development and so let's start with a project overview learn is a
2:20
with a project overview learn is a
2:20
with a project overview learn is a startup as I said before which was born
2:22
startup as I said before which was born
2:22
startup as I said before which was born in 2020 in Italy uh it was bootstrapped
2:25
in 2020 in Italy uh it was bootstrapped
2:25
in 2020 in Italy uh it was bootstrapped without founding and the main product is
2:28
without founding and the main product is
2:28
without founding and the main product is a video platform so we are video
2:29
a video platform so we are video
2:29
a video platform so we are video streaming services which offer a lot of
2:32
streaming services which offer a lot of
2:32
streaming services which offer a lot of uh digital marketing courses
2:34
uh digital marketing courses
2:34
uh digital marketing courses advertisement courses so the goal is to
2:36
advertisement courses so the goal is to
2:36
advertisement courses so the goal is to make digital competences accessible to
2:39
make digital competences accessible to
2:39
make digital competences accessible to everyone which everyone so the main
2:42
everyone which everyone so the main
2:42
everyone which everyone so the main language of the platform is in Italian
2:44
language of the platform is in Italian
2:44
language of the platform is in Italian we are only in the Italy Market but
2:46
we are only in the Italy Market but
2:46
we are only in the Italy Market but since we launch we reach 170,000 plus
2:49
since we launch we reach 170,000 plus
2:49
since we launch we reach 170,000 plus users we have 350 and plus courses and
2:53
users we have 350 and plus courses and
2:53
users we have 350 and plus courses and this is a premium model it means that
2:55
this is a premium model it means that
2:55
this is a premium model it means that you can uh register for free to the
2:58
you can uh register for free to the
2:58
you can uh register for free to the platform and then purchase subscription
3:00
platform and then purchase subscription
3:00
platform and then purchase subscription to watch all the content because you can
3:02
to watch all the content because you can
3:02
to watch all the content because you can watch the 30% of the content and then if
3:04
watch the 30% of the content and then if
3:04
watch the 30% of the content and then if you want to watch more you have to pay
3:07
you want to watch more you have to pay
3:07
you want to watch more you have to pay uh the service which is 90 which is $10
3:09
uh the service which is 90 which is $10
3:09
uh the service which is 90 which is $10 a month so it's quite low as a price the
3:12
a month so it's quite low as a price the
3:12
a month so it's quite low as a price the main product is the web application but
3:14
main product is the web application but
3:14
main product is the web application but we still have the mobile application
3:17
we still have the mobile application
3:17
we still have the mobile application this was the first version of the mobile
3:19
this was the first version of the mobile
3:19
this was the first version of the mobile application in 2020 it was kind of an
3:21
application in 2020 it was kind of an
3:21
application in 2020 it was kind of an MVP as you can see on the right we
3:23
MVP as you can see on the right we
3:23
MVP as you can see on the right we couldn't even scroll the the timeline on
3:25
couldn't even scroll the the timeline on
3:25
couldn't even scroll the the timeline on the video but we built the application
3:28
the video but we built the application
3:28
the video but we built the application from scratch so it was made with react
3:30
from scratch so it was made with react
3:30
from scratch so it was made with react native and with react native video which
3:32
native and with react native video which
3:32
native and with react native video which is a popular library for video managing
3:34
is a popular library for video managing
3:34
is a popular library for video managing in react so the player currently is this
3:38
in react so the player currently is this
3:38
in react so the player currently is this we have a lot of
3:43
features you can watch transcripts of
3:46
features you can watch transcripts of
3:46
features you can watch transcripts of the less so the transcript as lesson
3:48
the less so the transcript as lesson
3:49
the less so the transcript as lesson goes on follow follow
3:53
what lot fun sub titles and these were
3:57
what lot fun sub titles and these were
3:57
what lot fun sub titles and these were functions that we implemented um
4:00
functions that we implemented um
4:00
functions that we implemented um in in following years so in four years
4:03
in in following years so in four years
4:03
in in following years so in four years and this was made entirely from scratch
4:06
and this was made entirely from scratch
4:06
and this was made entirely from scratch with react native video as I said before
4:08
with react native video as I said before
4:08
with react native video as I said before at the moment of uh speaking is 6.4
4:11
at the moment of uh speaking is 6.4
4:11
at the moment of uh speaking is 6.4 version but now the first version was
4:14
version but now the first version was
4:14
version but now the first version was 5.2.1 we used custom components so
4:17
5.2.1 we used custom components so
4:17
5.2.1 we used custom components so without external libraries we did
4:19
without external libraries we did
4:19
without external libraries we did everything from scratch and we use an
4:21
everything from scratch and we use an
4:21
everything from scratch and we use an open source Library which is Rec native
4:23
open source Library which is Rec native
4:23
open source Library which is Rec native bottom sheet to display all the bottom
4:25
bottom sheet to display all the bottom
4:25
bottom sheet to display all the bottom part and it works uh quite well on
4:28
part and it works uh quite well on
4:28
part and it works uh quite well on Android and iOS and and so we will move
4:31
Android and iOS and and so we will move
4:31
Android and iOS and and so we will move on to see even this one this part which
4:33
on to see even this one this part which
4:33
on to see even this one this part which is the bottom sheet in which you can
4:34
is the bottom sheet in which you can
4:34
is the bottom sheet in which you can insert and it has a lot of animations
4:37
insert and it has a lot of animations
4:37
insert and it has a lot of animations but the main topic we are talking about
4:39
but the main topic we are talking about
4:39
but the main topic we are talking about is the video so we will see now what
4:42
is the video so we will see now what
4:42
is the video so we will see now what went well during the development process
4:44
went well during the development process
4:44
went well during the development process so what went well was the streaming
4:46
so what went well was the streaming
4:46
so what went well was the streaming which hls so all the streaming part
4:48
which hls so all the streaming part
4:48
which hls so all the streaming part because I forgot to say to you that we
4:50
because I forgot to say to you that we
4:50
because I forgot to say to you that we developed from scratch even the
4:52
developed from scratch even the
4:52
developed from scratch even the streaming infrastructure so we don't use
4:54
streaming infrastructure so we don't use
4:54
streaming infrastructure so we don't use or YouTube but we have a custom
4:56
or YouTube but we have a custom
4:56
or YouTube but we have a custom infrastructure built on AWS uh we went
4:59
infrastructure built on AWS uh we went
5:00
infrastructure built on AWS uh we went well the subtile TOs and transcripts
5:01
well the subtile TOs and transcripts
5:01
well the subtile TOs and transcripts part as you said before and the iOS
5:03
part as you said before and the iOS
5:03
part as you said before and the iOS performance because it was quite good on
5:06
performance because it was quite good on
5:06
performance because it was quite good on iOS this is the hls streaming so we use
5:09
iOS this is the hls streaming so we use
5:09
iOS this is the hls streaming so we use a custom infrastructure built on AWS
5:11
a custom infrastructure built on AWS
5:11
a custom infrastructure built on AWS that I've done another talk on this
5:13
that I've done another talk on this
5:13
that I've done another talk on this topic so if you want to go to my website
5:15
topic so if you want to go to my website
5:15
topic so if you want to go to my website and check it out I will explain
5:17
and check it out I will explain
5:17
and check it out I will explain everything about building a complete
5:18
everything about building a complete
5:18
everything about building a complete infrastructure for video streaming on
5:21
infrastructure for video streaming on
5:21
infrastructure for video streaming on AWS uh so what do you have to say you
5:24
AWS uh so what do you have to say you
5:24
AWS uh so what do you have to say you have to know since we're talking about
5:25
have to know since we're talking about
5:26
have to know since we're talking about react is that the ban gives to you these
5:28
react is that the ban gives to you these
5:28
react is that the ban gives to you these URLs which are the playlist of the video
5:30
URLs which are the playlist of the video
5:30
URLs which are the playlist of the video that you can pass to the player so the
5:32
that you can pass to the player so the
5:33
that you can pass to the player so the the files are in m3u8 so this is the
5:36
the files are in m3u8 so this is the
5:36
the files are in m3u8 so this is the common file the hls playlist which
5:38
common file the hls playlist which
5:38
common file the hls playlist which adapts to the connection so if users say
5:41
adapts to the connection so if users say
5:41
adapts to the connection so if users say full connection the conect the the video
5:43
full connection the conect the the video
5:44
full connection the conect the the video will still go on but with uh reduced
5:46
will still go on but with uh reduced
5:46
will still go on but with uh reduced resolution so it adapts automatically to
5:48
resolution so it adapts automatically to
5:48
resolution so it adapts automatically to the device to the connection so this is
5:51
the device to the connection so this is
5:51
the device to the connection so this is independent of the connection we have a
5:53
independent of the connection we have a
5:53
independent of the connection we have a lot of
5:54
lot of outputs as you can see here even the MP3
5:57
outputs as you can see here even the MP3
5:57
outputs as you can see here even the MP3 output if you want to allow the users to
5:59
output if you want to allow the users to
6:00
output if you want to allow the users to watch to listen only to the audio but we
6:02
watch to listen only to the audio but we
6:02
watch to listen only to the audio but we use the hls URL so the playlist and this
6:05
use the hls URL so the playlist and this
6:05
use the hls URL so the playlist and this worked very well with all devices and
6:07
worked very well with all devices and
6:07
worked very well with all devices and all uh all different devices both on IOS
6:09
all uh all different devices both on IOS
6:10
all uh all different devices both on IOS and Android then we moved on to develop
6:13
and Android then we moved on to develop
6:13
and Android then we moved on to develop the subtitles and transcripts part so at
6:16
the subtitles and transcripts part so at
6:16
the subtitles and transcripts part so at the moment of uh when we developed at
6:18
the moment of uh when we developed at
6:18
the moment of uh when we developed at first in 2020 in Rec native video there
6:20
first in 2020 in Rec native video there
6:20
first in 2020 in Rec native video there was no there wasn't the possibility to
6:23
was no there wasn't the possibility to
6:23
was no there wasn't the possibility to style the subtitles and not you cannot
6:26
style the subtitles and not you cannot
6:26
style the subtitles and not you cannot position so as you can see on the right
6:29
position so as you can see on the right
6:29
position so as you can see on the right this was the default position that the
6:31
this was the default position that the
6:31
this was the default position that the player allowed to to to display the
6:33
player allowed to to to display the
6:33
player allowed to to to display the subtitle so we decided to develop a
6:35
subtitle so we decided to develop a
6:35
subtitle so we decided to develop a custom uh component which we didn't
6:38
custom uh component which we didn't
6:38
custom uh component which we didn't release yet but is internal we um we
6:41
release yet but is internal we um we
6:41
release yet but is internal we um we converted all subtitles in types and
6:44
converted all subtitles in types and
6:44
converted all subtitles in types and objects so as you can see on the left
6:45
objects so as you can see on the left
6:45
objects so as you can see on the left this is what comes out of the uh
6:48
this is what comes out of the uh
6:48
this is what comes out of the uh transcript so a vtt file which is a file
6:51
transcript so a vtt file which is a file
6:51
transcript so a vtt file which is a file that contains all the the quotes at a
6:53
that contains all the the quotes at a
6:53
that contains all the the quotes at a given time so for for instance on the
6:55
given time so for for instance on the
6:55
given time so for for instance on the first part you can see the first part uh
6:57
first part you can see the first part uh
6:57
first part you can see the first part uh the the first sentence H it tells you
7:01
the the first sentence H it tells you
7:01
the the first sentence H it tells you when it is being pronounced then we
7:03
when it is being pronounced then we
7:03
when it is being pronounced then we translated this with the parser into a
7:05
translated this with the parser into a
7:05
translated this with the parser into a commonly type so which has an ID a start
7:08
commonly type so which has an ID a start
7:08
commonly type so which has an ID a start time a stop time the text that the
7:11
time a stop time the text that the
7:11
time a stop time the text that the person is saying in the auor in this way
7:14
person is saying in the auor in this way
7:14
person is saying in the auor in this way you can even uh you can do whatever you
7:16
you can even uh you can do whatever you
7:16
you can even uh you can do whatever you want with this kind of object you can
7:18
want with this kind of object you can
7:18
want with this kind of object you can display it with a component and as you
7:20
display it with a component and as you
7:20
display it with a component and as you can see here we buil a custom hook which
7:23
can see here we buil a custom hook which
7:23
can see here we buil a custom hook which uh takes uh two props one is subtitles
7:27
uh takes uh two props one is subtitles
7:27
uh takes uh two props one is subtitles so the uh array of objects that I was
7:29
so the uh array of objects that I was
7:29
so the uh array of objects that I was shown you before and player proxy player
7:32
shown you before and player proxy player
7:32
shown you before and player proxy player proxy is the player itself so the hook
7:34
proxy is the player itself so the hook
7:34
proxy is the player itself so the hook uses the player state to display the
7:36
uses the player state to display the
7:36
uses the player state to display the subtitles at the given time so if the
7:38
subtitles at the given time so if the
7:38
subtitles at the given time so if the player has a given time of for instance
7:41
player has a given time of for instance
7:41
player has a given time of for instance 60 seconds and in the vtt at 60 seconds
7:44
60 seconds and in the vtt at 60 seconds
7:44
60 seconds and in the vtt at 60 seconds a quote is been pronounced we can
7:45
a quote is been pronounced we can
7:45
a quote is been pronounced we can display and return the current block as
7:48
display and return the current block as
7:48
display and return the current block as you can see in the set block by time
7:49
you can see in the set block by time
7:49
you can see in the set block by time function you get the current time the
7:51
function you get the current time the
7:51
function you get the current time the current index get current Q I didn't
7:54
current index get current Q I didn't
7:54
current index get current Q I didn't show you the function but is a function
7:56
show you the function but is a function
7:56
show you the function but is a function to find the current uh sentence that
7:58
to find the current uh sentence that
7:58
to find the current uh sentence that which is been based on the time and then
8:01
which is been based on the time and then
8:01
which is been based on the time and then you return the current block so you can
8:03
you return the current block so you can
8:03
you return the current block so you can display it whatever you want like this
8:05
display it whatever you want like this
8:05
display it whatever you want like this so you instance this hook which is you
8:07
so you instance this hook which is you
8:07
so you instance this hook which is you subtitles you pass the subtitle objects
8:10
subtitles you pass the subtitle objects
8:10
subtitles you pass the subtitle objects you pass the play proxy and you obtain
8:11
you pass the play proxy and you obtain
8:11
you pass the play proxy and you obtain the current block and you can insert it
8:13
the current block and you can insert it
8:13
the current block and you can insert it in a text and display it so if there's
8:15
in a text and display it so if there's
8:15
in a text and display it so if there's no current block the current block is
8:17
no current block the current block is
8:17
no current block the current block is not displayed so this is automatic and
8:19
not displayed so this is automatic and
8:19
not displayed so this is automatic and goes on very well even with the TR
8:21
goes on very well even with the TR
8:21
goes on very well even with the TR scripts as you can see here we can
8:23
scripts as you can see here we can
8:23
scripts as you can see here we can position wherever we want we can even on
8:25
position wherever we want we can even on
8:25
position wherever we want we can even on the web part we can use react dragable
8:28
the web part we can use react dragable
8:28
the web part we can use react dragable to drag the titles you can do whatever
8:30
to drag the titles you can do whatever
8:30
to drag the titles you can do whatever you want with these kind of transcripts
8:32
you want with these kind of transcripts
8:32
you want with these kind of transcripts and let's move on to the other part
8:34
and let's move on to the other part
8:34
and let's move on to the other part which is IOS performance as you can see
8:36
which is IOS performance as you can see
8:36
which is IOS performance as you can see here this is from Firebase um we have a
8:39
here this is from Firebase um we have a
8:39
here this is from Firebase um we have a pretty good performance on iOS because
8:41
pretty good performance on iOS because
8:41
pretty good performance on iOS because as you can see here the crash rate is
8:43
as you can see here the crash rate is
8:43
as you can see here the crash rate is quite low uh there are no uh exception
8:48
quite low uh there are no uh exception
8:48
quite low uh there are no uh exception or problems of any sort and it's very
8:50
or problems of any sort and it's very
8:50
or problems of any sort and it's very fluid the animation work very well the
8:52
fluid the animation work very well the
8:52
fluid the animation work very well the audio background works very well it
8:54
audio background works very well it
8:54
audio background works very well it means that you if you uh play a video
8:56
means that you if you uh play a video
8:56
means that you if you uh play a video and you close your phone and the the
8:58
and you close your phone and the the
8:58
and you close your phone and the the display shut down it keeps working the
9:00
display shut down it keeps working the
9:00
display shut down it keeps working the video is very smooth and the animations
9:02
video is very smooth and the animations
9:02
video is very smooth and the animations are very very smooth so this was the
9:05
are very very smooth so this was the
9:05
are very very smooth so this was the implementation on 2020 that moved on and
9:07
implementation on 2020 that moved on and
9:07
implementation on 2020 that moved on and had great performance but the most
9:10
had great performance but the most
9:10
had great performance but the most interesting part is this one what didn't
9:13
interesting part is this one what didn't
9:13
interesting part is this one what didn't go well so as you can see here in this
9:16
go well so as you can see here in this
9:16
go well so as you can see here in this funny picture there's the learn player
9:18
funny picture there's the learn player
9:18
funny picture there's the learn player and the name of this cute girl that
9:22
and the name of this cute girl that
9:22
and the name of this cute girl that destroyed our player was Android yeah
9:25
destroyed our player was Android yeah
9:25
destroyed our player was Android yeah Android was kind of a pain for us at
9:28
Android was kind of a pain for us at
9:28
Android was kind of a pain for us at first because in 20 uh react n video was
9:31
first because in 20 uh react n video was
9:31
first because in 20 uh react n video was not so supportive um because it was very
9:34
not so supportive um because it was very
9:34
not so supportive um because it was very very well maintained but given the
9:36
very well maintained but given the
9:36
very well maintained but given the majority of devices having different uh
9:39
majority of devices having different uh
9:39
majority of devices having different uh Hardwares didn't go well because we had
9:41
Hardwares didn't go well because we had
9:41
Hardwares didn't go well because we had some troubles and now I will explain you
9:43
some troubles and now I will explain you
9:43
some troubles and now I will explain you why so the first part was the Android
9:46
why so the first part was the Android
9:46
why so the first part was the Android player that didn't go well so the core
9:48
player that didn't go well so the core
9:48
player that didn't go well so the core player of the operating system then the
9:50
player of the operating system then the
9:50
player of the operating system then the audio background so when you lock your
9:53
audio background so when you lock your
9:53
audio background so when you lock your phone and you keep reproducing the video
9:55
phone and you keep reproducing the video
9:55
phone and you keep reproducing the video it was getting stun getting crashes and
9:57
it was getting stun getting crashes and
9:57
it was getting stun getting crashes and I will explain you later and and didn't
9:59
I will explain you later and and didn't
10:00
I will explain you later and and didn't go well even the part of the behaviors
10:02
go well even the part of the behaviors
10:02
go well even the part of the behaviors because between IOS and Android we had a
10:05
because between IOS and Android we had a
10:05
because between IOS and Android we had a lot of different behavior in different
10:07
lot of different behavior in different
10:07
lot of different behavior in different scenarios so let's see what we are
10:09
scenarios so let's see what we are
10:09
scenarios so let's see what we are talking about right now so Android uh
10:13
talking about right now so Android uh
10:13
talking about right now so Android uh natively uses two kind of player one is
10:16
natively uses two kind of player one is
10:16
natively uses two kind of player one is media player which is a public which is
10:17
media player which is a public which is
10:17
media player which is a public which is a class that allows you to reproduce
10:20
a class that allows you to reproduce
10:20
a class that allows you to reproduce audio but is pretty um it's the first
10:22
audio but is pretty um it's the first
10:22
audio but is pretty um it's the first class that we used because Rec native
10:25
class that we used because Rec native
10:25
class that we used because Rec native video was using this one in the first
10:26
video was using this one in the first
10:26
video was using this one in the first version and then there's exop player
10:28
version and then there's exop player
10:28
version and then there's exop player which is an Advanced version with more
10:30
which is an Advanced version with more
10:30
which is an Advanced version with more function and even more support which is
10:32
function and even more support which is
10:32
function and even more support which is more smooth and fluid but at first we
10:34
more smooth and fluid but at first we
10:34
more smooth and fluid but at first we did use media player because it came out
10:36
did use media player because it came out
10:36
did use media player because it came out of the box from react native video the
10:39
of the box from react native video the
10:39
of the box from react native video the library the first version had as I said
10:42
library the first version had as I said
10:42
library the first version had as I said to you a lot of problem it had distorted
10:44
to you a lot of problem it had distorted
10:44
to you a lot of problem it had distorted or missing audio the player was
10:46
or missing audio the player was
10:46
or missing audio the player was unresponsive we had buffering problems
10:48
unresponsive we had buffering problems
10:48
unresponsive we had buffering problems and and as you can see on the right it's
10:49
and and as you can see on the right it's
10:50
and and as you can see on the right it's written in Italian because this is a
10:51
written in Italian because this is a
10:51
written in Italian because this is a document that we used to map all the
10:53
document that we used to map all the
10:53
document that we used to map all the bags so we we uh asked a lot of our
10:56
bags so we we uh asked a lot of our
10:56
bags so we we uh asked a lot of our users to test the application and we
10:58
users to test the application and we
10:58
users to test the application and we collected all the feedback
10:59
collected all the feedback
10:59
collected all the feedback ranked with priority as you can see a
11:02
ranked with priority as you can see a
11:02
ranked with priority as you can see a lot of um the the first row is in
11:04
lot of um the the first row is in
11:04
lot of um the the first row is in Italian but it says the audio is not
11:06
Italian but it says the audio is not
11:06
Italian but it says the audio is not starting and 82 people had this problem
11:08
starting and 82 people had this problem
11:08
starting and 82 people had this problem so we wanted to tle this stuff and we
11:12
so we wanted to tle this stuff and we
11:12
so we wanted to tle this stuff and we looked for a solution for a lot of time
11:14
looked for a solution for a lot of time
11:14
looked for a solution for a lot of time until we found this solution which is
11:16
until we found this solution which is
11:16
until we found this solution which is two lines of code but these two lines of
11:18
two lines of code but these two lines of
11:18
two lines of code but these two lines of code took months to discover that this
11:20
code took months to discover that this
11:20
code took months to discover that this was the solution because the solution
11:22
was the solution because the solution
11:22
was the solution because the solution was to force the retive video library to
11:25
was to force the retive video library to
11:25
was to force the retive video library to use exop player which is the more
11:27
use exop player which is the more
11:27
use exop player which is the more advanced player but it was not written
11:29
advanced player but it was not written
11:29
advanced player but it was not written in the documentation so we did a PR to
11:31
in the documentation so we did a PR to
11:31
in the documentation so we did a PR to update the documentation we tested uh
11:34
update the documentation we tested uh
11:34
update the documentation we tested uh with rear users this new solution
11:36
with rear users this new solution
11:36
with rear users this new solution forcing Exel player the more performant
11:38
forcing Exel player the more performant
11:38
forcing Exel player the more performant player which is native we test it and we
11:40
player which is native we test it and we
11:40
player which is native we test it and we released a new version in production on
11:42
released a new version in production on
11:42
released a new version in production on the right can you see a list of emails
11:44
the right can you see a list of emails
11:44
the right can you see a list of emails that we sent to our user with with a lot
11:46
that we sent to our user with with a lot
11:46
that we sent to our user with with a lot of test cases that allow the user to
11:48
of test cases that allow the user to
11:48
of test cases that allow the user to test the application and give the
11:50
test the application and give the
11:50
test the application and give the feedback to us then we did this PR to
11:53
feedback to us then we did this PR to
11:53
feedback to us then we did this PR to update the uh the documentation in order
11:55
update the uh the documentation in order
11:55
update the uh the documentation in order to uh uh tell our users that we doing
11:59
to uh uh tell our users that we doing
11:59
to uh uh tell our users that we doing the same stuff to use this kind of uh
12:01
the same stuff to use this kind of uh
12:01
the same stuff to use this kind of uh player because it tooks it took a lot of
12:03
player because it tooks it took a lot of
12:03
player because it tooks it took a lot of months to discover this kind of solution
12:05
months to discover this kind of solution
12:05
months to discover this kind of solution and lot of tests but yeah we resoled it
12:08
and lot of tests but yeah we resoled it
12:08
and lot of tests but yeah we resoled it in this way the other part was the
12:10
in this way the other part was the
12:10
in this way the other part was the Android background audio because uh at
12:13
Android background audio because uh at
12:13
Android background audio because uh at first it it is supported by Rec native
12:15
first it it is supported by Rec native
12:15
first it it is supported by Rec native video so when you lock your phone Rec
12:17
video so when you lock your phone Rec
12:17
video so when you lock your phone Rec native video still works but there are
12:19
native video still works but there are
12:19
native video still works but there are no controls in the notification centers
12:22
no controls in the notification centers
12:22
no controls in the notification centers so this was the this it cannot display
12:25
so this was the this it cannot display
12:25
so this was the this it cannot display the control notification center you
12:26
the control notification center you
12:26
the control notification center you cannot control the video play see can
12:28
cannot control the video play see can
12:28
cannot control the video play see can stop the video
12:29
stop the video the first solution that we that we
12:31
the first solution that we that we
12:31
the first solution that we that we adopted in 2020 was to use two players
12:34
adopted in 2020 was to use two players
12:34
adopted in 2020 was to use two players one was Rec native video with playing
12:36
one was Rec native video with playing
12:36
one was Rec native video with playing background Falls so we when you close
12:39
background Falls so we when you close
12:39
background Falls so we when you close the phone Rec native video stops then
12:41
the phone Rec native video stops then
12:41
the phone Rec native video stops then with the audio use another player which
12:43
with the audio use another player which
12:43
with the audio use another player which is Rec native track player which is uh a
12:46
is Rec native track player which is uh a
12:46
is Rec native track player which is uh a module that is used to play audio files
12:48
module that is used to play audio files
12:48
module that is used to play audio files and displays the notification controls
12:51
and displays the notification controls
12:51
and displays the notification controls but this solution involved listening if
12:53
but this solution involved listening if
12:54
but this solution involved listening if you're familiar with re native listening
12:55
you're familiar with re native listening
12:55
you're familiar with re native listening to a lot of changes in the upstate
12:57
to a lot of changes in the upstate
12:57
to a lot of changes in the upstate Upstate do other EV listener allowes you
13:00
Upstate do other EV listener allowes you
13:00
Upstate do other EV listener allowes you to listen when the app goes in
13:02
to listen when the app goes in
13:02
to listen when the app goes in background when when it is inactive so
13:05
background when when it is inactive so
13:05
background when when it is inactive so in this case when the app went in
13:06
in this case when the app went in
13:06
in this case when the app went in background we switch to the track player
13:09
background we switch to the track player
13:09
background we switch to the track player so to the audio when the app became
13:11
so to the audio when the app became
13:11
so to the audio when the app became active in the last row you can see that
13:12
active in the last row you can see that
13:13
active in the last row you can see that we switched to the video so it involved
13:15
we switched to the video so it involved
13:15
we switched to the video so it involved a lot of syns but um syncing two player
13:18
a lot of syns but um syncing two player
13:18
a lot of syns but um syncing two player is not a good choice because you have
13:20
is not a good choice because you have
13:20
is not a good choice because you have some lag you have some problems with the
13:22
some lag you have some problems with the
13:22
some lag you have some problems with the sync and synchronization of the time so
13:25
sync and synchronization of the time so
13:25
sync and synchronization of the time so it was not a good solution so we tried
13:27
it was not a good solution so we tried
13:27
it was not a good solution so we tried the second solution the the second
13:29
the second solution the the second
13:29
the second solution the the second solution was to use still the video but
13:31
solution was to use still the video but
13:31
solution was to use still the video but with playing backround through so to use
13:33
with playing backround through so to use
13:33
with playing backround through so to use as a play re native video and to the
13:36
as a play re native video and to the
13:36
as a play re native video and to the controls this kind of module which was
13:38
controls this kind of module which was
13:38
controls this kind of module which was Rec native music control which is a
13:40
Rec native music control which is a
13:40
Rec native music control which is a library that only displays the control
13:42
library that only displays the control
13:42
library that only displays the control notification center but it is not a
13:44
notification center but it is not a
13:44
notification center but it is not a player it's only a UI Library this
13:46
player it's only a UI Library this
13:46
player it's only a UI Library this worked well because uh we didn't have to
13:48
worked well because uh we didn't have to
13:48
worked well because uh we didn't have to listen to a lot of changes in the states
13:51
listen to a lot of changes in the states
13:51
listen to a lot of changes in the states on the right you can see how to instance
13:53
on the right you can see how to instance
13:53
on the right you can see how to instance music control as play ask up so you
13:55
music control as play ask up so you
13:55
music control as play ask up so you listen to the changes of the status of
13:57
listen to the changes of the status of
13:57
listen to the changes of the status of the player it's quite easy to import but
14:01
the player it's quite easy to import but
14:01
the player it's quite easy to import but it came with some problems because um so
14:05
it came with some problems because um so
14:05
it came with some problems because um so let's talk about the pros at first so we
14:07
let's talk about the pros at first so we
14:07
let's talk about the pros at first so we do you do you don't have load time
14:08
do you do you don't have load time
14:08
do you do you don't have load time between foreground and background so the
14:10
between foreground and background so the
14:10
between foreground and background so the switch is instant the screen is not
14:12
switch is instant the screen is not
14:12
switch is instant the screen is not rendered and you have native EV system
14:15
rendered and you have native EV system
14:15
rendered and you have native EV system management what what does it mean if I
14:17
management what what does it mean if I
14:17
management what what does it mean if I take out my uh earphone um the player
14:20
take out my uh earphone um the player
14:20
take out my uh earphone um the player stops so you can handle this kind of
14:22
stops so you can handle this kind of
14:22
stops so you can handle this kind of situation in coming calls and it was
14:24
situation in coming calls and it was
14:24
situation in coming calls and it was pretty good but it came with some cones
14:26
pretty good but it came with some cones
14:26
pretty good but it came with some cones so we consumed greater data because we
14:28
so we consumed greater data because we
14:28
so we consumed greater data because we used the vide as sour and not the MP3 so
14:31
used the vide as sour and not the MP3 so
14:31
used the vide as sour and not the MP3 so the user consumed a lot of more of
14:33
the user consumed a lot of more of
14:33
the user consumed a lot of more of megabytes H the module is no longer
14:36
megabytes H the module is no longer
14:36
megabytes H the module is no longer maintained now speaking so you have to
14:38
maintained now speaking so you have to
14:38
maintained now speaking so you have to maintain it on your own and Native
14:40
maintain it on your own and Native
14:40
maintain it on your own and Native development is needed for future Android
14:42
development is needed for future Android
14:42
development is needed for future Android versions because uh starting from
14:45
versions because uh starting from
14:45
versions because uh starting from Android 13 uh there are some problems
14:47
Android 13 uh there are some problems
14:47
Android 13 uh there are some problems with the kind of module so it had this
14:49
with the kind of module so it had this
14:50
with the kind of module so it had this kind of con and the other problem is
14:52
kind of con and the other problem is
14:52
kind of con and the other problem is that it led to some crashes so uh a lot
14:56
that it led to some crashes so uh a lot
14:56
that it led to some crashes so uh a lot of crashes happen because of this kind
14:58
of crashes happen because of this kind
14:58
of crashes happen because of this kind of module
14:59
of module so and we have finally different
15:02
so and we have finally different
15:02
so and we have finally different behaviors between Android and iOS what
15:04
behaviors between Android and iOS what
15:04
behaviors between Android and iOS what do I mean by that if you're familiar
15:06
do I mean by that if you're familiar
15:06
do I mean by that if you're familiar with re native you use platform to
15:07
with re native you use platform to
15:07
with re native you use platform to detect with platform are you on and if
15:09
detect with platform are you on and if
15:09
detect with platform are you on and if you look in the code base in the first
15:11
you look in the code base in the first
15:11
you look in the code base in the first code base there was a lot of checks uh
15:13
code base there was a lot of checks uh
15:13
code base there was a lot of checks uh in which we checked if the system is IOS
15:16
in which we checked if the system is IOS
15:16
in which we checked if the system is IOS do something is the system is Android do
15:19
do something is the system is Android do
15:19
do something is the system is Android do something you don't want to have these
15:21
something you don't want to have these
15:21
something you don't want to have these kind of behaviors because it keep it is
15:24
kind of behaviors because it keep it is
15:24
kind of behaviors because it keep it is difficult to maintain and even here as
15:26
difficult to maintain and even here as
15:26
difficult to maintain and even here as you can see if platform is Android
15:28
you can see if platform is Android
15:28
you can see if platform is Android changes State seek the player and if
15:30
changes State seek the player and if
15:30
changes State seek the player and if it's iOS do another thing so it is it
15:33
it's iOS do another thing so it is it
15:33
it's iOS do another thing so it is it they are on different order but yeah you
15:36
they are on different order but yeah you
15:36
they are on different order but yeah you don't want to have this kind of problem
15:38
don't want to have this kind of problem
15:38
don't want to have this kind of problem so this take in consideration this if
15:40
so this take in consideration this if
15:40
so this take in consideration this if you want to develop a a custom player
15:43
you want to develop a a custom player
15:43
you want to develop a a custom player with react native because there's a lot
15:45
with react native because there's a lot
15:45
with react native because there's a lot of difference behaviors between IOS and
15:46
of difference behaviors between IOS and
15:46
of difference behaviors between IOS and Android due to the fact that um uh the
15:50
Android due to the fact that um uh the
15:50
Android due to the fact that um uh the native system operates differently
15:53
native system operates differently
15:53
native system operates differently between IOS and Android so you have to
15:54
between IOS and Android so you have to
15:54
between IOS and Android so you have to test a lot and came across a lot of
15:56
test a lot and came across a lot of
15:56
test a lot and came across a lot of problems but yeah this is the the part
15:59
problems but yeah this is the the part
15:59
problems but yeah this is the the part so even here this a different
16:02
so even here this a different
16:02
so even here this a different state and the difference is the behavior
16:05
state and the difference is the behavior
16:05
state and the difference is the behavior because Android even we had a uh higher
16:09
because Android even we had a uh higher
16:09
because Android even we had a uh higher Crush rate 10% of the users had problems
16:12
Crush rate 10% of the users had problems
16:12
Crush rate 10% of the users had problems which is high expect expected to uh if
16:17
which is high expect expected to uh if
16:17
which is high expect expected to uh if compared to I us so this was not pretty
16:19
compared to I us so this was not pretty
16:19
compared to I us so this was not pretty good so we wanted to solve this problem
16:22
good so we wanted to solve this problem
16:22
good so we wanted to solve this problem what are the lessons learned by these
16:24
what are the lessons learned by these
16:24
what are the lessons learned by these kind of developments so manag inde
16:26
kind of developments so manag inde
16:26
kind of developments so manag inde dependencies and V is hard because we we
16:28
dependencies and V is hard because we we
16:28
dependencies and V is hard because we we had a lot of dependencies in the project
16:30
had a lot of dependencies in the project
16:30
had a lot of dependencies in the project so managing all the updates and the uh
16:34
so managing all the updates and the uh
16:34
so managing all the updates and the uh the updates between the dependencies the
16:35
the updates between the dependencies the
16:35
the updates between the dependencies the compatibilities is very very difficult
16:38
compatibilities is very very difficult
16:38
compatibilities is very very difficult and in the long term uh using many
16:40
and in the long term uh using many
16:40
and in the long term uh using many modules is quick in short term because
16:42
modules is quick in short term because
16:42
modules is quick in short term because you are fast in development but in the
16:44
you are fast in development but in the
16:44
you are fast in development but in the long term it lows you down because you
16:46
long term it lows you down because you
16:46
long term it lows you down because you have to remove them sometimes because
16:48
have to remove them sometimes because
16:48
have to remove them sometimes because they're not more compatible and they're
16:50
they're not more compatible and they're
16:50
they're not more compatible and they're not updated so I would suggest to uh
16:53
not updated so I would suggest to uh
16:53
not updated so I would suggest to uh avoid using too many modules but
16:56
avoid using too many modules but
16:56
avoid using too many modules but sometimes you can develop something on
16:58
sometimes you can develop something on
16:58
sometimes you can develop something on your own because it's simple but yeah to
17:00
your own because it's simple but yeah to
17:00
your own because it's simple but yeah to maintain it but yeah in the long term
17:02
maintain it but yeah in the long term
17:02
maintain it but yeah in the long term you don't have to remove it and you are
17:04
you don't have to remove it and you are
17:04
you don't have to remove it and you are maintaining it then removing removing a
17:06
maintaining it then removing removing a
17:06
maintaining it then removing removing a feature is worse than not developing it
17:08
feature is worse than not developing it
17:08
feature is worse than not developing it in the first place what do I mean by
17:10
in the first place what do I mean by
17:10
in the first place what do I mean by that we developed the the audio
17:11
that we developed the the audio
17:11
that we developed the the audio background feature to the users but on
17:14
background feature to the users but on
17:14
background feature to the users but on iOS was perfect and Android was having
17:16
iOS was perfect and Android was having
17:16
iOS was perfect and Android was having problems but if we remove the features
17:19
problems but if we remove the features
17:19
problems but if we remove the features you users from IOS would complain but
17:21
you users from IOS would complain but
17:21
you users from IOS would complain but users on Android are still complaining
17:23
users on Android are still complaining
17:23
users on Android are still complaining so at first I would not have developed
17:25
so at first I would not have developed
17:26
so at first I would not have developed this kind of feature I would have
17:27
this kind of feature I would have
17:27
this kind of feature I would have started a very very lean with small
17:30
started a very very lean with small
17:30
started a very very lean with small features but that were working very well
17:31
features but that were working very well
17:31
features but that were working very well not with some problems and after that
17:34
not with some problems and after that
17:34
not with some problems and after that learn ones Run Anywhere more or less
17:37
learn ones Run Anywhere more or less
17:37
learn ones Run Anywhere more or less let's say that you have to test a lot of
17:39
let's say that you have to test a lot of
17:39
let's say that you have to test a lot of stuff if you're doing this kind of Niche
17:41
stuff if you're doing this kind of Niche
17:41
stuff if you're doing this kind of Niche product and this video on react native
17:44
product and this video on react native
17:44
product and this video on react native because as I said there are differences
17:46
because as I said there are differences
17:46
because as I said there are differences between IOS and Android and their
17:47
between IOS and Android and their
17:47
between IOS and Android and their behaviors so you have to be careful of
17:50
behaviors so you have to be careful of
17:50
behaviors so you have to be careful of uh that action items so what are the
17:53
uh that action items so what are the
17:53
uh that action items so what are the action items what are the solutions to
17:55
action items what are the solutions to
17:55
action items what are the solutions to these uh problems so the first action
17:58
these uh problems so the first action
17:58
these uh problems so the first action item is to reduce the number of
18:00
item is to reduce the number of
18:00
item is to reduce the number of dependencies because as I said before it
18:02
dependencies because as I said before it
18:02
dependencies because as I said before it slows you down sometimes and you can
18:04
slows you down sometimes and you can
18:04
slows you down sometimes and you can avoid using too many dependencies you
18:06
avoid using too many dependencies you
18:06
avoid using too many dependencies you have to we wanted to reduce the number
18:08
have to we wanted to reduce the number
18:08
have to we wanted to reduce the number of crashes on Android so to to uh make
18:12
of crashes on Android so to to uh make
18:12
of crashes on Android so to to uh make the same crash rate on than iOS then we
18:16
the same crash rate on than iOS then we
18:16
the same crash rate on than iOS then we wanted to improve the stability on
18:17
wanted to improve the stability on
18:17
wanted to improve the stability on Android and for this we had a solution
18:20
Android and for this we had a solution
18:20
Android and for this we had a solution which is to update react native video
18:22
which is to update react native video
18:22
which is to update react native video library yeah you could say this is easy
18:24
library yeah you could say this is easy
18:24
library yeah you could say this is easy of data library and that's it but as you
18:26
of data library and that's it but as you
18:26
of data library and that's it but as you can see here the first version that we
18:28
can see here the first version that we
18:28
can see here the first version that we were using was updated in 2022 Rec
18:31
were using was updated in 2022 Rec
18:31
were using was updated in 2022 Rec native but the the following stable
18:34
native but the the following stable
18:34
native but the the following stable versions were released two years later
18:36
versions were released two years later
18:36
versions were released two years later so we had to wait two years to update
18:38
so we had to wait two years to update
18:38
so we had to wait two years to update the library and fix all of these
18:40
the library and fix all of these
18:40
the library and fix all of these problems so uh now now we are in contact
18:43
problems so uh now now we are in contact
18:43
problems so uh now now we are in contact with the maintenance and the of the
18:45
with the maintenance and the of the
18:45
with the maintenance and the of the library so it's more easier to develop
18:47
library so it's more easier to develop
18:47
library so it's more easier to develop this kind of stuff but first we have to
18:49
this kind of stuff but first we have to
18:49
this kind of stuff but first we have to wait two years and to try to natively
18:51
wait two years and to try to natively
18:51
wait two years and to try to natively fix on our own all the problems so it's
18:53
fix on our own all the problems so it's
18:53
fix on our own all the problems so it's not an easy ride but right now if you
18:55
not an easy ride but right now if you
18:55
not an easy ride but right now if you want to use this model it's pretty
18:56
want to use this model it's pretty
18:56
want to use this model it's pretty stable it's not like in 2020 is very
18:59
stable it's not like in 2020 is very
18:59
stable it's not like in 2020 is very well maintained documented and I will
19:01
well maintained documented and I will
19:01
well maintained documented and I will suggest to use it so feel free to reach
19:03
suggest to use it so feel free to reach
19:03
suggest to use it so feel free to reach out if you every if you have any issue
19:05
out if you every if you have any issue
19:05
out if you every if you have any issue with rective video because we're in
19:06
with rective video because we're in
19:06
with rective video because we're in contact with the maintainers and we can
19:08
contact with the maintainers and we can
19:08
contact with the maintainers and we can help you out if you want so I hope to in
19:12
help you out if you want so I hope to in
19:12
help you out if you want so I hope to in this 20 minute to have to give to you a
19:15
this 20 minute to have to give to you a
19:15
this 20 minute to have to give to you a quick overview because there's a lot to
19:17
quick overview because there's a lot to
19:17
quick overview because there's a lot to talk about this kind of project on the
19:18
talk about this kind of project on the
19:18
talk about this kind of project on the player but yeah so feel free to reach
19:21
player but yeah so feel free to reach
19:21
player but yeah so feel free to reach out on Twitter on VI mail on check out
19:23
out on Twitter on VI mail on check out
19:23
out on Twitter on VI mail on check out my website if you want to know more
19:25
my website if you want to know more
19:25
my website if you want to know more about what I do and even about the other
19:27
about what I do and even about the other
19:27
about what I do and even about the other talk that I've done and about the
19:28
talk that I've done and about the
19:28
talk that I've done and about the streaming architecture you can find it
19:29
streaming architecture you can find it
19:30
streaming architecture you can find it on my website which is in English so can
19:32
on my website which is in English so can
19:32
on my website which is in English so can feel free to reach out and check all my
19:34
feel free to reach out and check all my
19:34
feel free to reach out and check all my content so thanks for having me it was
19:37
content so thanks for having me it was
19:37
content so thanks for having me it was very very good to be here