Skip to content

Commit b5f92fd

Browse files
committed
iOS readme - index.js
1 parent 75f7f87 commit b5f92fd

File tree

4 files changed

+105
-1
lines changed

4 files changed

+105
-1
lines changed

README.md

+8-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
## Progress
99

10-
- [x] ios (implemented %99)
10+
- [x] ios (implemented %99 using https://github.com/malkouz/youtube-ios-player-helper-swift)
1111
- [x] android (implemented 'com.pierfrancescosoffritti.androidyoutubeplayer')
1212

1313
## Note
@@ -21,6 +21,13 @@
2121

2222
`$ react-native link react-native-youtube-sdk`
2323

24+
#### iOS
25+
26+
1. Drag drop `assets/YTPlayerView.html` to your iOS project
27+
2. Create a blank Swift file with bridge file in your project (to build swift code easily)
28+
![ios example](./example/example-ios.png)
29+
`soon there will be easier implementation`
30+
2431
### Manual installation
2532

2633

assets/YTPlayerView.html

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!--
2+
Copyright 2014 Google Inc. All rights reserved.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
-->
16+
<!DOCTYPE html>
17+
<html>
18+
<head>
19+
<access origin="*" />
20+
<allow-navigation href="*://*youtube.com" />
21+
<style>
22+
body { margin: 0; width:100%%; height:100%%; background-color:#000000; }
23+
html { width:100%%; height:100%%; background-color:#000000; }
24+
25+
.embed-container iframe,
26+
.embed-container object,
27+
.embed-container embed {
28+
position: absolute;
29+
top: 0;
30+
left: 0;
31+
width: 100%% !important;
32+
height: 100%% !important;
33+
}
34+
</style>
35+
<meta name=viewport content='width=device-width, initial-scale=1'><style type='text/css'> body { margin: 0;} </style>
36+
</head>
37+
<body>
38+
<div class="embed-container">
39+
<div id="player"></div>
40+
</div>
41+
<script src="https://www.youtube.com/iframe_api" onerror="window.location.href='ytplayer://onYouTubeIframeAPIFailedToLoad'"></script>
42+
<script>
43+
var player;
44+
var error = false;
45+
46+
YT.ready(function() {
47+
player = new YT.Player('player', %@);
48+
player.setSize(window.innerWidth, window.innerHeight);
49+
window.location.href = 'ytplayer://onYouTubeIframeAPIReady';
50+
51+
// this will transmit playTime frequently while playng
52+
function getCurrentTime() {
53+
var state = player.getPlayerState();
54+
if (state == YT.PlayerState.PLAYING) {
55+
time = player.getCurrentTime()
56+
window.location.href = 'ytplayer://onPlayTime?data=' + time;
57+
}
58+
}
59+
60+
window.setInterval(getCurrentTime, 500);
61+
62+
});
63+
64+
function onReady(event) {
65+
window.location.href = 'ytplayer://onReady?data=' + event.data;
66+
}
67+
68+
function onStateChange(event) {
69+
if (!error) {
70+
window.location.href = 'ytplayer://onStateChange?data=' + event.data;
71+
}
72+
else {
73+
error = false;
74+
}
75+
}
76+
77+
function onPlaybackQualityChange(event) {
78+
window.location.href = 'ytplayer://onPlaybackQualityChange?data=' + event.data;
79+
}
80+
81+
function onPlayerError(event) {
82+
if (event.data == 100) {
83+
error = true;
84+
}
85+
window.location.href = 'ytplayer://onError?data=' + event.data;
86+
}
87+
88+
window.onresize = function() {
89+
player.setSize(window.innerWidth, window.innerHeight);
90+
}
91+
</script>
92+
</body>
93+
</html>

example/example-ios.png

282 KB
Loading

index.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import React from "react";
2+
import YouTubePlayer from "./example/lib/YouTubePlayer";
3+
4+
export default YouTubePlayer;

0 commit comments

Comments
 (0)