youI.tv - goatandsheep/goatandsheep.github.com GitHub Wiki

Youi.TV for Web

If you are building video streaming apps and want out of the box support for more platforms than you can afford to own, Youi.TV is a great place to make it happen. It's a cross-platform app framework built on top of React Native.

diagram of how youi.tv uses react native to generate apps

It uses C++ and Ruby and too many other languages to generate platform-optimized video streaming apps.

However, if you want a single-codebase-fits-all solution, Youi.TV doesn't have any documented solutions that work on web. So today we're going to see if we can make that happen.

Parts of the framework

  • CLI: youi-tv
  • npm package: @youi/react-native-youi
    • make sure to do version numbers without symbols, e.g. 5.3.0 not ^5.3.0

Setting up the Youi.TV framework

  1. After installing the basic engine, we tried looking at create-youi-react-native-app, but were disappointed with an app with deprecated dependencies. The recommendation is to start with Auryn. Auryn also has a better proportion of vanilla RN code.
    1. Make sure you find out what version of CMake works with your version of youi-tv before blindly installing cmake from brew. then find the right version of brew here and at that commit, do brew cask install https://raw.githubusercontent.com/Homebrew/homebrew-cask/<commit-hash>/Casks/cmake.rb
  2. index.youi.js is equivalent to App.jsx
    1. This is problematic for react native app helpers like Expo because they expect the top level file to be .jsx or .tsx.
  3. Component support:
    1. Vanilla RN supporting AE components
    2. AE components supporting Vanilla RN components: to understand equivalencies, you must look at the list of Vanilla RN components that You.i supports. Once you do this, you notice 2 components are not available: Slider and Timeline.
      1. Slider was actually deprecated from the list of included components and moved to a community-maintained repository, which should be installed.
      2. Timeline is actually a component representing animations. You'll have to figure out something clever, perhaps with the react-native animation package.
    3. Note that AE components can be children of Vanilla components, but Vanilla components cannot be children of AE components.
    4. Routing
      1. https://reactnavigation.org
    5. Linking to modules:
      1. iOS:
        1. https://stackoverflow.com/a/56340383
        2. ./node_modules/.bin/react-native run-ios --project-path ./youi/build/ios
  4. Building
    1. DEVELOPMENT_TEAM_ID=AZVF44667G ./youi/generate.rb -p <platform>

Conversions

  • Creating a new page:
    • Copy and make a new page
    • Modify navigation bar to include button (easy enough)

Regular React Native

How to start a project, ignoring After Effects

  1. Download Auryn
  2. Just keep it for reference as it is very complete
  3. Clone this sample project. It's barebones, but it works.

Building an existing project

  1. Start your react native server
  2. Generate the raw platform code
  3. Build the platform code
  4. Run the app

Errors:

  • The current CMakeCache.txt directory /youi/build/osx/CMakeCache.txt is different than the directory /build/osx where CMakeCache.txt was created
    • Delete /youi/build/osx and rebuild
⚠️ **GitHub.com Fallback** ⚠️