From d1610236d9afa8793bc6eac60ffbdb0dff532127 Mon Sep 17 00:00:00 2001 From: Brandon Henry Date: Wed, 28 Feb 2024 22:28:09 -0600 Subject: [PATCH 1/3] installed react native cached image --- package-lock.json | 153 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 2 files changed, 154 insertions(+) diff --git a/package-lock.json b/package-lock.json index 4823fb44b7ff..adb800218c12 100644 --- a/package-lock.json +++ b/package-lock.json @@ -79,6 +79,7 @@ "react-native": "0.73.2", "react-native-android-location-enabler": "^2.0.1", "react-native-blob-util": "0.19.4", + "react-native-cached-image": "^1.4.3", "react-native-collapsible": "^1.6.1", "react-native-config": "^1.4.5", "react-native-dev-menu": "^4.1.1", @@ -29015,6 +29016,14 @@ "node": ">= 0.8" } }, + "node_modules/encoding": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz", + "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==", + "dependencies": { + "iconv-lite": "^0.6.2" + } + }, "node_modules/end-of-stream": { "version": "1.4.4", "license": "MIT", @@ -35119,6 +35128,32 @@ "node": ">=0.10.0" } }, + "node_modules/isomorphic-fetch": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", + "integrity": "sha512-9c4TNAKYXM5PRyVcwUZrF3W09nQ+sO7+jydgs4ZGW9dhsLG2VOlISJABombdQqQRXCwuYG3sYV/puGf5rp0qmA==", + "dependencies": { + "node-fetch": "^1.0.1", + "whatwg-fetch": ">=0.10.0" + } + }, + "node_modules/isomorphic-fetch/node_modules/is-stream": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", + "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/isomorphic-fetch/node_modules/node-fetch": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", + "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", + "dependencies": { + "encoding": "^0.1.11", + "is-stream": "^1.0.1" + } + }, "node_modules/isomorphic-unfetch": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/isomorphic-unfetch/-/isomorphic-unfetch-3.1.0.tgz", @@ -40935,6 +40970,25 @@ "node": ">=10" } }, + "node_modules/mock-async-storage": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/mock-async-storage/-/mock-async-storage-1.0.3.tgz", + "integrity": "sha512-HrYl0YG2ElqzgbWOTB5L0u0dVIs3hTITWNTbZGTbl/hurXv5/rrSBs3+gyjradHu5oiY9WM+eDLgnuTpDKwG7w==", + "dependencies": { + "deepmerge": "^1.3.1" + }, + "engines": { + "node": ">=6.9.1" + } + }, + "node_modules/mock-async-storage/node_modules/deepmerge": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz", + "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", @@ -44234,6 +44288,80 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/react-native-cached-image": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/react-native-cached-image/-/react-native-cached-image-1.4.3.tgz", + "integrity": "sha512-JGqAOedk2tZCykaq2pnqYbYh6De/pjVPntU0Rx01D9lF5uAPwDezNGdSwdeQYPDF2ivOGHEZfopdMmewbJV3ow==", + "dependencies": { + "crypto-js": "3.1.9-1", + "lodash": "4.17.4", + "prop-types": "15.5.10", + "react-native-clcasher": "1.0.0", + "react-native-fetch-blob": "0.10.8", + "url-parse": "1.1.9" + } + }, + "node_modules/react-native-cached-image/node_modules/core-js": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", + "integrity": "sha512-ZiPp9pZlgxpWRu0M+YWbm6+aQ84XEfH1JRXvfOc/fILWI0VKhLC2LX13X1NYq4fULzLMq7Hfh43CSo2/aIaUPA==", + "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js." + }, + "node_modules/react-native-cached-image/node_modules/crypto-js": { + "version": "3.1.9-1", + "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-3.1.9-1.tgz", + "integrity": "sha512-W93aKztssqf29OvUlqfikzGyYbD1rpkXvGP9IQ1JchLY3bxaLXZSWYbwrtib2vk8DobrDzX7PIXcDWHp0B6Ymw==" + }, + "node_modules/react-native-cached-image/node_modules/fbjs": { + "version": "0.8.18", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.18.tgz", + "integrity": "sha512-EQaWFK+fEPSoibjNy8IxUtaFOMXcWsY0JaVrQoZR9zC8N2Ygf9iDITPWjUTVIax95b6I742JFLqASHfsag/vKA==", + "dependencies": { + "core-js": "^1.0.0", + "isomorphic-fetch": "^2.1.1", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.30" + } + }, + "node_modules/react-native-cached-image/node_modules/lodash": { + "version": "4.17.4", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz", + "integrity": "sha512-6X37Sq9KCpLSXEh8uM12AKYlviHPNNk4RxiGBn4cmKGJinbXBneWIV7iE/nXkM928O7ytHcHb6+X6Svl0f4hXg==" + }, + "node_modules/react-native-cached-image/node_modules/prop-types": { + "version": "15.5.10", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.5.10.tgz", + "integrity": "sha512-vCFzoUFaZkVNeFkhK1KbSq4cn97GDrpfBt9K2qLkGnPAEFhEv3M61Lk5t+B7c0QfMLWo0fPkowk/4SuXerh26Q==", + "dependencies": { + "fbjs": "^0.8.9", + "loose-envify": "^1.3.1" + } + }, + "node_modules/react-native-cached-image/node_modules/querystringify": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-1.0.0.tgz", + "integrity": "sha512-+WIW046/nhIni/mtczBDTctF309Ue0XfKIeF83eilLr4ollrimEqxzIG2DC0MUgvi40F4Rji4m6UhKENNsErtA==" + }, + "node_modules/react-native-cached-image/node_modules/url-parse": { + "version": "1.1.9", + "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.1.9.tgz", + "integrity": "sha512-gBwhoU2/umBG1wPK3MgGwLlaifJxzISumU7imrW9OV2hU7MMkmSfGQdN8AFnhBm1P/zamF7xt58Xq35/+pPrEg==", + "dependencies": { + "querystringify": "~1.0.0", + "requires-port": "1.0.x" + } + }, + "node_modules/react-native-clcasher": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/react-native-clcasher/-/react-native-clcasher-1.0.0.tgz", + "integrity": "sha512-45CffFo+LljgT+dDSg2gwLfUTw76Jb+3NgqdFhIMbEh1Mhun+uanPHATEQxqBdZvW3ZqNll9REhjeJYP4eZq2w==", + "dependencies": { + "mock-async-storage": "^1.0.3" + } + }, "node_modules/react-native-clean-project": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/react-native-clean-project/-/react-native-clean-project-4.0.1.tgz", @@ -44315,6 +44443,31 @@ "react-native-reanimated": ">=2.8.0" } }, + "node_modules/react-native-fetch-blob": { + "version": "0.10.8", + "resolved": "https://registry.npmjs.org/react-native-fetch-blob/-/react-native-fetch-blob-0.10.8.tgz", + "integrity": "sha512-+zE/VjBO9HTjqNXL1KgtgS3ZTH8CNuxg9rJDml+GsO1UbIe4EgdRiCy/sIV9X8lVYimKfep8iJsVMTsjJvQHmA==", + "dependencies": { + "base-64": "0.1.0", + "glob": "7.0.6" + } + }, + "node_modules/react-native-fetch-blob/node_modules/glob": { + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.0.6.tgz", + "integrity": "sha512-f8c0rE8JiCxpa52kWPAOa3ZaYEnzofDzCQLCn3Vdk0Z5OVLq3BsRFJI4S4ykpeVW6QMGBUkMeUpoEgWnMTnw5Q==", + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.2", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + } + }, "node_modules/react-native-flipper": { "version": "0.159.0", "dev": true, diff --git a/package.json b/package.json index d75ecb9ad3e1..0b0e3765638e 100644 --- a/package.json +++ b/package.json @@ -127,6 +127,7 @@ "react-native": "0.73.2", "react-native-android-location-enabler": "^2.0.1", "react-native-blob-util": "0.19.4", + "react-native-cached-image": "^1.4.3", "react-native-collapsible": "^1.6.1", "react-native-config": "^1.4.5", "react-native-dev-menu": "^4.1.1", From 5d27119a92414376f5761cddfb77e1812919ca47 Mon Sep 17 00:00:00 2001 From: Brandon Henry Date: Thu, 29 Feb 2024 16:55:52 -0600 Subject: [PATCH 2/3] Testing cache --- android/build.gradle | 4 ++++ package-lock.json | 10 ++++++++++ package.json | 1 + src/components/VideoPlayer/BaseVideoPlayer.js | 7 +++++-- 4 files changed, 20 insertions(+), 2 deletions(-) diff --git a/android/build.gradle b/android/build.gradle index 7b5dd81e5bf1..fa4d610041fd 100644 --- a/android/build.gradle +++ b/android/build.gradle @@ -75,6 +75,10 @@ allprojects { password = project.properties['MAPBOX_DOWNLOADS_TOKEN'] ?: "" } } + maven { + url "$rootDir/../node_modules/react-native-video-cache/android/libs" + } + } } diff --git a/package-lock.json b/package-lock.json index 09d417eca073..401f803109c1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -115,6 +115,7 @@ "react-native-svg": "14.1.0", "react-native-tab-view": "^3.5.2", "react-native-url-polyfill": "^2.0.0", + "react-native-video-cache": "^2.7.4", "react-native-view-shot": "3.8.0", "react-native-vision-camera": "2.16.8", "react-native-web": "^0.19.9", @@ -44923,6 +44924,15 @@ "react-native": "*" } }, + "node_modules/react-native-video-cache": { + "version": "2.7.4", + "resolved": "https://registry.npmjs.org/react-native-video-cache/-/react-native-video-cache-2.7.4.tgz", + "integrity": "sha512-0bSJowf9jZaPX+OohjNH6DFPf0/UDgX1foWJAS5Uyv7tuByj9sD9UNbVreEGFjNNya/xVhZffmDaLWMTrx7VBg==", + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/react-native-view-shot": { "version": "3.8.0", "resolved": "https://registry.npmjs.org/react-native-view-shot/-/react-native-view-shot-3.8.0.tgz", diff --git a/package.json b/package.json index c91681528bfd..77d7850d8e20 100644 --- a/package.json +++ b/package.json @@ -163,6 +163,7 @@ "react-native-svg": "14.1.0", "react-native-tab-view": "^3.5.2", "react-native-url-polyfill": "^2.0.0", + "react-native-video-cache": "^2.7.4", "react-native-view-shot": "3.8.0", "react-native-vision-camera": "2.16.8", "react-native-web": "^0.19.9", diff --git a/src/components/VideoPlayer/BaseVideoPlayer.js b/src/components/VideoPlayer/BaseVideoPlayer.js index 060bc890d5e7..e9d2c4ecbe72 100644 --- a/src/components/VideoPlayer/BaseVideoPlayer.js +++ b/src/components/VideoPlayer/BaseVideoPlayer.js @@ -14,6 +14,8 @@ import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL'; import * as Browser from '@libs/Browser'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import CONST from '@src/CONST'; +import convertToProxyURL from 'react-native-video-cache'; + import {videoPlayerDefaultProps, videoPlayerPropTypes} from './propTypes'; import shouldReplayVideo from './shouldReplayVideo'; import VideoPlayerControls from './VideoPlayerControls'; @@ -51,7 +53,8 @@ function BaseVideoPlayer({ const [isPlaying, setIsPlaying] = useState(false); const [isLoading, setIsLoading] = useState(true); const [isBuffering, setIsBuffering] = useState(true); - const [sourceURL] = useState(url.includes('blob:') || url.includes('file:///') ? url : addEncryptedAuthTokenToURL(url)); + const cachedUrl = url.includes('blob:') || url.includes('file:///') ? url : addEncryptedAuthTokenToURL(url); + const [sourceURL] = useState(convertToProxyURL(cachedUrl)); const [isPopoverVisible, setIsPopoverVisible] = useState(false); const [popoverAnchorPosition, setPopoverAnchorPosition] = useState({horizontal: 0, vertical: 0}); const videoPlayerRef = useRef(null); @@ -169,7 +172,7 @@ function BaseVideoPlayer({ originalParent.appendChild(sharedElement); }; }, [bindFunctions, currentVideoPlayerRef, currentlyPlayingURL, isSmallScreenWidth, originalParent, sharedElement, shouldUseSharedVideoElement, url]); - + return ( <> From 5cbe56cdbee979df7738730fdd92fbe6102683f5 Mon Sep 17 00:00:00 2001 From: Brandon Henry Date: Thu, 29 Feb 2024 18:20:55 -0600 Subject: [PATCH 3/3] added initial url if converted is there --- src/components/VideoPlayer/BaseVideoPlayer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/VideoPlayer/BaseVideoPlayer.js b/src/components/VideoPlayer/BaseVideoPlayer.js index e9d2c4ecbe72..fd264f657408 100644 --- a/src/components/VideoPlayer/BaseVideoPlayer.js +++ b/src/components/VideoPlayer/BaseVideoPlayer.js @@ -54,7 +54,7 @@ function BaseVideoPlayer({ const [isLoading, setIsLoading] = useState(true); const [isBuffering, setIsBuffering] = useState(true); const cachedUrl = url.includes('blob:') || url.includes('file:///') ? url : addEncryptedAuthTokenToURL(url); - const [sourceURL] = useState(convertToProxyURL(cachedUrl)); + const [sourceURL] = useState(convertToProxyURL(cachedUrl) || cachedUrl); const [isPopoverVisible, setIsPopoverVisible] = useState(false); const [popoverAnchorPosition, setPopoverAnchorPosition] = useState({horizontal: 0, vertical: 0}); const videoPlayerRef = useRef(null);